Question

有人可以告诉我如何从特定时间开始预装HTML5视频吗？

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

Answer 1

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

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

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

1 个答案: