How to start preloading HTML5 video from a certain time

Question

Can anyone please tell me how to start preloading HTML5 video from a certain time??

For example I want my player to start preloading from (00:15). I know we can use preload attribute to start preloading from the current position but what if I want my player to preload the video from a certain time.

Answer 1

You can start by loading only the metadata, then, once it is done set the currentTime to 00:15 and then set the preload attribute to auto.

Just to be sure the data starts to load, you can trigger video.play(); video.pause() video.play(); video.pause() .

 var vid = document.querySelector('video'); vid.onloadstart = function() { log('loadstart at ' + this.currentTime); }; vid.onloadedmetadata = function() { log('loadedmetadata at ' + this.currentTime); vid.currentTime = 15; vid.setAttribute('preload', "auto"); vid.play(); vid.pause(); }; vid.onloadeddata = function() { log('loadeddata at ' + this.currentTime); }; function log(data) { document.querySelector('#log').innerHTML += '<p>' + data + '</p>'; } 

 #log { position: fixed; bottom: 0; right: 1em; color: #FFF; background-color: rgba(0, 0, 0, .5) } 

 <video controls="true" preload="metadata" height="170"> <source type="video/ogg" src="http://media.w3.org/2010/05/bunny/movie.ogv"> <source type="video/mp4" src="http://media.w3.org/2010/05/bunny/movie.mp4"> </video> <div id="log"></div>