Pause HTML5 Video Programatically

[BurninBrainCells]

Hi To All
I would like to pause a video like a presentation would pause whence the user needs to read a long screen of info, w/o the user clicking a button.

I searched stackoverflow.com, got lots of possible .js answers, from onload, onplay, timeupdate, currentTime, addEventListener, setInterval. Actually too many answers cuz Im confused about how to approach the solution. Seems the HTML5 API doesn't have a native event to pause w/o user clicking a button.

I want the video to pause at like 5sec then again at 36sec then maybe at the 50sec. mark. I tryed 2 timers, but if the user goes back or skips forward the timers will fire at inappropriate/out of sync places and times. When I used flash I would put a stop() in the frame I wanted to halt the video on and that worked well. I trying to work out the equivalent w/ HTML5.

Anyone done this before? Gimme a hint? Thanks in advance... BBC

[Gaev]

BBC:

Anyone done this before?

A year ago, I tried to make a Player for YouTube videos. The APIs would be different from those for HTML5 Videos ... and I did not need to have anything Pause at pre-determined times.

Gimme a hint?

The overall strategy would be to use a Timer (NeoBook or Javascript) ... and do your decision making within the Interval (say 0.25 seconds) code.

Each time the code is triggered, you would fetch the "currentTime" (meaning how far from the start of the video the current frame is) ... and compare the current value against the previous value.

The exact logic for this decision making (to Pause or not to Pause) would be determined by the different scenarios when you want the Pause to take effect.

For example, if ...

- the previous value was between 4.50 and 4.99

AND

- current value is between 5.00 and 5.49

... you invoke the Pause API command


Similarly for the 36 second and 50 second events.


I would suggest using the Javascript Timer to avoid any time lag during interactions between NeoBook and the Browser object. Best to try out the Pause and Play APIs first (using Buttons) ... and display results of "currentTime" so you know what kind of values (probably milli seconds) the API returns.

If you run into problems, perhaps you can post the link for the stackoverflow response page (so we don't have to reinvent the wheel).

[BurninBrainCells]

Hi Ya` Gaev
Thanks for answering.
http://stackoverflow.com/questions/2924 ... cific-time
(url doesn't end in .html)
All 3 answers are kinda interwoven and I like the idea of minimizing the browser load.
Im surprised that a HTML5 pause, w/o button, is rare, I would have thought this would be very common.
Looks like Flash is not a buggy whip just yet.
Im gonna tackle the .js timer tomorrow... rest my brain cells tonight. Thanks again BBC

[Gaev]

BBC:

I did a Google search and found these two useful websites ...

- http://msdn.microsoft.com/en-us/library ... 85%29.aspx
- http://www.w3schools.com/tags/ref_av_dom.asp ...


Say that your video is defined so ...

Code: Select all

<video id="video1" controls="controls">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p id="curTime">0</p>

You can define a callback function that will be serviced every time 'the number of milli seconds that have been played' are changed ...

Code: Select all

myVid=document.getElementById("video1");
myVid.addEventListener("timeupdate", function () {
   var vTime = myVid.currentTime;
   document.getElementById("curTime").textContent = vTime.toFixed(3);
}, false);

Instead of displaying the "played time", you just insert your logic to determine if the video should be Paused (or not) ... no Timers required !!!

[BurninBrainCells]

Hi Ya` Gaev
Im experimenting w/ the w3schools tuts and xamples now. I have to learn a bit about .js basics before I could tackle this properly. I understand the overall concept of the xample you posted, I gotta figure out the nut and bolts of it now.
Hopefully, I have an something working today. Till then, thanks again.... Jack