HTML5 <video> devoluciones de llamada?

Question

Estoy trabajando en un sitio para un cliente y ellos insisten en usar la etiqueta de video de HTML5 como método de entrega para algunos de sus contenidos de video. Actualmente lo tengo en funcionamiento con un poco de ayuda de http://videojs.com/ para manejar el respaldo de Internet Explorer Flash.

Una cosa que me han pedido que haga es, después de que los videos terminen de reproducirse (todos son de diferente duración), atenuarlos y luego fundir una imagen en lugar del video --- piense en ello un póster después del video.

¿Esto es posible? ¿Puedes obtener el código de tiempo de una película que se está reproduciendo actualmente a través de Javascript o algún otro método? Sé que Flowplayer (http://flowplayer.org/demos/scripting/grow.html) tiene una función onFinish, ¿esa es la ruta que debería tomar en lugar del método de video HTML5? ¿El hecho de que los usuarios de IE obtengan un reproductor Flash requiere dos soluciones separadas?

Cualquier entrada sería muy apreciada. Actualmente estoy usando jQuery en el sitio, por lo que me gustaría mantener la solución en ese ámbito, si es posible. ¡Gracias!

Answer 1

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

Por ejemplo:

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

Puede unirse al evento en el elemento como cualquier otra cosa en jQuery ... en cuanto a su pregunta comentario, cualquier elemento que se está entregando para IE, sí, que lo haría necesita un manejador separado preparado para cualquier evento que proporcione.

Para la otra pregunta sobre el código de tiempo, el evento timeupdate se produce cuando se está reproduciendo y el evento durationchange se produce cuando cambia la duración total. Puede enlazar y usarlos tal como lo mostré con el evento ended anterior. Con timeupdate es probable que desee la propiedad currentTime, con durationchange querrá la propiedad duration, cada uno de los cuales se obtiene directamente desde el objeto DOM, así:

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

Answer 2

Hay un evento OnEnded asociado con la etiqueta de video. Sin embargo, no funciona para mí en la versión actual de Google Chrome.

HTML 5 Video OnEnded Event not Firing

y ver también

Detect when an HTML5 video finishes

Para una solución de propósito general (soportes etiqueta de vídeo con fallback ver)

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

He utilizado este código. Básicamente vuelve a cargar el video que hará que el póster vuelva a mostrarse. Suponiendo que desea que la imagen al final sea la misma que el póster. Solo tengo un video en la página, así que usar la etiqueta de video funciona. Tengo mi video configurado para reproducir automáticamente al cargar la página, así que agregué la pausa después de la recarga.

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