Скажите, загружено ли видео или нет в Javascript

Итак, я использовал слушателя на 

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

чтобы увидеть, если это больше, чем 0 для того, когда видео загружено или нет. Это работает для очень небольшого видео, и только в Google Chrome. Он вообще не работает в Firefox. Есть идеи, как заставить это работать?

Я по существу хочу подождать, пока не загрузятся 3 отдельных видео, чтобы предпринять определенное действие, как мне это сделать?

22
html5 javascript loaded video

4 ответов

попробуйте это:

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

33

использование setInterval работает для активного прослушивания, когда readyState видео изменяется, проверяя каждые полсекунды, пока оно не загрузится.

checkforVideo();

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

            \do whatever you want done here

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

        }                   
    },500);
}

если вы не используете ES6, просто замените () => С function()

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

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