Find buffered percentage of video element

Question

I need to find buffered percentage of a video from <video> element.

I was trying to find this using the below 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 1

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 :

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%

Video Buffering 100% :

Tested on :

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