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;
    ...
});

其他 awnsers 对我不起作用，所以我开始深入研究这个问题，这就是我想出的。解决方案使用 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();
}
);

我希望这也能帮助其他人

已加载字符串的百分比修复.. 在 #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     
    });    
}

我认为更新缓冲进度条的最佳事件是 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一样，缓冲的百分比只能在播放媒体时显示