Reproducción de video HTML5 hacia atrás en iOS

Question

Estoy tratando de reproducir un video HTML5 en reversa en un iPad (El video debe cambiar entre avanzar y retroceder arbitrariamente según la entrada del usuario).

El <video> elemento HTML5 incluye una propiedad denominada playbackRate cual permite que el vídeo se reproducirá a un ritmo más rápido o más lento, o al revés. De acuerdo con Apple's documentation, esta propiedad no es compatible con iOS.

Reproducir en reversa se puede fingir sin el uso de playbackRate configurando la propiedad currentTime varias veces por segundo (por ejemplo, 10-30 actualizaciones por segundo). Este enfoque funciona en Safari de escritorio, pero parece que la búsqueda está limitada a dispositivos iOS a alrededor de 1 actualización por segundo, demasiado lento en mi caso.

¿Hay alguna forma de reproducir un video HTML5 hacia atrás en un dispositivo iOS (es decir, un iPad)?

(estoy probando en un iPad 2 corriendo 4.3.1)

Answer 1

El atributo playbackRate ahora es compatible con iOS 6 Safari.

Answer 2

Como sugirió Mihai, utilizar las dos versiones y actualizaciones de la ubicación buscan cuando el usuario cambia la dirección de reproducción.

Ponga los videos en DIV uno encima del otro, y cuando la dirección de reproducción se invierte, alternar la visibilidad div (y pausar la reproducción de la que se está ocultando).

Así que esta es la línea de tiempo:

1. usuario hace clic alternar la reproducción.
2. Detener el video mostrado.
3. Obtener la ubicación de búsqueda del video mostrado.
4. Reste ese valor de la duración del video.
5. Busque este valor en el video no mostrado.
6. Mostrar video DIVs.
7. Comienza la reproducción del video recién visualizado.

Answer 3

Mi sugerencia es hacer un reproductor de video "falso" en su código HTML. Luego capture el intento del usuario de "reproducir" el video utilizando los métodos de devolución de llamada safari/ios. Luego, cree un MPMoviePlayerController que realmente cargue el video y lo muestre sobre la posición original del video en el navegador o solo admita la reproducción en pantalla completa. El protocolo MPMediaPlayback admite la reproducción inversa a través de la propiedad actualPlaybackRate, así que con suerte, esto debería ser una solución temporal, ya que no puedo ver que la versión iOS de Safari no implemente esta función ya que es compatible con el reproductor nativo.

Answer 4

¿Por qué no unir las versiones hacia adelante y hacia atrás en una sola película?

Esto elimina el problema de descarga y carga de video cuando el usuario cambia de dirección. Con un enfoque de película única, cuando el usuario cambia de dirección, todo lo que necesita hacer es descubrir el punto correspondiente en la otra mitad de la película y buscar allí.

Answer 5

NOTA: yo era estúpida y se perdió una parte no trivial de la cuestión, por lo que la siguiente es bastante inútil para los propósitos iOS

Después de un momento de buscar en Google, encontré el siguiente código junto con la explicación de cómo apoyar inversa reproducción de vídeo de HTML5 en los navegadores basados ​​en Webkit:

function speedup(video, direction) { 
    if (direction == undefined) direction = 1; // or -1 for reverse 
    if (video.playbackRate != undefined) { 
     video.playbackRate = direction == 1 ? 2 : -2; 
    } else { // do it manually 
     video.setAttribute('data-playbackRate', setInterval ((function playbackRate() { 
     video.currentTime += direction; 
     return playbackRate; // allows us to run the function once and setInterval 
     })(), 500)); 
    } 
} 

function playnormal(video) { 
    if (video.playbackRate != undefined) { 
     video.playbackRate = 1; 
    } else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); } 
} 

Fuente: http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

Tiene que pasar en el objeto de vídeo HTML5 a la Spee función dup, pero por otra parte que la función podría ser reducida en el siguiente (no he probado esto, sin embargo, se trata de una función específica IPAD):

function reverseVideo(video) { 
    video.playbackRate = -1; 
} 

Siéntase libre de jugar, y la búsqueda de más información en el elemento de video html5 :)