HTML5 video timeupdate event not firing

问题

I do have a <video> element on 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 will fire up my console and type:

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

The displayed frame will change, yet the event will not fire. According to the specs timeupdate should fire when currentTime was changed, so I do not think I am using the wrong event? All other events I am using (i.e. play & ended) are working just fine.

There are a lot of similar questions out there, yet all of those seem to be outdated bugs? Is this yet another bug (I tested in Chrome 17 and FF10) or did anything change 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 played. So when I do:

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

The event will fire just like it should.

回答1:

the event is only dispatched after the video has been initialized. like you just pointed out in your edit-comment, where you play() and pause() the video, which preloads the video. same should happen, if you use the preload attribute with auto (auto = author thinks that the browser should load the entire video when the page loads)

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

but i guess you answered your question yourself?!

回答2:

The event to use is not "timeupdate", I think it is "seeked".
When you change the currentTime, first a "seeking" event happens then as soon as the video is in sync with the time chosen, the "seeked" event is triggered.

I tested this with Google 28 and it worked without needing a .play() + .pause() on the control.

回答3:

So, as already stated in the edit to my question I solved this with a simple and rather stupid approach. Just do:

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

to "initialize" the playhead. Then one should be able to get timeupdate events even if no one ever started the video.

On a side note: strangely, setting preload to auto does trigger a preload of the video, yet it does not seem to initialize the playhead.

来源：https://stackoverflow.com/questions/9770247/html5-video-timeupdate-event-not-firing