通过完全预加载视频流畅地播放内联 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 = vid 行上定义；随后在线 document.getElementById("myvideo").src = vid;

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