A progress time bar for the videoplayer plugin

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

1

Saturday, June 4th 2011, 5:03am

Hi all,

After a lot of scratching the head (I was using the changeorigin(align,edge) before I realized it was not a good way to do ), I have finally reached (it seems ;-)

) a working code to create a progress time bar for the videoplayer plugin...
To make it working, you have to include the videoplayer_timebar.xml file and call the do_time_bar() for example from the onvideoready event of the videoplayer plugin:

	Source code
1 2 3 4 5 6 7 8 9 10 11	<krpano version="1.0.8" onstart=""> <include url="videoplayer_timebar.xml" /> <plugin name="video" ... onvideoready="do_time_bar(video,video);" ... /> </krpano>

There is some explanation inside the videoplayer_timebar.xml file.
Here some examples online: ex_1 - ex_2 - ex_3

Hope you like it... Comments, examples use, improvements are well come...

@ BBomber
here a code for video 360:

Source code

<krpano version="1.0.8">

<include url="videoplayer_timebar.xml" />

<!-- load and control the video with the videoplayer plugin -->
<plugin name="video"
url="%SWFPATH%/plugins/videoplayer.swf"
videourl="video360.flv"
onvideoready="do_time_bar(video,null,bottom,null,70%,6,0,20,false,10);"
  />

<!-- define the pano image and get the pano video from the videoplayer plugin -->
<image>
<sphere url="plugin:video" />
</image>

</krpano>

SAlut.

michel has attached the following file:

videoplayer_timebar.zip (3.38 kB - 285 times downloaded - latest: May 17th 2013, 3:38pm)

Go to the top of the page

Nupsi

Intermediate

Posts: 427

2

Saturday, June 4th 2011, 10:36am

woah...that´s a nice surprise and even in xml! In times where everybody is taking money for every little thing, it´s really nice to see that there are still people willing to share. Thanks a million *thumbsup*

Best regards,
Nupsi

Go to the top of the page

emediquei

Intermediate

Posts: 175

3

Saturday, June 4th 2011, 1:43pm

Really nice! I was just working on something similar for a project. I'll share it also once the deadline is through and I have some more time :P

I really like the recursive check_for_parents() *thumbsup*

PanoTag: Facebook tagging for krpano

KRPano development and more: http://www.digisfera.pt/en/development

Go to the top of the page

Tuur

Master

Posts: 1,952

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

4

Saturday, June 4th 2011, 1:49pm

He Michel,

i have to give you a compliment for the music ;-)

!!!

also for the bar offcourse

Great job!

Thanx

Tuur *thumbsup*

http://www.virtualtuur.com

Go to the top of the page

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

5

Saturday, June 4th 2011, 3:24pm

Hi all,

Quoted from "Nupsi"

woah...that´s a nice surprise and even in xml! In times where everybody is taking money for every little thing, it´s really nice to see that there are still people willing to share. Thanks a million

Best regards,
Nupsi

Thank's Nupsi... Sharing is a good the way to learn from others... So *rolleyes*

...

Quoted from "emediquei"

Really nice! I was just working on something similar for a project. I'll share it also once the deadline is through and I have some more time :P

I really like the recursive check_for_parents()

Graças emediquei... I will wait your own implementation *thumbup*

...

Quoted from "Tuur"

He Michel,

i have to give you a compliment for the music !!!

also for the bar offcourse

Great job!

Thanx

Tuur

Hi Tuur

... ZAPPA was impressive *attention*

...

SAlut.

Go to the top of the page

BBomber

Beginner

Posts: 24

6

Saturday, June 4th 2011, 10:13pm

OK, first of all...IT WORKS! Man you are a genius! wow....It actually works! very simple and clean! I'm no pro at xml coding and I was able to get this to work on the 1st try!! I cannot thank you enough. I will post a sample 360 video piece for you all later today...I just need to fine tune some things.

Michel, thank you thank thank you! We all appreciate your hard work and you didn't charge for your time! this is epic!

Go to the top of the page

panomaster

Trainee

Posts: 84

Location: Kobyłka, Poland

7

Sunday, June 5th 2011, 11:01am

I have made similar control panel using draggable plugins. You can watch them at http://ai360.pl/video360/2/ or http://panoramy.ai360.com.pl/gigapanoramy/barbara/ (zoom slider). I'm going to use this technique to make nice looking textfield scrollbar in the future.

Leszek Cuper
Panoramy 360
Wirtualne spacery

This post has been edited 1 times, last edit by "panomaster" (Jun 5th 2011, 11:29am)

Go to the top of the page

Berenger

Beginner

Posts: 5

8

Wednesday, June 15th 2011, 11:57am

Hello, thank you for the progress bar, it saves my life in the context of my project.

But I are not understood what the purpose of the parameter% 2
[code] ifnot (% 2 == null, set (plugin [time_bar]. parent,% 2)) [/ code]

It serves to position the bar relative to its direct parent? And they are the possible values?

Then I asked whether it would be possible to run this code on a wonderful video hotspot.

I would like to combine this with your progress bar code on the flyout from the video.

Thank you in advance.

Go to the top of the page

drdilusion

Beginner

Posts: 3

9

Thursday, July 14th 2011, 1:08pm

360 video player Pause()

First of all congratulations for the code.
It's great. Thank you very much.

I have tried with krpano 1.0.9 and it doesn't work but with (2011-05-20-krpano10814-viewer-rc3) it works.

I'm trying to add a pause button in a 360 video.

I've tried many ways but I can not.
Below I pass the code I have.

Source code

<krpano version="1.0.8"> 

<include url="videoplayer_timebar.xml" /> 

<!-- load and control the video with the videoplayer plugin --> 

<plugin name="video" 
url="videoplayer.swf" 
videourl="v360-mivideo.flv" 
onvideoready="do_time_bar(video,null,bottom,null,70%,6,0,20,false,10);" 
onclick="video.pause();" 
/> 

<!-- define the pano image and get the pano video from the videoplayer plugin --> 

<image> 
<sphere url="plugin:video" /> 
</image> 

<plugin name="full" url="stop.gif" keep="true" 
align="rightbottom" x="0" y="0" alpha="0.85" handcursor="true" 
scalechildren="true" 
visible="true" 
zorder="1" 
width="54" 
height="54" 
onclick="action(pause);" 
onhover="showtext(Pause);" 
/> 

<action name="pause"> 
video.pause(); 
</action> 

</krpano>

Where is the mistake?. Can you help?.
Thank you very much.

Go to the top of the page

klaus.krpano

Administrator

Posts: 7,241

10

Thursday, July 14th 2011, 2:24pm

Hi,

Quoted from "michel"

Hope you like it... Comments, examples use, improvements are well come...

really great work! and easy to use too!

Quoted from "drdilusion"

Where is the mistake?. Can you help?.

instead of:

	Source code
1	video.pause();

do:

	Source code
1	plugin[video].pause();

best regards,
Klaus

Go to the top of the page

drdilusion

Beginner

Posts: 3

11

Thursday, July 14th 2011, 3:53pm

thank you very much¡¡

it works¡¡ I'm learning a lot.

this is the code

Source code

<krpano version="1.0.8"> 

<include url="videoplayer_timebar.xml" /> 

<!-- load and control the video with the videoplayer plugin --> 

<plugin name="video" 
url="videoplayer.swf" 
buffertime="4" 
videourl="v360-mivideo.flv" 
onvideoready="do_time_bar(video,null,bottom,null,70%,6,0,20,false,10);" 
/> 

<!-- define the pano image and get the pano video from the videoplayer plugin parent="video"--> 

<image> 
<sphere url="plugin:video" /> 
</image> 

<plugin name="video_pause" 
url="stop.gif" 
align="leftbottom" 
onhover="showtext(Pause);" 
onclick="plugin[video].togglepause();" 
visible="true" 
/> 

</krpano>

Go to the top of the page

milotimbol

Intermediate

Posts: 208

Location: Antipolo City, Philippines

Occupation: Software Engineer

12

Tuesday, July 19th 2011, 5:15am

nice! will this work for distorted vidos?

www.milotimbol.com
www.360philippines.com
www.boracay360.com

Go to the top of the page

Nupsi

Intermediate

Posts: 427

13

Saturday, August 20th 2011, 10:08am

I´m trying to use your progress bar for the krpano-videoplayer but I can´t get it to work when the parent (the video itself) is aligned to the center. Every other aligning works great, but if I align the video to the center, the seeking is´nt working anymore and the mouseover on the progress bar shows "00:NaN".

I´ve looked through your code but I just can´t find the problem. It would be really nice if you could help me find the problem. I´m no newbie with krpano, so it´s definitely not that I made something wrong....at least I don´t think so ;-)

As I said, without setting the video as a parent or aligning the video to the left, top, bottom or right there is no problem. But as soon as I center the video....bamm, not working!

But the strangest thing is, if I set the video-plugin to the center and offest it just one pixel to the right or left with "x=1/x=-1" it works just fine *confused*

Thanks a lot and best regards!
NUPSI

Go to the top of the page

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

14

Saturday, August 20th 2011, 5:39pm

Hi Nupsi

,

Thanks for your note.
You are right... But in fact this happen also with all alignment settings not only center as you seem to have experimented ;-)

...
In fact, (for the parent) any alignment does not work without setting also a value to x... That is because of the align_offset (code between lines 164 to 193) that is calculated by using the plugin[].x value... When x is not set , plugin[].x returns plugin[].x as value, not 0... and that is the reason of the "00:NaN"...
Also, the use of percent values for x makes bad calculation of the align_offset...
Conclusion, for the parent, remember to set a value to x (at least 0) and to not use percent...

Quoted from "milotimbol"

nice! will this work for distorted vidos?

Not as it is... But it is easy to modify the code to make it working for videoplayer as hotspot... If you need it, let me know...

Quoted from "Klaus"

really great work! and easy to use too!

Thank you Klaus *smile*

, it was a hard challenge for me and has been not easy at all (I was using the changeorigin(align,edge) at first), but it seems I have reached something usable at least... I hope it will work also with the new videoplayer plugin for the krpanoJS...

SAlut.

Note: I see that many have downloaded the file, but no one has posted an example usage of it... Please, do not be so timid and shares something to see ... And better, if some one is able to improve it, please show the result ...

Go to the top of the page

michel

Professional

Posts: 1,151

Location: ANDORRA

Occupation: TV

15

Tuesday, August 23rd 2011, 12:29pm

Hi Panomaster,

Quoted from "panomaster"

I have made similar control panel using draggable plugins. You can watch them at http://ai360.pl/video360/2/......

I just realized that your example it is also an xml code *smile*

... just great *thumbup*

...

If I am not in mistake, I think you can enhance it by adding an count_forward() call (after line 39) inside the stopdragging() action:

Source code

	<action name="stopdragging">
		set(dragging, false);
		set(seekstop, get(plugin[seek].x));
		dec(seekstop, 62);
		div(seekstop, 500);
		mul(seekstop, get(plugin[video].totaltime));
		plugin[video].seek(get(seekstop));
		count_forward();
		trace(rozpoczynam od: , get(seekstop));
	</action>

This way, the seek bar should also be updated after seeking when the player is paused...

SAlut.

This post has been edited 1 times, last edit by "michel" (Aug 23rd 2011, 12:40pm)

Go to the top of the page

superhoha

Beginner

Posts: 5

16

Tuesday, September 27th 2011, 11:55am

Thanks a bunch, Michel.

I cant search anywhere on how to use xml to do the time bar :) so your code helps me learn a lot. So really thank you :)

However Im facing a prob. As you already know, Your code doesnt support hotspot :( and I kind of want it to.

I am making a 3D room with TV inside, And As you can guess, the TV will act as a video hotspot where you can watch Video (maybe later I will try to add channels? ;)

However I would like the TV to have more control other than pause and play. So your time bar is a saver. But it cant be run on hotspot :( I tried to fix your xml, since you said it is easy to do so :) But I never get close to the result :)) It seems your "easy" is too much for me.

If you have time, Can you show me how to make it run on hotspots? Thanks A lot.

PS: While we are at it, Is there a way to make a hotspot link to a video on youtube? If so I think It would be easier to use the video control of youtube? I didnt try it yet, but I think it should be possible?

Ha

Go to the top of the page

info@totzek.de

Trainee

Posts: 85

Location: Berlin

Occupation: Panoramafotograf

17

Thursday, October 13th 2011, 10:19pm

wow!

Wow!
This is just impressing! - And another proof for the fact, that literally everything is possible using krpano...

Big Up to Michel! Really!
I love this code! (Never thought i would say something like this...)

When i finished my work on a current project, i will post it for you as an example.
Double Wow!

Edit:
I am done! Here you can see the project I did for Volkswagen, using the amazing plugin:
http://panographer.de/vw-panorama-fotografien/ (click on the small 360° icon!)

Jan Totzek | Panoramafotografie | Berlin
www.panographer.de

This post has been edited 1 times, last edit by "info@totzek.de" (Feb 1st 2012, 11:09am)

Go to the top of the page

officinepanottiche

Trainee

Posts: 96

Location: Venezia

Occupation: interactive pictures

18

Wednesday, February 1st 2012, 11:02am

Michel, THANK YOU!!!!!
:-)

Go to the top of the page

jschrader

Intermediate

Posts: 197

Location: Bavaria, Germany

Occupation: Photographer, Producer

19

Tuesday, February 7th 2012, 10:03am

Gentlemen, may I ask for another favor?
I'm trying to build a bit more fancier (following actual standards) version of the time-bar with additional controls in it.
What I'm missing (and most likely won't get my head around to write it myself) is a code snippet that allows to write the elapsed time (at the beginning) and the total time (at the end) of the bar.
If I succeed I will be happy to post a complete set including graphics for your convenience.

Thanks
Jürgen

Go to the top of the page

panowerk

Beginner

Posts: 12

Location: Freiburg, Germany

Occupation: Designer, photographer

20

Wednesday, February 8th 2012, 1:22pm

Problem with flickering text.

Hello,

This is a really great plugin and it was easy to implement but I'm having an issue with flickering time count. Also, it has nothing to do with the plugin but it's probably the same issue, but I noticed that the text for the button to close the video flickers as well. It's something about text displaying at the edge of the video layer.

I have no idea what it could be and, searching the forums, I haven't seen anyone else complain about it so it must be just something I've done.

Any help would be most welcome.

http://www.panowerk.com/panoramas/ganter/tour.html

http://www.panowerk.com/panoramas/ganter/tour.xml

http://www.panowerk.com/panoramas/ganter…yer_timebar.xml

www.panowerk.com • www.tripleman.com • www.kreativpixel.de

Go to the top of the page