HTML5 视频 - 等待事件未触发答案

【问题标题】：HTML5 video - Waiting event not firingHTML5 视频 - 等待事件未触发
【发布时间】：2012-07-09 07:58:58
【问题描述】：

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

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

【问题讨论】：

标签： javascript html google-chrome webkit html5-video

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

不，只是当我们用完加载的视频并且在我们等待更多时必须停止时。等待似乎是正确的选择，但我很高兴被证明是错误的。
在这种情况下，等待是有意义的。你确定它没有开火？我在 Chrome、Safari 和 Firefox 上的演示报告 waiting。
是的，没有控制台条目、警报或任何东西。我会在早上放一个 JSFiddle。
更新了答案。看起来在这种情况下，Chrome 正在使用 stalled 事件。
你完全正确。这不是用于生产的，只是为了尝试和了解更多关于它（和 JavaScript）的信息。