通过完全预加载视频流畅地播放内联 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 codeif (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 秒之间。