HTML5視頻預載解決方案

我正在創建一個帶有一些動畫的網站。其中之一是標誌動畫。它被稱爲'lbv.mp4'。由於它具有一定的權重，自動播放有一定的延遲，所以我決定在滿載時顯示內容。HTML5視頻預載解決方案

的計劃是：

視頻檢查裝載
啓動視頻
一類添加到頁面元素觸發動畫
setTimeout對於視頻的長度這將使剪輯visibility: hidden打開下面的靜態圖像。

這是在下面的代碼更好地描述：

video.addEventListener('loadeddata', function() { 
    if (video.readyState === 4) { 
     video.play(); 
     $('#page').addClass('transition'); 
     document.setTimeout(function(){ 
      video.attr('style', 'visibility: hidden'); 
     }, 750); 
    }

唯一的問題是，我無法得到它的工作既不用純JS，既不用jQuery。視頻沒有加載，沒有給出類。經過Safari，Chrome和Firefox測試。

所以最後一個問題是：'是否有另一個讓它更容易，或者如何解決我的解決方案？

來源

2016-09-21 MaxelRus

我不明白你正在嘗試做的。當你的視頻被完全加載時，你會隱藏它？ – codename44

@ codename44在我的視頻加載後，它會在0.75秒延遲後播放並隱藏。 – MaxelRus

loadeddata事件手段：

媒體的第一幀完成加載。

readyState === 4表示：

足夠的數據是可用的和下載速率足夠高，使媒體能夠通過播放到結束沒有中斷。

您有機會觸發loadeddata，但readyState不是4。由於loadeddata只觸發一次，視頻將永遠不會播放。

您應該嘗試添加日誌以驗證此假設。

我會嘗試如下：

使用<video>與autoplay
監聽playing事件上的視頻，開始過渡
監聽ended事件上的視頻將其隱藏

參考屬性，事件和readyState：

來源

2016-09-21 14:11:37 codename44

HTML5視頻預載解決方案

回答

相關問題