2011-03-25 40 views
14

En el iPhone y iPod, si un video de YouTube está incrustado en una página web, el usuario puede tocar el video y el video comenzará a reproducirse: las diapositivas del reproductor multimedia iOS y el video se reproduce en pantalla completa en orientación horizontal. Una vez que el video ha terminado de reproducirse, el reproductor multimedia de iOS se desliza hacia afuera, revelando la página web donde se incrustó el video.Comportamiento del reproductor de video HTML5 en iPhone y iPod en Safari Web Apps

Usando la etiqueta HTML5 <video>, el usuario puede tocar el video y el video se "acercará" a la pantalla completa y comenzará a reproducirse en cualquiera que sea la orientación actual del dispositivo. Una vez que el video ha terminado de reproducirse, el usuario debe tocar una vez para que aparezcan los controles del reproductor, y luego toque "Listo" para regresar a la página web.

Desafortunadamente, la carga de mis videos a YouTube no es una opción para esta aplicación, y no he encontrado un reproductor de video HTML5 que regrese al sitio web una vez que el video haya terminado de reproducirse. Preferiría que el reproductor de video muestre el mismo comportamiento que los videos incrustados de YouTube o que el video se reproduzca en línea. Forzar video en línea es posible en un UIWebView personalizado, pero lamentablemente no es una opción (ya que se trata de una aplicación web, no una aplicación nativa). Además, la propiedad <video>webkit-playsinline no funciona.

¿Hay reproductores de video HTML5 que puedan replicar el comportamiento de video incrustado de YouTube? ¿Me estoy perdiendo algunas soluciones obvias de Javascript? ¿Hay algún método para indicarle a la ventana que el video se terminó de reproducir sin interacción del usuario?

EDIT:

Gracias a Jan, este problema se resuelve. El código de trabajo sigue, junto con una lista de errores/notas.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>scratchpad</title> 
</head> 
<body> 
<video id="video"> 
    <source src="movie.mp4" type="video/mp4" /> 
</video> 
<script type="text/javascript"> 
document.getElementById('video').addEventListener('ended',function(){document.getElementById('video').webkitExitFullScreen();},false); 
</script> 
</body> 
</html> 

errores que hice: 1.
olvidó añadir un ID en la etiqueta <video>.
2. Probando para webkitSupportsFullscreen -no podría hacer que esa propiedad se pruebe como "verdadera". Un comentario en el código en this forum post dice,

// note: .webkitSupportsFullscreen is false while the video is loading 

pero fue incapaz de crear una condición en la que se volvió realidad.
3. Completamente perdido this stackoverflow post.

Respuesta

9

Hm, no puedo intentarlo yo mismo ... pero seguro que has visto esto?

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html#//apple_ref/doc/uid/TP40009356

Así, "webkitEnterFullScreen()" podría ser tu amigo (aunque el médico dice que su sólo lectura):

http://nathanbuskirk.com/?p=1

de vídeo en línea no es posible en cualquier dispositivo iOS al lado iPad (hasta ahora).

De todos modos, es posible detectar el final de un video en Javascript mediante el uso de un detector de eventos:

document.getElementById('video').addEventListener('ended',videoEndListener,false); 

Cheers,

Ene

+0

No, no había logrado encontrar eso. Gracias por el enlace. Elaboraré algún código para ver si puedo poner esto en marcha, y luego aceptaré tu respuesta y actualizaré mi pregunta con el código. – whlteXbread

+0

Impresionante. ¡Muchas gracias por su ayuda! – whlteXbread

+1

Si está intentando manejar el evento "Hecho" presionado, tenga en cuenta que el evento 'finalizado' ya no se activa en iOS> 4.3. Ahora, el único evento que se dispara es 'pause', lo que no es de ninguna ayuda ya que es el mismo evento que se dispara cuando se presionan los botones Reproducir y Pausa. – simianarmy

1

De la documentación Safari:

" Importante: El método webkitEnterFullscreen() solo se puede invocar en respuesta a una acción del usuario, como hacer clic en un botón. No puede invocar webkitEnterFullscreen() en respuesta a un evento onload(), por ejemplo ".

Eso podría explicar por qué su webkitEnterFullscreen siempre es falso. controlar el evento 'terminado'

http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html#//apple_ref/doc/uid/TP40009523-CH3-SW13

solución de Jan es el mejor en su caso.

Cuestiones relacionadas