如何检查html5视频是否有足够的缓冲，以便在不停止缓冲的情况下播放

How to check if html5 video is buffered enough to play without stopping to buffer?

本文关键字：缓冲 播放 情况下 不停止 检查 何检查 html5 是否 视频      更新时间：2023-09-26

所以我的问题是，你如何检查视频，看看它是否缓冲到可以播放，但又不停下来再次缓冲，如果这是真的，那么播放视频。

或者我该如何检查视频是否缓冲了50%，然后它是否播放了视频。

我试过的（但当我看到控制中的buff量时，它似乎不是缓冲的）

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

正如之前所说的，当查看视频的控制时，这个代码似乎没有太多的缓冲，甚至1/4都没有缓冲，Prehaps最好是检查视频是否缓冲了50%左右，然后播放它，尽管我不确定如何做到这一点或如何进行。

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

我认为你可以在播放事件时使用这个

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

或者，如果你想检查视频当前是缓冲区，你可以在这里使用onwaiting事件更多信息http://www.w3schools.com/tags/ref_av_dom.asp

我做了一个小测试：

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事件后似乎缓冲了很多，然后在停止缓冲时触发了suspend事件，所以也许您可以使用它。

总之，我看到的选项是：

  1. 理想的方式是：相信浏览器对何时开始播放的估计（autoplay=true）
  2. 破解方法：等待挂起事件，然后启动视频（autoplay=false）。这两个浏览器似乎以这种方式进行了更多的缓冲

类似这样的东西：

vid.onsuspend = function() {
    if (vid.paused) {
        vid.play();
    }
};
相关文章：