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

我有一个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>

var req=新的XMLHttpRequest（）；
请求打开（'GET'，'example.com/wp content/uploads/2019/07/video.mp4'，true）；
req.responseType='blob'；
req.onload=函数（）{
//即使在404上也会触发Onload
//所以我们需要检查状态码
如果（this.status==200）{
var videoBlob=this.response；
var vid=URL.createObjectURL（videoBlob）；//IE10+
//视频现已下载
//我们可以将其设置为视频元素的源
video.src=vid；
}
}
req.onerror=函数（）{
//错误
}
请求发送（）；
document.getElementById（“myvideo”）.src=vid；

我得到一个错误，视频没有在线路上定义 video.src=vid； 然后就上线了 document.getElementById（“myvideo”）.src=vid

---

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

有不同的方法可以实现平滑（er）播放，我的运气是

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

将“预加载”属性设置为“自动”表示浏览器可以缓存足够的数据，以便在不需要停止进一步缓冲的情况下完成播放

上面的示例仅预加载几秒钟，这样视频就可以在不停止缓冲的情况下平稳播放，如果您想在播放之前预加载整个视频，可以参考此示例片段

  <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>

//稍后，在满足某些条件后，将视频源设置为
//预加载的视频URL。
video.src=https://cdn.com/small-file.mp4';
video.play（）。然后（=>{
//如果已缓存预加载的视频URL，则开始播放
//马上。
});

---

来源：

有不同的方法来实现平滑（er）播放，我很幸运的方法是

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

将“预加载”属性设置为“自动”表示浏览器可以缓存足够的数据，以便在不需要停止进一步缓冲的情况下完成播放

上面的示例仅预加载几秒钟，这样视频就可以在不停止缓冲的情况下平稳播放，如果您想在播放之前预加载整个视频，可以参考此示例片段

  <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>

//稍后，在满足某些条件后，将视频源设置为
//预加载的视频URL。
video.src=https://cdn.com/small-file.mp4';
video.play（）。然后（=>{
//如果已缓存预加载的视频URL，则开始播放
//马上。
});

---

来源：

看看。。。应该解决你的问题这段代码确实有效，所以谢谢，没有更多的错误，不幸的是视频仍然是断断续续的，特别是在Firefox Maccan中，你能分享到示例视频的链接吗。。。可能是编码问题，而不是加载链接：它是用H264FWIW编码的，不管你在做什么，我现在在macOS上的Firefox中看起来都不错。建议（如果您还没有这样做）将MOOV atom重新定位到文件的开头，以帮助查找查看。。。应该解决你的问题这段代码确实有效，所以谢谢，没有更多的错误，不幸的是视频仍然是断断续续的，特别是在Firefox Maccan中，你能分享到示例视频的链接吗。。。可能是编码问题，而不是加载链接：它是用H264FWIW编码的，不管你在做什么，我现在在macOS上的Firefox中看起来都不错。我建议（如果你还没有这样做的话）将MOOV atom重新定位到文件的开头，以帮助查找。我也使用第二种方法预加载整个视频，获得了很好的效果。在Windows Chrome、Edge、Opera和Firefox上，视频播放流畅。在MacOs Safari上，第二次可以正确播放，Chrome还可以，我唯一的问题是Firefox。正如在你的资料中所指出的，我在视频通话前添加了这一行，通过第二种方法预装整个视频，我也得到了很好的效果。在Windows Chrome、Edge、Opera和Firefox上，视频播放流畅。在MacOs Safari上，第二次可以正确播放，Chrome还可以，我唯一的问题是Firefox。如你的资料所示，我在视频通话前添加了这一行