Question

我正在搞乱HTML5视频和自定义控件，我希望使用等待事件来理想地显示加载图像，但现在只需写入控制台即可。

等待事件

播放已停止，因为下一帧不可用，但是用户代理期望该框架在适当的时候可用。

我在这里举了一个例子 - ＆gt; http://jsbin.com/uvipev/2/edit#javascript,html,live

这是视频代码减去控件：

<video controls preload="meta">
   <source src="http://www.tools4movies.com/dvd_catalyst_profile_samples/The%20Amazing%20Spiderman%20tablet.mp4" />
   This is video fallback
</video>

这是等待事件的事件监听器。

 var video = document.getElementsByTagName('video')[0];   

    video.addEventListener('waiting', function() {
        console.log('waiting');
    }, false);

任何人都可以看到为什么这不运行？等待事件听起来就像我需要的那样。

Answer 1

您是否希望在视频首次缓存时显示等待图像？如果是这样，您可能不会寻找waiting。

看一下这个演示：http://www.w3.org/2010/05/video/mediaevents.html

如果您在没有任何预加载的情况下致电play()，即使在缓存的副本上也应该看到waiting。如果您在load()之前致电play()，则可能永远不会看到waiting点火，因为下一帧始终可用。

最佳流程是显示图片，致电load()，然后等待canplay或canplaythrough。此时，隐藏您的图片并启动play()。

<强>更新

观看此小提琴中的视频：http://jsfiddle.net/bnickel/zE8F3/ Chrome未发送waiting事件，而是在视频冻结后不久发送stalled事件。您可能需要检查您支持的每个浏览器的工作方式。请记住，像VideoJS这样的玩家很庞大（约142KB）因为他们处理了很多浏览器的不一致。

Answer 2

这里有一个很好的图表，试图在“缓冲区欠载”场景中记录不同浏览器的行为，这是我认为你正在寻找的。

https://web.archive.org/web/20130902074352/http://www.longtailvideo.com/html5/buffering/

不幸的是，浏览器非常不一致，所以虽然我确实认为“等待”事件是您想要的，但Chrome并不会解雇它。

当玩家根据视频的播放时间进行缓冲，检查播放/暂停/等时，我一直在尝试“猜测”。事件，以便我知道应该的时间何时增加。

HTML5视频 - 等待事件未触发

2 个答案: