HTML5视频 - 已加载百分比？

3 回答

• 3

  下载某些数据时会触发 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)
  

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

  由于它不再是连续的加载，"percentage loaded"不再具有很大的意义 . 您想知道当前 TimeRange 是什么以及加载了多少 . 在这个例子中，你得到负载条应该 start （因为它不是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;
      ...
  });
  

  回复于 2024-05-08T20:48:20+08:00
• 83

  其他的发型不适合我，所以我开始深入研究这个问题，这就是我想出来的 . 解决方案使用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();
  }
  );
  

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

  回复于 2024-05-08T20:48:20+08:00
• 5

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

  回复于 2024-05-08T20:48:20+08:00