HTML5视频时间更新事件未启动

HTML5 video timeupdate event not firing

本文关键字：启动 事件 更新 视频 时间 HTML5      更新时间：2023-09-26

我的页面上确实有一个<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应该在currentTime was changed时触发，所以我不认为我使用了错误的事件？我正在使用的所有其他事件（即play和ended）都运行良好。

有很多类似的问题，但所有这些似乎都是过时的bug？这是另一个错误（我在Chrome 17和FF10中测试过）还是事件结构发生了任何变化？还是我错过了完全不同的东西？

编辑：我只是注意到，只有当视频还没有播放时，才会出现这个问题。所以当我这样做的时候：

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

活动将如期举行。

只有在初始化视频后才会调度事件。就像你刚才在编辑评论中指出的那样，你在哪里播放（）和播放（）视频，这会预加载视频。如果您将preload属性与auto一起使用（auto=author认为浏览器应该在加载页面时加载整个视频）

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

但我猜你自己回答了你的问题？！

要使用的事件不是"timeupdate"，我认为它是"seeked"
当您更改currentTime时，首先会发生"查找"事件，然后一旦视频与所选时间同步，就会触发"查找"活动。

我用谷歌28测试了这个，它在不需要控件上的.play（）+.pause（）的情况下就可以工作了。

因此，正如在编辑我的问题时所说，我用一种简单而愚蠢的方法解决了这个问题。只需：

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

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

附带说明：奇怪的是，将preload设置为auto确实会触发视频的预加载，但它似乎并没有初始化播放头。

相关文章：