查找视频元素的缓冲百分比

Question

我需要从<video>元素中找到视频的缓冲百分比.

我试图使用下面的代码找到这个,

videoElement.addEventListener("progress", bufferHandler);
var bufferHandler = function(e) {
    var buffered = e.target.buffered.end(0);
    var duration = e.target.duration;
    var buffered_percentage = (buffered / duration) * 100;
    console.log(buffered_percentage);
}

但价值不正确,如果我播放完整的视频buffered_percentage而不是100%.

var videoElement = document.getElementById("myVideo");
videoElement.addEventListener("progress", bufferHandler);
var bufferHandler = function(e) {
  var buffered = e.target.buffered.end(0);
  var duration = e.target.duration;
  var buffered_percentage = (buffered / duration) * 100;
  console.log(buffered_percentage);
}

<video id="myVideo" width="320" height="176" controls>
  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
</video>

Answer 1

媒体活动:progress

定期发送以通知感兴趣的各方下载媒体的进度.媒体元素的缓冲属性中提供了有关当前已下载媒体数量的信息.

OP发布的代码:

    <script>
var videoElement = document.getElementById("myVideo");
videoElement.addEventListener("progress", bufferHandler);
var bufferHandler = function(e) 
{
  var buffered = e.target.buffered.end(0);
  var duration = e.target.duration;
  var buffered_percentage = (buffered / duration) * 100;
  console.log(buffered_percentage);
}
    </script>

输出控制台:

如果你可以请添加script如下,这将是伟大的:

    <script>

var videoElement = document.getElementById("myVideo");
videoElement.addEventListener("progress", bufferHandler);
function bufferHandler(e)
 {
if (videoElement && videoElement.buffered && videoElement.buffered.length > 0 && videoElement.buffered.end && videoElement.duration)
 {

  var buffered = e.target.buffered.end(0);
  var duration = e.target.duration;
  var buffered_percentage = (buffered / duration) * 100;
  console.log(buffered_percentage);
  }
}


    </script>

输出控制台:51.699%

视频缓冲100%:

测试:

注意:使用了另一个具有一定长度和大小的视频进行测试,而不是由OP发布.

谢谢

var videoElement = document.getElementById("myVideo");
videoElement.addEventListener("progress", bufferHandler);
function bufferHandler(e)
 {
if (videoElement && videoElement.buffered && videoElement.buffered.length > 0 && videoElement.buffered.end && videoElement.duration)
 {
  
  var buffered = e.target.buffered.end(0);
  var duration = e.target.duration;
  var buffered_percentage = (buffered / duration) * 100;
  console.log(buffered_percentage);
  }
}

<video id="myVideo" controls="controls">
  <source src="http://client.99nfomatics.in/test/files/B.mp4" type="video/mp4">
  
</video>