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 plete 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=".mp4" type="video/mp4">
    <source src=".ogg" type="video/ogg">
      Your browser does not support HTML5 video.
</video>

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 plete 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./tags/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools./tags/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
</video>

• javascript
• html

• I am not able to see anything in the console. Are you sure the event is triggering? – Rajaprabhu Aravindasamy Commented May 13, 2016 at 5:20
• @RajaprabhuAravindasamy I am also wondering ,There is nothing in the console while it buffered – Shijin TR Commented May 13, 2016 at 5:21
• I think this may help you. And this question seems like a dupe of that. – Rajaprabhu Aravindasamy Commented May 13, 2016 at 5:25
• @RajaprabhuAravindasamy But i am using latest chromium build Version 49.0.2623.108 Ubuntu 14.04 (64-bit) .I think it is something wrong in my code – Shijin TR Commented May 13, 2016 at 5:59

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