Menu
Where I can read information and see examples of loading chunks into html5 video?
Scenario:
1. User starts play a large video.
2. 10-20 seconds of the video should be downloaded.
3. If user watches first 10 seconds then next 10 seconds should be downloaded. Thus, there will be no load if the user looks only the first 9 seconds of video.
If we use this scenario it will reduce server load (in some cases).
For example:
Try to watch video on YouTube. They work like this. Try to load half video (~3 mins) and start watch it from beginning. Other part of video will not be downloaded until you reach special point (~ 50 seconds before the downloads point, in my case).
I can't find any controls of buffering in html5 video. Also I can't find any controls of buffering in popular html5 based video players like VideoJs, JPlayer.
Does somebody know how to do it?
612
I can't find any controls of buffering in html5 video.
The .buffered property of the HTMLMediaElement interface, and the TimeRanges object which you can get back from that, don’t give you direct control over buffering, but can give you some control over the user experience at least. For a simple case that uses them, here’s some sample code:
<!doctype html>
<html>
<head>
<title>JavaScript Progress Monitor</title>
<script type="text/javascript">
function getPercentProg() {
var myVideo = document.getElementsByTagName('video')[0];
var endBuf = myVideo.buffered.end(0);
var soFar = parseInt(((endBuf / myVideo.duration) * 100));
document.getElementById("loadStatus").innerHTML = soFar + '%';
}
function myAutoPlay() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.play();
}
function addMyListeners(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('progress', getPercentProg, false);
myVideo.addEventListener('canplaythrough', myAutoPlay, false);
}
</script>
</head>
<body onload="addMyListeners()">
<div>
<video controls
src="http://homepage.mac.com/qt4web/sunrisemeditations/myMovie.m4v">
</video>
<p id="loadStatus">MOVIE LOADING...</p>
</div>
</body>
</html>
That code is from a detailed Controlling Media with JavaScript guide over at the Safari Developer site. There’s also another good Media buffering, seeking, and time ranges how-to over at MDN.
If you really want more direct control over buffering, you need to do some work on the server side and use the MediaSource and SourceBuffer interfaces.
Appending .webm video chunks using the Media Source API is a good demo; code snippet:
var ms = new MediaSource();
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(ms);
ms.addEventListener('sourceopen', function(e) {
...
var sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
sourceBuffer.appendBuffer(oneVideoWebMChunk);
....
}, false);
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
