¿Puedo evitar el reproductor de video nativo de pantalla completa con HTML5 en iPhone o Android?

Creé una aplicación web que usa la etiqueta HTML5 y el código JavaScript que procesa otros contenidos sincronizados con el video en ejecución. Funciona muy bien en los navegadores de escritorio: Firefox, Chrome y Safari. En un iPhone o un DroidX, el reproductor de video nativo aparece y toma la pantalla, oscureciendo así el otro contenido dynamic que quiero mostrar simultáneamente con el video.

¿Hay alguna forma de evitar esto? Si es necesario, averiguaré cómo escribir aplicaciones nativas para ambas plataformas, pero me ahorraría un montón de esfuerzo si pudiera seguir con HTML5 / JavaScript.

En iOS 10+

Apple habilitó el atributo playsinline en todos los navegadores en iOS 10, por lo que funciona a la perfección:

  

En iOS 8 y iOS 9

Respuesta corta: use iphone-inline-video , habilita la reproducción en línea y sincroniza el audio.

Respuesta larga: puede evitar este problema simulando la reproducción al pasar el video en lugar de .play() .

Hay una propiedad que habilita / deshabilita la reproducción de medios en línea en el navegador web de iOS (si estuvieras escribiendo una aplicación nativa, sería la propiedad allowsInlineMediaPlayback de un UIWebView). Por defecto en el iPhone esto está configurado a NO , pero en el iPad está configurado en YES .

Afortunadamente para ti, también puedes ajustar este comportamiento en HTML de la siguiente manera:

… que afortunadamente debería solucionarlo por ti. No sé si funcionará en tus dispositivos Android. Es una propiedad de webkit, por lo que podría ser. Vale la pena ir, de todos modos.

Aquí hay un enlace de desarrollador de Apple que dice explícitamente que:

en iPhone y iPod touch, que son dispositivos de pantalla pequeña, “El video NO se presenta en la página web”

Consideraciones específicas del dispositivo Safari

AHORA :

  • El atributo webkit-playsinline funciona para videos HTML5 en iOS pero solo cuando guardas la página web en tu pantalla de inicio como una aplicación web . No si se abre una página en Safari.
  • Para una aplicación nativa con WebView (o una aplicación híbrida con HTML, CSS, JS), UIWebView permite reproducir el video en línea, pero solo si establece la propiedad de allowsInlineMediaPlayback para la clase UIWebView en verdadero

En iOS 10 beta 4. El código correcto en HTML5 es

  

webkit-playsinline es para iOS <10, y playsinline es para iOS> = 10

Ver detalles a través de https://webkit.org/blog/6784/new-video-policies-for-ios/

Según esta página http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/Attributes.html , solo está disponible si (Habilitado solo en un UIWebView con la propiedad permitInlineMediaPlayback establecida en SÍ .) Entiendo que en Mobile Safari esto es SÍ en iPad y NO en iPhone y iPod Touch.

No sé nada de Android, pero Safari en el iPhone o iPod touch reproducirá todos los videos en pantalla completa debido al pequeño tamaño de la pantalla. En el iPad, reproducirá el video en la página, pero permitirá que el usuario lo visualice en pantalla completa.