通过完全预加载视频流畅地播放内联 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 表示浏览器可能会缓存足够的数据，从而无需停止进一步缓冲即可完成播放。

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

  <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

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

Play inline html5 video smoothly by preloading video entirely

javascript

loading

smoothing

html5-video