如何检查 html5 视频是否缓冲到足以播放而不停止缓冲？答案

【问题标题】：How to check if html5 video is buffered enough to play without stopping to buffer?如何检查 html5 视频是否缓冲到足以播放而不停止缓冲？
【发布时间】：2015-03-25 13:52:57
【问题描述】：

所以我的问题是，您将如何检查视频以查看其缓冲是否足以播放，但又不会停止缓冲，如果是，则播放视频。

或者我将如何检查视频是否已缓冲 50% 以及是否已播放视频。

我已经尝试过（但是当我查看控件中的 buff 量时，它似乎并不正确，它似乎没有缓冲很多）

var Video = document.getElementById("videoPlayer");
Video.oncanplaythrough = function HasBuff() {
    alert("Is Buffered");
    Video.play();
};

如前所述，在查看视频控件时，这段代码似乎没有很多 buff，甚至没有 1/4 被缓冲，也许更好的是检查视频是否缓冲了 50% 左右，然后玩它，虽然我不确定如何去做或去做。

感谢您的阅读，我处于“初学者水平”，所以很抱歉，如果这似乎是一个简单或愚蠢的问题，但我们都必须从某个地方开始，对吗？ :) 再次感谢。

【问题讨论】：

标签： javascript jquery events html5-video buffer

【解决方案1】：

我认为你可以使用这个 onplaying 事件

var vid = document.getElementById("myVideo");
vid.onplaying = function() {
    alert("The video is now playing");
};

或者如果您想检查视频当前是否在缓冲区，您可以在此处使用等待事件更多信息http://www.w3schools.com/tags/ref_av_dom.asp

【讨论】：

【解决方案2】：

我做了一个小测试：

var vid = document.getElementById("video");

var buffered = function() {
    var bufferedPercent =
        vid.duration > 0 && vid.buffered.length > 0 ?
        vid.buffered.end(0) / vid.duration * 100 :
        0;
    return 'buffered ' + bufferedPercent.toFixed(0) + '%';
};

vid.onprogress = function() {
    console.log('progress: ' + buffered());
};

vid.oncanplay = function() {
    console.log('canplay: ' + buffered());
};

vid.oncanplaythrough = function() {
    console.log('canplaythrough: ' + buffered());
};

vid.onsuspend = function() {
    console.log('suspend: ' + buffered());
};

在 Chrome 上我得到这样的输出：

canplay: buffered 5%
canplaythrough: buffered 5%
progress: buffered 15%
progress: buffered 25%
suspend: buffered 25%

我的测试视频“缓冲”永远不会超过 25%（禁用自动播放）。在 Firefox 上停止在 19%。

所以看起来你不能强制浏览器缓冲超过它想要的。我也尝试显式调用 load() ，没有区别。也许如果你向前寻找它可能会缓冲更多，但它可能会丢弃已经缓冲的部分（我没有尝试过）。但是浏览器在触发 canplaythrough 事件后似乎缓冲了很多，然后在停止缓冲时触发了暂停事件，所以也许你可以使用它。

总的来说，我看到的选项是：

理想方式：相信浏览器对何时开始播放的估计 (autoplay = true)。
hacky 方法：等待暂停事件，然后开始播放视频（自动播放 = false）。这两个浏览器似乎缓冲更多。

类似这样的：

vid.onsuspend = function() {
    if (vid.paused) {
        vid.play();
    }
};

【讨论】：