2011-12-30 4 views
19

Così, ho usato un ascoltatore inDillo se il video è stato caricato o non in Javascript

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

per vedere se è maggiore di 0 per quando di un video caricato oppure no. Questo funziona per un video molto piccolo, e solo in Google Chrome. Non funziona affatto su Firefox. Qualche idea su come farlo funzionare?

In sostanza, voglio aspettare che vengano caricati 3 video separati per eseguire un'azione specifica, come posso fare?

risposta

32

Prova questo:

var video = document.getElementById("video-id-name"); 

if (video.readyState === 4) { 
    // it's loaded 
} 

Leggi qui: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

+0

Quali browser supportano tale proprietà? –

+0

@JaredFarrish Secondo questo [Wiki] (http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5_Media%29), il supporto è completo (la colonna WebKit è vuota, ma sarei sorpreso se la loro implementazione fosse dietro di Mozilla/Opera). –

+1

> di 1 potrebbe fare il trucco se si tratta solo di cercare. – Costa

2

Per fare questo in un ascoltatore, in circostanze normali, ti consigliamo di ascoltare l'evento di sospensione. Viene attivato quando il download viene messo in pausa o interrotto per qualsiasi motivo, incluso il completamento.

Si potrà anche ascoltare giocare per i casi in cui il contenuto è già caricato (come, dalla cache)

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"); 
    } 
}); 

Fonte: https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events

0

Trovo usando setInterval lavora per l'ascolto attivo a quando il readyState dei video di modifiche controllando ogni mezzo secondo fino a quando viene caricato in.

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); 
} 

Se non sei USI ng ES6 è sufficiente sostituire () => con function()