2011-12-30 1 views
19

Итак, я использую слушательзагружается Расскажите ли видео или нет в Javascript

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

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

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

ответ

32

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

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

+0

Какие браузеры поддерживают это свойство? –

+0

@JaredFarrish В соответствии с этой [Wiki] (http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5_Media%29) поддержка завершена (столбец WebKit пуст, но я был бы удивлен, если бы их реализация была позади в Mozilla/Опера). –

+1

> чем 1 мог бы сделать трюк, если он просто ищет. – Costa

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

0

Я считаю, с помощью 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()