如何從特定時間開始預加載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>