如何从特定时间开始预加载HTML5视频

Question

谁能告诉我如何从特定时间开始预加载HTML5视频？

例如，我希望播放器从（00:15）开始预加载。 我知道我们可以使用preload属性从当前位置开始预加载，但是如果我希望我的播放器从某个时间开始预加载视频，该怎么办。

Answer 1

您可以从仅加载元数据开始，然后在完成后将currentTime设置为00:15，然后将preload属性设置为auto。

为了确保数据开始加载，您可以触发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>