HTML5 Video - Percentage Loaded?

The progress event is fired when some data has been downloaded, up to three times per second. The browser provides a list of ranges of available media through the buffered property; a thorough guide to this is available on Media buffering, seeking, and time ranges on MDN.

Single load start

If the user doesn't skip through the video, the file will be loaded in one TimeRange and the buffered property will have one range:

------------------------------------------------------|=============|                                      |------------------------------------------------------0             5                                      21|             \_ this.buffered.end(0)|\_ this.buffered.start(0)

To know how big that range is, read it this way:

video.addEventListener('progress', function() {    var loadedPercentage = this.buffered.end(0) / this.duration;    ...    // suggestion: don't use this, use what's below});

Multiple load starts

If the user changes the playhead position while it's loading, a new request may be triggered. This causes the buffered property to be fragmented:

------------------------------------------------------  |===========|                    |===========|     |------------------------------------------------------  1           5                    15          19    21  |           |                    |            \_ this.buffered.end(1)  |           |                     \_ this.buffered.start(1)  |            \_ this.buffered.end(0)   \_ this.buffered.start(0)

Notice how the number of the buffer changes.

Since it's no longer a contiguous loaded, the "percentage loaded" doesn't make a lot of sense anymore. You want to know what the current TimeRange is and how much of that is loaded. In this example you get where the load bar should start (since it's not 0) and where it should end.

video.addEventListener('progress', function() {    var range = 0;    var bf = this.buffered;    var time = this.currentTime;    while(!(bf.start(range) <= time && time <= bf.end(range))) {        range += 1;    }    var loadStartPercentage = bf.start(range) / this.duration;    var loadEndPercentage = bf.end(range) / this.duration;    var loadPercentage = loadEndPercentage - loadStartPercentage;    ...});

The other awnsers didn't work for me so I started digging into this problem and this is what I came up with. The solutions uses jquery to make an progressbar.

function loaded(){    var v = document.getElementById('videoID');    var r = v.buffered;    var total = v.duration;    var start = r.start(0);    var end = r.end(0);    $("#progressB").progressbar({value: (end/total)*100});      }   $('#videoID').bind('progress', function() {    loaded();});

I hope this helps others as well

Percentage fix for loaded string.. Output something like 99% loaded inside #loaded element...

function loaded() {    var v = document.getElementById('videoID');    var r = v.buffered;    var total = v.duration;    var start = r.start(0);    var end = r.end(0);    var newValue = (end/total)*100;    var loader = newValue.toString().split(".");    $('#loaded').html(loader[0]+' loaded...');    $("#progress").progressbar({        value: newValue         });    }