HTML5视频 - 等待事件未触发

Question

我正在搞乱HTML5视频和自定义控件,我希望使用等待事件来理想地显示加载图像,但只是写入控制台现在就可以了.

等待的事件

播放已停止,因为下一帧不可用,但用户代理期望该帧在适当的时候可用.

我在这里举了一个例子 - > 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)因为他们处理了很多浏览器的不一致.