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

要使其成为听众，在正常情况下，您将要收听暂停事件。当下载因任何原因暂停或停止时触发，包括它已完成。

当内容已经加载时（例如，来自缓存），您还希望收听播放案例

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 4

var video = document.getElementById("video");
video.onloadeddata = function() {
    // video is loaded
}

在Javascript中判断视频是否已加载

4 个答案: