Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Video - Percentage Loaded?

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" bar that's width represents this figure. Just like You Tube or any other video player.

So just like you tube a video will play even if the whole video hasn't loaded and give the user feedback on how much of the video has loaded and is left to load.

Just like the Red Bar on YouTube:

enter image description here

like image 276
wilsonpage Avatar asked Feb 17 '11 13:02

wilsonpage


People also ask

Does HTML5 support video?

The HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24.

Can MP4 play on HTML5?

Yes, with our WordPress gallery plugin Wonder Gallery, you only need to provide one mp4 format to play in all web browsers and devices. In iPhone, iPad, Android, Chrome, Safari, Firefox, Opera, IE 10 and above, the gallery plugin will use HTML5 to play the mp4 video.


1 Answers

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;     ... }); 
like image 122
Yann L. Avatar answered Sep 21 '22 05:09

Yann L.