HTML5 <video> callback?

Question

Sto lavorando a un sito per un cliente e insistono sull'utilizzo del tag video HTML5 come metodo di consegna per alcuni dei loro contenuti video. Al momento ho installato e in esecuzione con un piccolo aiuto da http://videojs.com/ per gestire il fallback di Internet Explorer Flash.

Una cosa che mi hanno chiesto di fare è, dopo che i video hanno finito di suonare (sono tutti di lunghezza diversa), svanire e poi sfumare un'immagine al posto del video --- pensateci come una cornice poster dopo il video.

È possibile? Puoi ottenere il codice temporale di un film attualmente in riproduzione tramite Javascript o qualche altro metodo? So che Flowplayer (http://flowplayer.org/demos/scripting/grow.html) ha una funzione onFinish, è la strada che dovrei prendere al posto del metodo video HTML5? Il fatto che gli utenti di IE abbiano un lettore Flash richiede due soluzioni separate?

Qualsiasi input sarebbe molto apprezzato. Attualmente sto usando jQuery sul sito, quindi mi piacerebbe mantenere la soluzione in quel regno se possibile. Grazie!

Answer 1

You can view a complete list of events in the spec here.

Ad esempio:

$("video").bind("ended", function() { 
    alert("I'm done!"); 
}); 

È possibile associare all'evento sull'elemento come qualsiasi altra cosa in jQuery ... come per il tuo commento domanda, qualunque elemento che stai offrendo per IE, sì, sarebbe bisogno di un gestore separato attrezzato per qualsiasi evento che fornisce.

Per l'altra domanda sul codice di tempo, l'evento timeupdate si verifica quando si sta giocando, e l'evento durationchange si verifica quando le variazioni complessive di durata. Puoi legarli e usarli come ho mostrato con l'evento ended qui sopra. Con timeupdate vorrete probabilmente la proprietà currentTime, con durationchange ti consigliamo la proprietà duration, ognuno dei quali si ottiene direttamente fuori l'oggetto DOM, in questo modo:

$("video").bind("durationchange", function() { 
    alert("Current duration is: " + this.duration); 
}); 

Answer 2

C'è un evento OnEnded associato al tag video. Tuttavia, non funziona per me nella versione corrente di Google Chrome.

HTML 5 Video OnEnded Event not Firing

e vedere anche

Detect when an HTML5 video finishes

Per una soluzione general-purpose (supporta tag video con fallback vedere)

http://camendesign.com/code/video_for_everybody o http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library o http://www.mediafront.org/

Answer 3

Ho usato questo codice. In pratica ricarica il video che mostrerà di nuovo il poster. Supponendo che tu voglia che l'immagine alla fine sia la stessa del poster. Ho solo un video sulla pagina, quindi usare il tag video funziona. Ho il mio set di video per la riproduzione automatica al caricamento della pagina, quindi ho aggiunto la pausa dopo la ricarica.

<script type="text/javascript"> 
    var video= $('video')[0]; 
    var videoJ= $('video');   
    videoJ.on('ended',function(){ 
     video.load();  
     video.pause(); 
    }); 
</script>