加載一定量后啟動HTML5視頻

Question

你能告訴我如何加載一定數量的HTML5視頻嗎？ 例如，如果我有一個10秒的視頻，我希望它只在加載至少5秒時啟動。 我如何確定何時發生？

編輯 ：我們假設視頻正在加載，並且它位於.pause()位置而不是.stop()

Answer 1

您可以讀取視頻元素的buffered屬性以查看已加載的時間范圍。 buffered屬性是已加載的時間范圍的集合; 你可以用buffered.start(n)和buffered.end(n)來讀取第n ^個范圍的開始和結束。 由於您對第一個范圍的結束時間感興趣，因此您可以使用videoElm.buffered.end(0)讀取某些視頻videoElm上加載的秒數。

<video>元素觸發progress事件以指示它已加載了一個新的數據塊（因此buffered的某個時間范圍的結束時間正在增加）。

您可以在每次progress事件后檢查加載的緩沖區是否足夠大：

var someVideo = document.getElementById("myVideoId");

someVideo.addEventListener("progress", function playOnLoad(e) {
    var theVideo = e.target;
    if(theVideo.buffered.length > 0 &&    // if we have a buffer
       theVideo.buffered.end(0) >= 5) {   // if first buffer is at least 5 secs
        theVideo.play();
        theVideo.removeEventListener(playOnLoad);
    }
});

如果您真的對視頻是否可以安全播放而不中斷感興趣，則瀏覽器會使用canplaythrough事件。 當瀏覽器預測視頻的加載速率允許它不間斷地播放時，瀏覽器將觸發此事件（但如果加載速率突然改變，它有時可能是錯誤的）。

Answer 2

我不相信這是可能的，因為當視頻准備好播放時，每個瀏覽器都會在幾秒鍾內完成自己的測量，例如瀏覽器控制緩沖區負載。

視頻元素上的preload屬性為您提供某種形式的控制，但不是幾秒鍾而不是跨瀏覽器一致。

查看此頁面上的表格。

我不確定你為什么會控制它。 你唯一應該擔心的是視頻是否可以播放。

this.video.on('canplaythrough', function () {
    this.video[0].play();
}.bind(this));

如果由於某種原因您需要提前捕獲事件，請檢查此頁面以查找其他事件。