Chrome视频元素的canplay事件未触发

Question

在Windows 7和Linux（Ubuntu 13.10）上的Chrome 31中，video元素的事件处理程序已注册为canplay（以及oncanplay，只是为了确保），却从未触发。当我检查DOM节点时，没有oncanplay属性。 规范称它应该存在。有人知道Chrome何时或是否支持此事件吗？

- edoloughlin

Answer 1

Chrome 支持 canplay 事件。你没有看到它是因为检查器只显示在所有元素上都具有的属性，而不仅仅是媒体元素。它也不显示loadedmetadata，durationchange等，但 Chrome 绝对支持这些。

我没有看到你的代码，但我猜测你会看到事件触发（假设你正确监听了它）的一个可能原因是你错过了该事件。除非你频繁跳过视频，否则canplay只会触发一次。所以如果事件在你添加监听器之前触发，那就太晚了。

相反，你可以像下面这样检查状态...

//assume you've already set up the video variable to point to your video element
if (video.readyState >= video.HAVE_FUTURE_DATA) {
    console.log('video can play!');
} else {
    video.addEventListener('canplay', function () {
        console.log('video can play!');
    }, false);
}

根据您想要实现的目标，您可能希望无论如何都要附加事件侦听器。如果缓冲数据不足，视频的readyState可能会恢复，并且canplay可能会再次触发。

- brianchirls

---

或者使用 >= video.HAVE_ENOUGH_DATA，如果想确保视频已经加载足够，以避免停顿！比如说，如果你不会在视频缓冲足够时就开始播放。 （用慢速连接测试服务器，以查看 HAVE_FUTURE_DATA 和 HAVE_ENOUGH_DATA 之间的区别。） - ToolmakerSteve

然而，需要注意的是，移动设备可能永远不会“准备好”：https://dev59.com/72bWa4cB1Zd3GeqPXHqX “iOS上的Safari从不预加载。” - ToolmakerSteve

正确的。HAVE_FUTURE_DATA 对应事件“canplay”，而 HAVE_ENOUGH_DATA 对应“canplaythrough”。 - brianchirls

另一个选项是使用属性 preload="auto"，因为我注意到在 Windows / Firefox 上，流会在触发 canPlay 事件之前被 suspend / 这对我解决了类似的问题。 - potench