通过完全预加载视频，流畅地播放html5视频

Question

我有一个45秒的视频，可以将其压缩到4个月。我希望该视频能够流畅且自动播放，但只要存在海报图像，就不需要快速启动。 因此，一旦完全加载，它应该会自动播放。 我找到了这段JavaScript代码，但出现错误，我不明白为什么。

<div class="video-container">
<video id="myvideo" controls autoplay muted poster="image.jpg" playsinline style="width: 100% !important;">
</video> </div>

<script type="text/javascript">
      var req = new XMLHttpRequest();
req.open('GET', 'example.com/wp-content/uploads/2019/07/video.mp4', true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if (this.status === 200) {
  var videoBlob = this.response;
  var vid = URL.createObjectURL(videoBlob); // IE10+
  // Video is now downloaded
  // and we can set it as source on the video element
  video.src = vid;
}
}
req.onerror = function() {
// Error
}
req.send();
document.getElementById("myvideo").src = vid; 
</script>

我收到错误消息，未在video.src = vid行上定义视频； 然后在行document.getElementById（“ myvideo”）。src = vid;

在控制台中，视频已正确充电到页面上，上传时间为1到3秒。

Answer 1

有多种方法可以实现流畅的播放，我运气好的方法是

    <video id="video" preload="auto" src="file.mp4" controls></video>

将preload属性设置为auto表示浏览器可以缓存足够的数据，从而可以完成播放而无需停止进一步的缓冲。

上面的示例仅预加载了几秒钟，因此视频可以流畅播放而不会停止缓冲，如果您想在回放之前预加载整个视频，可以参考此示例片段

  <video id="video" controls></video>

  <script>
    // Later on, after some condition has been met, set video source to the
    // preloaded video URL.
    video.src = 'https://cdn.com/small-file.mp4';
    video.play().then(_ => {
    // If preloaded video URL was already cached, playback started 
    //immediately.
     });
    </script>

来源： https : //developers.google.com/web/fundamentals/media/fast-playback-with-video-preload