获取 "buffered.end(0)" 的最后一个索引？

Question

以下代码告诉我视频已加载多远。 returned 值以百分比表示：

//Tell JS what video to look for
v = document.getElementById("my-video-id");

//[...]Functions that triggers debuglog() every second at the right time[...]

function debuglog(){
loadedpercentage=v.buffered.end(0) / v.duration * 100;
//A.K.A
//Video s loaded content, in seconds
//Divided by:
//Total video time, in seconds
//Multiplied by 100.
console.log(loadedpercentage);//Returns loaded percentage! Eg: 5.382738332.
}

因此，如您所见，此函数每次触发时都会 return 到目前为止视频的加载百分比。

只有一个问题：

当用户暂停并播放视频时，会创建一个新缓冲区，这意味着我们无法再使用v.buffered.end(0)。我们现在必须使用 v.buffered.end(1).

我知道，我可以告诉 play/pause 操作，例如，将新的缓冲区编号传递给 buffered.end。我只是想知道是否可以简单地将 javascript 告诉 "use the last one"、"use the last buffer"。我正在考虑这样的事情，也许吧？

v.buffered.end(this.lastbuffer);

解决此问题的最佳方法是什么？

再次感谢，非常感谢！

== 编辑 ==

非常感谢@Kaiido 的回答和解释！

以下是如何获取可用于 buffered.end 的最后一个缓冲区：

v = document.getElementById("video");//Your video ID
console.log(v.buffered.end(v.buffered.length-1));

以上代码在控制台中以秒为单位输出所需的值。

请参阅此 post 下的已批准答案，以进一步解释如何获得真实加载百分比。

干杯:)

Answer 1

有个length property on the TimeRanges returned by HTMLMediaElement.buffered:

vid.onseeked = e => {
  console.log(vid.buffered.length);
}

video{height: 200px;margin-bottom:100vh}

<video id="vid" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"></video>

随便用。

但请注意，您在这里测量的不是加载百分比本身。为此，您需要遍历所有 TimeRanges 并获取它们的长度，然后计算这个整体相对于总长度的比率：

vid.onseeked = e => {
  const buffers = vid.buffered;
  let buffered = 0;
  for(let i = 0; i<buffers.length; i++) {
    buffered += buffers.end(i) - buffers.start(i);
  }
  console.log((buffered / vid.duration) * 100, '%');
}

video{height: 200px;margin-bottom:100vh}

<video id="vid" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"></video>

Answer 2

我认为以下内容可行。让我知道。

//<!CDATA[
/* js/external.js */
var doc, bod, I; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
  return doc.getElementById(id);
}
var vid = I('vid'), prog = I('prog'), loaded = I('loaded'), progI;
vid.onloadedmetadata = function(){
  var n = 0, d = this.duration;
  progI = setInterval(function(){
    if(n < d){
      n = 0;
      for(var i=0,b=vid.buffered,p,l=b.length; i<l; i++){
        n += (b.end(i)-b.start(i))/d;
      }
      p = Math.round(n*100);
      if(p === 100)n = d;
      prog.value = p; loaded.innerHTML = p+'&#037;';
    }
    else{
      clearInterval(progI); progI = undefined;
    }
  }, 500);
}
vid.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px; text-align:center;
}
#vid,#prog{
  display:block; width:400px; margin:0 auto;
}
#vid{
  height:220px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    <video id='vid' type='video/mp4' controls='controls'></video>
    <progress id='prog' value='0' max='100'></progress>
    <div id='loaded'>0&#037;</div>
  </div>
</body>
</html>

获取 "buffered.end(0)" 的最后一个索引？

Get last index of "buffered.end(0)"?

javascript

html5-video