Question

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

就像你管视频一样，即使整个视频没有加载，视频也会播放，并向用户提供有关视频已加载多少并留下加载的反馈。

就像YouTube上的红色栏：

enter image description here

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

加载字符串的百分比修复..在#loaded element ...

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

HTML5视频 - 已加载百分比？

4 个答案:

单次加载

多次加载