通过完全预加载视频流畅播放内嵌 html5 视频

Question

我有一个 45 秒的视频，我可以将其压缩为 4 Mo。我希望视频能够流畅地播放并具有自动播放功能，但只要存在海报图片就不需要快速启动。因此，一旦它完全加载，它应该会自动播放。 我找到了这段 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 = 视频； 并随后上线 document.getElementById("myvideo").src = vid;

在控制台中，视频已正确计入页面，上传时间在 1 到 3 秒之间。

Answer 1

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

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

将 preload 属性设置为 auto 表示浏览器可以缓存足够的数据，以便在不需要停止进一步缓冲的情况下完成播放。

上面的例子只预加载了几秒钟，这样视频就可以流畅播放而不会停止缓冲，如果你想在播放前预加载整个视频，你可以参考这个例子 sn-p

  <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