通過完全預加載視頻，流暢地播放html5視頻

Question

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

我收到錯誤消息，未在video.src = vid行上定義視頻； 然后在行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