HTML5 Video - Percentage Loaded?

Question

Does anyone know what event or property I need to query in order to get a percentage figure of the amount an HTML5 video has loaded? I want to draw a CSS styled \"loaded\" b

Answer 1

I think best event to update the buffered progress bar is timeupdate. whenever time of the media is updated event is fired.

It gives buffered property which we can use like this

audio.addEventListener('timeupdate', function () {
    if (this.duration) {
         let range = 0;
         let bf = this.buffered;
         let time = this.currentTime;

         while (!(bf.start(range) <= time && time <= bf.end(range))) {
            range += 1;
         }
         let loadStartPercentage = bf.start(range) / this.duration;
         let loadEndPercentage = bf.end(range) / this.duration;
         let loadPercentage = (loadEndPercentage - loadStartPercentage) * 100;
         //Update your progressbar DOM here
    }
});

Best advantage of this event is this is fired when media is played. Whereas progress event is fired when media is downloaded and notified by browser.

So just like youtube, buffered percentage can only be shown when media is played