Shijin Shijin - 6 months ago 20
HTML Question

Find buffered percentage of video element

I need to find buffered percentage of a video from

<video>
element.

I was try to find this using the bellow code,

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


But the value is not correct,If I play the complete video buffered_percentage not resulting at 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

Media Event : progress

Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's buffered attribute.

Code posted by 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>

Output Console :

enter image description here

If you could please add script as below ,it would be great :

    <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>

Output Console : 51.699%

enter image description here

Video Buffering 100% :

enter image description here

Tested on :

enter image description here

Note : Have used another video with some length and size for testing rather that was posted by OP.

Thanks

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.alisonsinfomatics.in/test/files/B.mp4" type="video/mp4">
  
</video>