HTML5 视频 - 加载百分比？

Question

有谁知道我需要查询什么事件或属性才能获取 HTML5 视频已加载量的百分比？我想画一个 CSS 样式的“加载”栏，其宽度代表这个数字。就像 You Tube 或任何其他视频播放器一样。

因此，就像您管一样，即使整个视频尚未加载，视频也会播放，并向用户提供有关视频已加载和剩余加载量的反馈。

就像 YouTube 上的红条：

Answer 1

下载一些数据后会触发 progress 事件，每秒最多 3 次。 浏览器通过 buffered 属性提供可用媒体范围的列表； MDN 上的媒体缓冲、搜索和时间范围提供了这方面的完整指南。

单一加载开始

如果用户不跳过视频，文件将在一个 TimeRange 中加载，并且 buffered 属性将有一个范围：

------------------------------------------------------
|=============|                                      |
------------------------------------------------------
0             5                                      21
|             \_ this.buffered.end(0)
|
\_ this.buffered.start(0)

要知道该范围有多大范围是，这样读：

video.addEventListener('progress', function() {
    var loadedPercentage = this.buffered.end(0) / this.duration;
    ...
    // suggestion: don't use this, use what's below
});

多个加载开始

如果用户在加载时更改播放头位置，则可能会触发新的请求。这会导致 buffered 属性碎片化：

------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  1           5                    15          19    21
  |           |                    |            \_ this.buffered.end(1)
  |           |                     \_ this.buffered.start(1)
  |            \_ this.buffered.end(0)
   \_ this.buffered.start(0)

请注意缓冲区的数量如何变化。

由于它不再是连续的加载，因此“加载百分比”不再有多大意义。您想知道当前的 TimeRange 是什么以及加载了多少。在此示例中，您将获得负载条应开始的位置（因为它不为 0）和结束位置。

video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    ...
});

Answer 2

其他遮阳篷对我不起作用，所以我开始深入研究这个问题，这就是我想到的。该解决方案使用 jquery 制作进度条。

function loaded()
{
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);

    $("#progressB").progressbar({value: (end/total)*100});      
}   

$('#videoID').bind('progress', function() 
{
    loaded();
}
);

我希望这也对其他人有帮助

Answer 3

已加载字符串的百分比修复..输出类似 #loaded 元素内已加载 99% 的内容...

function loaded() {
    var v = document.getElementById('videoID');
    var r = v.buffered;
    var total = v.duration;

    var start = r.start(0);
    var end = r.end(0);
    var newValue = (end/total)*100;
    var loader = newValue.toString().split(".");

    $('#loaded').html(loader[0]+' loaded...');

    $("#progress").progressbar({
        value: newValue     
    });    
}

Answer 4

我认为更新缓冲进度条的最佳事件是 timeupdate。每当媒体时间更新时，事件就会被触发。

它提供了缓冲属性，我们可以像这样使用

audio.addEventListener('timeupdate', function () {
    if (this.duration) {
         let range = 0;
         let bf = this.buffered;
         let time = this.currentTime;

         while (!(bf.start(range) <= time && time <= bf.end(range))) {
            range += 1;
         }
         let loadStartPercentage = bf.start(range) / this.duration;
         let loadEndPercentage = bf.end(range) / this.duration;
         let loadPercentage = (loadEndPercentage - loadStartPercentage) * 100;
         //Update your progressbar DOM here
    }
});

该事件的最佳优点是在播放媒体时触发该事件。而当浏览器下载并通知媒体时，会触发进度事件。

所以就像 youtube 一样，缓冲百分比只能在播放媒体时显示

Answer 5

我的答案比所有其他答案都好，因为您想在视频暂停时更新缓冲区进度。这种情况发生在进度事件中。当进度失败时，时间更新事件就会触发，有时也会发生这种情况。

$("#video").on("timeupdate progress", function(){
    var video = document.getElementById("video");
    var vidDur = video.duration;
    for(var i = 0; i <= vidDur; i++){
        var totBuffX = video.buffered.end(i);
        var perBuff = totBuffX/vidDur*100;
        $("#xVidBuffX").css("width", perBuff+"%");
    }
});

你只需要 video.buffered.end(i)。