Vídeo em linha HTML5 no iPhone vs iPad / Navegador

Eu criei um player de vídeo HTML5 (muito simples) que funciona perfeitamente no iPad e no navegador.

No entanto, quando abro no iPhone, eu só recebo um botão de reprodução que, quando pressionado, abre o player de vídeo nativo em uma nova janela, em cima de todas as minhas coisas.

Isso significa que eu perco o access aos meus controles personalizados e rastreamento de tempo (escrito em Javascript), uma vez que o vídeo está sendo executado agora isolado.

Existe alguma maneira de replace o controle de vídeo HTML5 da Apple no iPhone e fazê-lo funcionar como no ipad?

Felicidades

Certo,

Eu estava indo a lugar nenhum com isso e registrei um bug com a Apple.

Depois de algumas semanas, eles voltaram para mim dizendo, muito simplesmente, que eu deveria adicionar “webkit-playsinline” à tag de vídeo no HTML, bem como adicionar a propriedade “allowsInlineMediaPlayback” no UIWebView.

Então, no final, isso é o que parece:

HTML

 

Obj-C

 webview.allowsInlineMediaPlayback = YES; 

E tudo funciona muito bem 🙂

Espero que isso ajude alguém, como é praticamente não documentado e o único lugar que eu poderia encontrar uma referência ao “webkit-playsinline” estava na referência iAds, onde diz: “iAds JS only”.

Até que o iOS Safari implemente suporte de vídeo embutido, você precisa escrever um decodificador de vídeo em um idioma suportado pela web. Existem implementações de decodificadores de vídeo, como Broadway para H.264 (vídeo), jsmpeg para mpeg1 e ogv.js (suporte a vídeo e som).

Tenha em mente que o processo de decodificação de um vídeo é computacionalmente pesado. Espere um FPS relativamente lento (± 20).

Para sua referência, esses caras prepararam uma demonstração de um vídeo que você pode reproduzir no seu dispositivo iOS.

No iOS 10 ou superior

A Apple ativou o atributo playsinline em todos os navegadores no iOS 10, então isso funciona perfeitamente:

  

No iOS 8 e no iOS 9

Você pode contornar esse problema, simulando a reprodução, skimming o vídeo em vez de realmente .play() .

Você pode usar o iphone in-line para cuidar da reprodução e da synchronization de áudio (se houver) e mantém o funcionando como deveria.

Você tem um aplicativo criado ou isso é para um safari móvel? Se você tiver um aplicativo e usar o UIWebView, deverá definir a propriedade allowInlineMediaPlayback do UIWebView.

Existem alguns problemas, estou trabalhando em uma biblioteca para permitir essa funcionalidade automaticamente. No entanto, até a Apple definir safari para

 webview.allowsInlineMediaPlayback = YES; 

então teremos que usar hacks para o mesmo comportamento.

Você pode conferir o projeto aqui: https://github.com/newshorts/InlineVideo para ver se ele atende às suas necessidades.

No iOS 10, a adição do atributo “playsinline” à tag de vídeo HTML5 não impediu a reprodução em canvas cheia em uma UIWebview do iPhone até que também adicionei o atributo “controls”. É assim que eu consegui trabalhar:

  

Com, é claro, _webView.allowsInlineMediaPlayback=YES; no ViewController também.

Basta adicionar o seguinte ao seu config.xml: Caso contrário, o UIWebView negligenciará o atributo webkit-playsinline.

Você pode facilmente permitir isso adicionando isso ao seu config.xml: O UIWebView deve respeitar o atributo webkit-playsinline.