HTML5 callbacks?

Sto lavorando su 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 — pensarlo come un fotogramma poster dopo il video.

È ansible? 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 ansible. Grazie!

Qui puoi vedere un elenco completo di eventi nelle specifiche .

Per esempio:

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

Puoi associare l’evento all’elemento come qualsiasi altra cosa in jQuery … come per la tua domanda di commento, qualunque elemento tu stia offrendo per IE, sì, avrebbe bisogno di un gestore separato attrezzato per qualsiasi evento esso fornisca.

Per l’altra domanda sul codice di tempo, l’evento timeupdate si verifica durante la riproduzione e l’evento durationchange si verifica quando la durata complessiva cambia. Puoi legarli e usarli come ho mostrato con l’evento ended sopra. Con timeupdate probabilmente vorrai la proprietà currentTime , con durationchange vorrai la proprietà duration , ognuna delle quali si ottiene direttamente dall’object DOM, in questo modo:

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

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

HTML 5 Video OnEnded Evento non triggersto

e vedi anche

Rileva quando termina un video HTML5

Per una soluzione generica (supporta il tag video con fallback vedi)

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

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.