HTML5 视频 - 加载百分比？

Question

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

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

就像 YouTube 上的红条：

Answer 1

当一些数据被下载时，progress 事件被触发，up to three times per second. 浏览器通过buffered 属性提供可用媒体范围的列表；在 MDN 上的 Media buffering, seeking, and time ranges 上提供了详细指南。

单次加载启动

如果用户没有跳过视频，文件将被加载到一个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

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

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 一样，缓冲百分比只能在媒体播放时显示