Скажите, загружено ли видео в 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

Чтобы превратить это в слушателя, при нормальных обстоятельствах вы захотите прослушать событие приостановки.Он запускается, когда загрузка по какой-либо причине приостановлена ​​или остановлена, включая ее завершение.

Вы также захотите прослушать воспроизведение в тех случаях, когда контент уже загружен (например, из кэша)

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
}