Javascript HTML5视频-加载百分比？

有人知道我需要查询什么事件或属性才能获得HTML5视频加载量的百分比吗？我想画一个CSS样式的“加载”条，它的宽度代表这个数字。就像你的电子管或任何其他视频播放器一样

所以就像你管一个视频将播放，即使整个视频还没有加载，并给用户反馈多少视频已加载，并留下来加载

就像YouTube上的红色条：

---

下载某些数据后会触发

进度

事件，浏览器通过

缓冲

属性提供可用媒体范围的列表；MDN上提供了这方面的详细指南

单负载启动 如果用户没有跳过视频，文件将加载到一个

时间范围

，而

缓冲

属性将有一个范围：

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

多负载启动 如果用户在加载时更改播放头的位置，可能会触发新的请求。这会导致

缓冲的

属性碎片化：

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

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

因为它不再是连续加载的，所以“加载百分比”不再有什么意义。您想知道当前的

时间范围是什么以及加载了多少。在本例中，您将看到加载条应该从哪里开始（因为它不是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;
    ...
});

video.addEventListener（'progress'，function（）{
var范围=0；
var bf=这是缓冲的；
var time=此.currentTime；
而（！（bf.start（range）其他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();
}
);

我希望这对其他人也有帮助
加载字符串的百分比修复..输出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
    }
});

audio.addEventListener（'timeupdate'，函数（）{
如果（这个持续时间）{
设范围=0；
设bf=this.buffered；
让时间=这个。当前时间；
同时（！（bf.启动（范围）我很确定YouTube播放器是Flash，而不是HTML5。你是在要求使用HTML5视频的类似解决方案吗？是的，你的tube是Flash。我是在要求从HTML5视频中获取回调数据，以使我能够向我的用户表示此信息。@evan，pagewil:YouTube的HTML5实现正在测试中……我使用它……我想你有误解了meI必须执行
video.buffered.end（0）
（注意：未包装在jQuery中）。您也可以在事件中使用
此
，而不是选择视频元素。我认为它更舒适，速度更快。不错，但是
$（'video'）。获取（0）
part错误。1.当绑定在集合上时，它仅从所有视频中选择第一个元素。2.您应该使用
eq（0）
而不是
get（0）
来获取元素本身。3.您应该在事件内部使用
this
而不是
get（）
或
eq（）
@Sumit我现在修复了这些示例我如何让视频播放器在暂停时下载数据？