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

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

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

 

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”.

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 ( soporte de video y sonido).

Tenga en cuenta que el proceso de deencoding 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.

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

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 funcionando como debería.

¿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.

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.

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:

  

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

Simplemente agregue siguiente a su config.xml: De lo contrario, UIWebView omitirá el atributo webkit-playsinline.

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