HTML5视频-等待事件未启动

HTML5 video - Waiting event not firing

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

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

等待事件

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

我在这里举了一个例子->http://jsbin.com/uvipev/2/edit#javascript，html，实时

这是视频代码减去控制：

<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);

有人知道为什么不运行吗？等待事件听起来像是我需要的。

您是否希望在视频第一次缓冲时显示等待的图像？如果是这样，那么您可能不是在寻找waiting。

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

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

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

更新

看看这个小提琴里的视频：http://jsfiddle.net/bnickel/zE8F3/Chrome不发送waiting事件，而是在视频冻结后不久发送stalled事件。您可能需要检查您支持的每个浏览器的工作情况。请记住，像VideoJS这样的播放器是巨大的（约142KB），因为它们处理许多浏览器不一致的问题。

这里有一个很好的图表，试图记录不同浏览器在"缓冲区不足"场景中的行为，这就是我认为您正在寻找的。

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

不幸的是，浏览器非常不一致，所以虽然我相信"等待"事件是你想要的，但Chrome不会启动它

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

相关文章：