iphone - españa - playsinline video html5

Video en línea HTML5 en iPhone vs iPad/Navegador

Question

Creé un reproductor de video HTML5 (muy simple) que funciona perfectamente en el iPad y el navegador.

Sin embargo, cuando lo abro en el iPhone, solo obtengo un botón de reproducción que, al presionarlo, abre el reproductor de video nativo en una nueva ventana, además de todas mis cosas.

Eso significa que pierdo el acceso a mis controles personalizados y el seguimiento del tiempo (escrito en Javascript), ya que el video se está ejecutando de forma aislada.

¿Hay alguna manera de anular el control de Apple de video HTML5 en el iPhone y hacer que funcione como en el ipad?

Aclamaciones

Answer 1

En iOS 10+

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

<video src="file.mp4" playsinline>

En iOS 8 y iOS 9

Puede .play() este problema simulando la reproducción rozando el video en lugar de .play() .

Puede usar iphone-inline-video para encargarse de la reproducción y la sincronización de audio (si corresponde), y mantiene el <video> funcionando como debería.

Answer 2

¿Tiene una aplicación creada o es para safari móvil? Si tiene una aplicación y usa UIWebView, debe establecer la propiedad allowsInlineMediaPlayback de UIWebView.

Answer 3

Derecha,

No iba a ninguna parte con esto y archivé un error con Apple.

Después de un par de semanas volvieron a decirme, simplemente, que debería agregar "webkit-playsinline" a la etiqueta de video en el HTML, así como agregar la propiedad "allowsInlineMediaPlayback" en UIWebView.

Entonces, al final, así es como se ve:

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

Y todo funciona bien :)

Espero que esto ayude a alguien, ya que es prácticamente indocumentado y el único lugar donde pude encontrar una referencia a "webkit-playsinline" estaba en la referencia de iAds, donde dice: "iAds JS solamente".

Answer 4

En iOS 10, agregar el atributo ''playsinline'' a la etiqueta de video HTML5 no impidió la reproducción a pantalla completa en un UIWebview de iPhone hasta que también agregué el atributo ''controles''. Así es como lo hice funcionar:

<video width="100%" height="240" controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

Con, por supuesto, _webView.allowsInlineMediaPlayback=YES; en el ViewController también.

Answer 5

Hasta que iOS Safari implemente la compatibilidad de video en línea, debe escribir el decodificador de video en un lenguaje compatible con la web. Existen implementaciones de decodificadores de video, como Broadway para H.264 (video), jsmpeg para mpeg1 y ogv.js ( ogv.js video y sonido).

Tenga en cuenta que el proceso de decodificación de un video es computacionalmente pesado. Espere un FPS relativamente lento (± 20).

Para su referencia, estos tipos han preparado una demostración de un video que puede reproducir en su dispositivo iOS.

Answer 6

Hay algunas soluciones alternativas, estoy trabajando en una biblioteca para permitir esta funcionalidad automáticamente. Sin embargo, hasta que Apple establezca safari para

webview.allowsInlineMediaPlayback = YES;

entonces tendremos que usar hacks para el mismo comportamiento.

Puede consultar el proyecto aquí: https://github.com/newshorts/InlineVideo para ver si cumple con sus necesidades.

Answer 7

Puede permitir esto fácilmente agregando esto a su config.xml: El UIWebView debería respetar el atributo webkit-playsinline.

Answer 8

Simplemente agregue siguiente a su config.xml: <preference name="AllowInlineMediaPlayback" value="true" /> De lo contrario, UIWebView omitirá el atributo webkit-playsinline.