在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

我发现通过每半秒检查一次,直到它加载setInterval时,使用工作来主动收听readyState视频的变化.

checkforVideo();

function checkforVideo() {
    //Every 500ms, check if the video element has loaded
    var b = setInterval(()=>{
        if(VideoElement.readyState >= 3){
            //This block of code is triggered when the video is loaded

            //your code goes here

            //stop checking every half second
            clearInterval(b);

        }                   
    },500);
}

如果你不使用ES6只需更换() => 与function()

Answer 3

要使其成为侦听器，通常情况下，您需要侦听suspend事件。当出于任何原因暂停或停止下载（包括完成下载）时，都会触发该事件。

您还需要收听播放内容已加载的情况（例如，从缓存中）的情况

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