HTML5 video watch event does not fire

Question

I have a <video> element in my page:

 <video id="myVideo"> <source src="vid.mp4" type="video/mp4" /> <source src="vid.ogg" type="video/ogg" /> </video> 

In my JS it reads:

 var v = $('#myVideo')[0]; v.addEventListener('timeupdate',function(){ alert('I changed'); },false); 

Now I started the console and typed:

 $('#myVideo')[0].currentTime = 2; 

The displayed frame will change, but the event will not fire. According to the specifications, timeupdate should fire when currentTime was changed , so I don’t think I'm using the wrong event? All other events that I use (i.e. play and ended ) work fine.

There are many similar questions, but all of them seem to be outdated errors? Is this another mistake (I tested in Chrome 17 and FF10) or has something changed in the event structure? Or am I missing something completely different?

EDIT: I just noticed that this problem will only occur when the video has not yet been played. So when I do this:

 $('#myVideo')[0].play(); $('#myVideo')[0].pause(); $('#myVideo')[0].currentTime = 2; 

The event will fire as it should.

Answer 1

So, as the editors have already said to my question, I decided this with a simple and rather stupid approach. Just do:

 video.play(); video.pause(); 

to “initialize” the playhead. Then you need to be able to receive timeupdate events, even if no one has run the video.

On the one hand: strange, setting preload to auto starts preloading the video, but does not seem to initialize the player.

Answer 2

an event is dispatched only after the video is initialized. as you just pointed out in your editing comment, where you play () and pause () the video that preloads the video. the same thing should happen if you use the preload attribute with auto (auto = the author believes that the browser should download all the videos when the page loads)

 <video preload="auto|metadata|none"> 

but I think you yourself answered your question ?!

Answer 3

The event to use is not "timeupdate", I think it is "distorted".
When you change currentTime, a “search” occurs first, and as soon as the video is synchronized with the selected time, the “seeked” event is fired.

I tested this with Google 28 and it worked without using .play () + .pause () in the control.