javascript - telefonico - Devoluciones de llamada HTML5<video>?

hipervinculo numero de telefono

Question

Estoy trabajando en un sitio para un cliente y ellos insisten en usar la etiqueta de video de HTML5 como el 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 tienen una duración diferente), atenuarlos y luego fundir una imagen en lugar del video. Piénselo como un póster después del video. el 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 contribución será 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

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

Evento HTML 5 Video activado no encendido

y mira también

Detecta cuando finaliza un video HTML5

Para una solución de propósito general (admite la etiqueta de video con la opción alternativa)

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

Answer 2

Usé 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>

Answer 3

Puede ver una lista completa de eventos en la especificación aquí .

Por ejemplo:

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

Puedes vincular al evento en el elemento como cualquier otra cosa en jQuery ... en cuanto a tu pregunta de comentario, cualquier elemento que estés entregando para IE, sí, necesitaría un manejador separado preparado para cualquier evento que brinde.

Para la otra pregunta sobre el código de tiempo, el evento timeupdate ocurre cuando se está reproduciendo, y el evento durationchange ocurre cuando cambia la duración total. Puede vincularse y usarlos tal como lo mostré con el evento ended arriba. Con timeupdate es probable que desee la propiedad currentTime , con durationchange querrá la propiedad de duration , cada una de las cuales obtiene directamente del objeto DOM, como esta:

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