HTML5视频 - 已加载百分比？

Question

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

因此,就像你管视频一样,即使整个视频没有加载也会播放,并向用户提供有关已加载视频的数量并留下加载的反馈.

就像YouTube上的红酒吧:

Answer 1

progress下载某些数据时会触发该事件,最多每秒三次.浏览器通过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();
}
);

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