2012-04-16 39 views
5

¿Existe alguna técnica directa para reproducir solo una parte determinada de un video HTML5? Por ejemplo, en un clip de 30 segundos me gustaría tocar solo la parte 5-20 segundos. Además, el resto del video no debe poder accederse desde la interfaz de usuario en absoluto (lo que significa que la línea de tiempo del video solo debe mostrar la parte de 5-20 segundos).video HTML5: reproducir solo una parte de un video

He estado revisando algunos reproductores de video HTML5, pero ninguno de ellos parece ser compatible con este tipo de funcionalidad. Si alguien conoce una (buena) manera de implementar esta característica, por favor dame una pista.

¡Gracias de antemano!

+0

Hice algunos experimentos con el reproductor de VideoJS (http://videojs.com/) y logré que funcionara al menos en computadoras de escritorio, dispositivos Android y iPads. – calle

+0

Básicamente tuve que anular algunas de las funciones del reproductor original para renderizar los controles correctamente y jugar con el evento 'timeupdate' de los videos para limitar el tiempo de reproducción del video. Debo estar de acuerdo con @Riplikash en que actualmente la única forma decente de lograr el comportamiento de juego parcial es servir el contenido jugable del servidor y no tratar de restringirlo desde el lado del cliente. – calle

Respuesta

1

Aunque esta pregunta ya ha sido marcada como respondida, aquí hay algo que puede interesarle a usted y a cualquier otra persona que se encuentre aquí: Specifying playback range.

Es parte del Media Fragment API y actualmente funciona en las últimas versiones de Firefox, Chrome y Safari 6+.

+0

Esta respuesta es útil que la marcada como correcta. Gracias @Ian Devlin –

+0

Ese enlace ya no es válido, no hay información allí con respecto a la especificación del rango de reproducción. – prendio2

0

Puede implementarlo hay un evento Player.Play() en un jugador, siempre que Play() llame a un temporizador y llame al Player.stop() en el momento específico que desee.

0

que tiene el mismo problema y yo no encontraron algo que se soluciona este problema, lo que puede hacer es poner en práctica sus propios controles y mostrar el vídeo con un lienzo ...

y si estás tratando de implementar esto en iOS no podrás hacerlo.

+0

Con javascript, puede jugar el tiempo parcial que desee, pero la IU mostrará el tiempo real, puede ocultar los controles originales pero el usuario podría mostrarlos con "clic derecho" -> "mostrar controles "La forma más cercana que encontré fue usar un reproductor que puede mostrar un tiempo parcial, era JWPlayer, puede mostrar una duración" falsa "pero la hora de inicio es siempre 0 incluso cuando puedes comenzar en otro punto ... –

+0

pero en iOS no funciona ... –

0

Mi idea sería usar controles personalizados, ya que no creo que la funcionalidad esté disponible de forma nativa. Toda la funcionalidad de los controles html5 (play, pause, start at timestamp, etc.) se puede invocar a través de javascript. En este caso, querrá editar la variable CurrentTime.

Por lo que es posible que desee considerar la configuración de su propio control deslizante, donde el inicio del control deslizante representa su punto de inicio y el final de su punto final. Configura el video para que no se reproduzca en la carga de la página. Luego, en la carga de la página, tenga una función javascript que cambie el tiempo actual a su punto de inicio. Para detenerse, ocasionalmente podría consultar el tiempo actual. No utilizaría un temporizador, ya que los retrasos, como la carga lenta, podrían tirarlo.

+0

No podrá limitar totalmente a los usuarios a ver otras partes del video a través de video HTML5. Es algo así como la etiqueta . Es muy abierto. Debería limitar qué partes del video se publicarán en el servidor. – Riplikash

+0

¿Quieres un fragmento de código que funcione? –

0

Estoy tratando de implementar un video similar en "Modo de vista previa". Estoy utilizando los métodos indicados anteriormente agregando un oyente de evento y luego pausando el video en una posición de CurrentTime() == 'x'. Para evitar que el usuario simplemente toque de nuevo la reproducción, el oyente CurrentTime no permitirá la reproducción más allá de la "x" vez en la línea de tiempo, de modo que cada vez que el usuario toque reproducir, se pausará automáticamente al instante de nuevo. Además, en el momento 'x', el contenedor de video se ocultará a través de CSS, lo que impedirá la interacción del usuario con el video.