HTML5 视频时间更新事件未触发答案

【问题标题】：HTML5 video timeupdate event not firingHTML5 视频时间更新事件未触发
【发布时间】：2012-03-19 12:31:25
【问题描述】：

我的页面上有一个<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）都运行良好。

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

编辑： 我只是注意到这个问题只会在视频尚未播放时出现。所以当我这样做时：

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

事件将按原样触发。

【问题讨论】：

【解决方案1】：

该事件仅在视频初始化后调度。就像您刚刚在编辑评论中指出的那样，您在其中 play() 和 pause() 视频，这会预加载视频。如果您将 preload 属性与 auto 一起使用，也会发生同样的情况（auto = 作者认为浏览器应该在页面加载时加载整个视频）

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

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

【讨论】：

那么在视频第一次开始播放之前，没有办法检测视频的播放头是否已经移动？
也许我们在谈论不同的目的，但是您如何寻找尚未加载（或正在加载）的视频？您的控件是否一直显示？你有那个案例的简短例子吗？ ..也许这个网站也有帮助：w3.org/2010/05/video/mediaevents.html 一个活生生的例子中所有事件的列表。寻找可能是你的属性？！
这可能有点复杂，但请参阅：goo.gl/uJyod - 您可能想取消隐藏 <video> 元素以查看会发生什么。在控制台中输入$('#video')[0].currentTime = 1;，视频会更新，但画布表示不会更新（它正在等待timeupdate 事件）。视频播放完毕后，它会按预期工作。谢谢。

【解决方案2】：

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

我用 Google 28 对此进行了测试，它无需在控件上使用 .play() + .pause() 即可工作。

【讨论】：

【解决方案3】：

所以，正如我在问题的编辑中已经说明的那样，我用一种简单而愚蠢的方法解决了这个问题。做吧：

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

“初始化”播放头。那么即使没有人开始播放视频，也应该能够获得timeupdate 事件。

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

【讨论】：