HTML5视频的timeupdate事件不触发。

Question

我在页面上有一个<video>元素：

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

在我的JS中，它读取：

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

现在我将启动我的控制台并输入：

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

显示的框架会改变，但事件不会触发。根据规范，当“当前时间已更改”时，应该触发timeupdate事件，因此我不认为我使用了错误的事件？我使用的所有其他事件（即play和ended）都运作正常。

有很多类似的问题，但所有这些问题似乎都是过时的错误？这是另一个错误吗（我在Chrome 17和FF10中进行了测试），还是事件结构发生了变化？或者我完全错过了其他事情？

编辑： 我刚刚注意到，只有在视频尚未播放时才会出现此问题。因此，当我执行以下操作时：

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

事件将会像应该的那样触发。

- m90

Answer 1

使用的事件不是"timeupdate"，我认为应该使用"seeked"。当您更改currentTime时，首先会发生"seeking"事件，然后一旦视频与选择的时间同步，就会触发"seeked"事件。

我使用Google 28测试过，并且无需在控件上使用.play() + .pause()即可正常工作。

- user217447

Answer 2

只有在视频初始化后才会触发事件。就像您在编辑评论中指出的那样，在播放（play()）和暂停（pause()）视频时会预加载视频。如果您使用preload属性并设置为auto（auto = 作者认为浏览器应该在页面加载时加载整个视频），则应该发生相同的情况。

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

但我觉得你自己已经回答了你的问题？！

- longi

---

那么在视频第一次开始播放之前，就没有办法检测视频的播放头是否已经移动了吗？ - m90

也许我们的交流存在误解，但是你如何寻找一个尚未加载（或正在加载）的视频呢？你的控件是否一直显示？你有这种情况的简短示例吗？也许这个网站可以帮到你：http://www.w3.org/2010/05/video/mediaevents.html，其中列出了所有事件的实时示例。"seeked"可能是你需要的属性！ - longi

这可能有点复杂，但请参见：http://goo.gl/uJyod - 您可能想取消隐藏<video>元素以查看发生了什么。在控制台中键入 $('#video')[0].currentTime = 1;，视频将更新，但画布表示不会（它正在等待timeupdate事件）。一旦视频开始播放，它就像预期的那样工作。谢谢。 - m90

Answer 3

所以，正如我在编辑问题时已经说明的那样，我用了一个简单而相当愚蠢的方法来解决这个问题。只需执行以下操作：

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

要“初始化”播放头。然后即使没有人启动视频，也应该能够获得timeupdate事件。

顺便说一句：奇怪的是，将preload设置为auto确实会触发视频的预加载，但似乎并不会初始化播放头。

- m90