HTML5 video timeupdate event not firing

Question

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.

Answer 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?!

Answer 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.