2

我正在处理 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);

谁能看到为什么这没有运行？等待事件听起来像我需要的。

4

2 回答 2

5

您是否希望在视频第一次缓冲时显示等待图像？如果是这样，您可能没有在寻找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），因为它们处理了很多浏览器的不一致。

于 2012-07-09T21:23:29.367 回答
4

这里有一个很好的图表，它试图记录不同浏览器在“缓冲区不足”情况下的行为，这就是我认为您正在寻找的。

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

不幸的是，浏览器非常不一致，所以虽然我相信“等待”事件是你想要的，但 Chrome 不会触发它。

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

于 2012-11-16T17:27:16.267 回答