javascript - HTML5 视频 - 等待事件未触发

Question

我正在处理 HTML5 视频和自定义控件，我希望使用等待事件来理想地显示加载图像，但目前只需写入控制台就可以了。

等待事件

Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course.

我在这里设置了一个例子 -> 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 触发，即使是在缓存副本上也是如此。如果您在 play() 之前调用 load()，您可能永远不会看到 waiting 触发，因为下一帧可能始终可用。

最好的过程是显示您的图像，调用 load()，然后监听等待 canplay 或 canplaythrough。此时，隐藏您的图像并开始 play()。

更新

查看此 fiddle 中的视频:http://jsfiddle.net/bnickel/zE8F3/ Chrome 不会发送 waiting 事件，而是在视频卡住后不久发送 stalled 事件。您可能需要检查在您支持的每个浏览器上的工作情况。请记住，像 VideoJS 这样的播放器非常庞大 (~142KB)，因为它们要处理很多浏览器的不一致问题。