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

130

Creé una aplicación web que usa la etiqueta HTML5 y el código JavaScript que procesa otro contenido sincronizado 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 se hace cargo de la pantalla, ocultando así el otro contenido dinámico que quiero mostrar simultáneamente con el video.

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

iphone android html video fullscreen AlpineCarver
fuente
1
En realidad, las implementaciones de navegador de reproductores a / v tanto en iOS como en Android tienen errores como el infierno. Pruebe con varios jugadores en la página o intente agregarles controles elegantes y verá que es inutilizable. Por lo tanto, probablemente la aplicación de pantalla completa externa para reproducir video no es tan mala;)
tuxSlayer
1
Estoy feliz cada vez que los dispositivos de Apple muestran mi contenido de la manera prevista. Yo solía celebrar eso.
Anders Lindén
Técnicamente no, pero hay un par de bibliotecas disponibles que hacen posible que, al igual que el iPhone de cilindros en línea de vídeo (revelación: lo escribí)
fregante

Respuestas:

74

En iOS 10+

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

<video src="file.mp4" playsinline>

En iOS 8 e iOS 9

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

Respuesta larga: puede solucionar este problema simulando la reproducción ojeando el video en lugar de realmente reproducirlo .play().

fregante
fuente
No funciona en el Asistente de red cautiva (Portal cautivo)
Dominik Vogt
54

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

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

<video id="myVideo" width="280" height="140" webkit-playsinline>

... eso debería resolverlo para ti. No sé si funcionará en sus dispositivos Android. Es una propiedad de webkit, por lo que podría. Vale la pena ir, de todos modos.

lxt
fuente
25
Gracias por la sugerencia. Desafortunadamente, no cambió el comportamiento que estoy viendo: los reproductores de video nativos de pantalla completa aparecen en iPhone y DroidX.
AlpineCarver
55
Estoy teniendo este problema también. He agregado el webkit-playsinline e incluso la versión validada xml de webkit-playsinline = "webkit-playsinline", pero no cambia el comportamiento
mike clagg
77
Es posible que esto no funcione en Safari para iPhone, ya que la vista web no permite la reproducción de video en línea. Sin embargo, si la página web está alojada dentro de su propia UIWebView dentro de su propia aplicación, puede establecer estas propiedades y la reproducción de video en línea será posible: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;
Willster
14
Esto también funciona en Cordova / PhoneGap. Simplemente agregue lo siguiente a su config.xml en el proyecto Cordova:<preference name="AllowInlineMediaPlayback" value="true" />
Sr. TA
3
<preferencia name = "AllowInlineMediaPlayback" value = "true" /> ¡Genial !. Funciona bien en mi iPhone. Muchas gracias.
sirius2013
41

Respuesta anterior (aplicable hasta 2016)

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 dentro de la página web"

Consideraciones específicas del dispositivo Safari

Sus opciones :

  • El webkit-playsinlineatributo funciona para videos HTML5 en iOS, pero solo cuando guarda la página web en su pantalla de inicio como una aplicación web , no si abre una página en Safari
  • Para una aplicación nativa con WebView (o una aplicación híbrida con HTML, CSS, JS), UIWebViewpermite reproducir el video en línea, pero solo si establece la allowsInlineMediaPlaybackpropiedad de la UIWebViewclase en true
Rey Juliano
fuente
1
Vea mis comentarios a la respuesta aceptada. ICYMI, para Cordova, agregue lo siguiente a su config.xml:<preference name="AllowInlineMediaPlayback" value="true" />
Sr. TA
En YouTube.com se juega sin pasar a pantalla completa
Anthony
La respuesta es antigua, 2014, y las cosas pueden haber cambiado. Además, youtube.com no es una aplicación nativa con un WebView como se menciona en la respuesta. Gracias por notarlo sin embargo.
KingJulian
11

De acuerdo con esta página https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html solo está disponible si (Habilitado solo en UIWebView con la propiedad allowInlineMediaPlayback establecida en YES. ) Entiendo que en Mobile Safari esto es SÍ en iPad y NO en iPhone y iPod Touch.

jz-
fuente
44
Parece que esto solo funcionaría si estuviera configurando una página de reproductor HTML5 para "vivir dentro" de una aplicación nativa de iOS. Ciertamente no funciona en una página web simple.
natlee75
9

No sé acerca 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 haga en pantalla completa.

ughoavgfhw
fuente