視頻告訴是否加載與否在Javascript

Question

所以，我一直在使用上

document.getElementById("video").buffered.length 

一個監聽器，看它是否大於0何時加載或沒有視頻的。這適用於非常小的視頻，僅適用於Google Chrome。它根本不適用於Firefox。任何想法如何讓這個工作？

我基本上要等到3個獨立的視頻被加載到採取具體行動，我怎麼去呢？

Answer 1

試試這個：

var video = document.getElementById("video-id-name"); 

if (video.readyState === 4) { 
    // it's loaded 
} 

這裏閱讀：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

Answer 2

爲了使這成爲一個傾聽者，在正常情況下，你要聽掛起事件。當下載由於任何原因暫停或停止時（包括完成），它會被觸發。

您也想聽聽打的情況下，當內容已經被加載（如，從高速緩存）

video.addEventListener("playing", function() { 
    console.log("[Playing] loading of video"); 
    if (video.readyState == 4) { 
     console.log("[Finished] loading of video"); 
    } 
}); 
video.addEventListener("suspend", function(e) { 
    console.log("[Suspended] loading of video"); 
    if (video.readyState == 4) { 
     console.log("[Finished] loading of video"); 
    } 
}); 

來源：https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

Answer 3

我發現使用的setInterval工程積極聽取到時readyState的，直到它加載在檢查每半秒的視頻變化。

checkforVideo(); 

function checkforVideo() { 
    var b = setInterval(()=>{ 
     if(VideoElement.readyState >= 3){ 

      \\do whatever you want done here 

      \\you can now clearInterval (stop checking every half second) 
      clearInterval(b); 
     }     
    },500); 
} 

如果你不USI NG ES6只需更換() =>與function()