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:
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.
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.
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.
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 });
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; ... });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With