Video in linea HTML5 su iPhone vs iPad / Browser

Ho creato un video player HTML5 (molto semplice) che funziona perfettamente su iPad e browser.

Tuttavia, quando lo apro sull’iPhone, ottengo solo un pulsante di riproduzione che, se premuto, apre il lettore video nativo su una nuova finestra, oltre a tutte le mie cose.

Ciò significa che ho perso l’accesso ai miei controlli personalizzati e al monitoraggio del tempo (scritto in Javascript), poiché il video è ora in esecuzione isolato.

C’è un modo per sovrascrivere il controllo di Apple sui video HTML5 su iPhone e farlo funzionare come su iPad?

Saluti

Destra,

Stavo andando da nessuna parte con questo e ho presentato un bug con Apple.

Dopo un paio di settimane mi hanno risposto dicendo, molto semplicemente, che dovevo aggiungere “webkit-playsinline” al tag video sull’HTML, così come aggiungere la proprietà “allowInlineMediaPlayback” su UIWebView.

Quindi alla fine, questo è quello che sembra:

HTML

 

Obj-C

 webview.allowsInlineMediaPlayback = YES; 

E tutto funziona bene 🙂

Spero che questo aiuti qualcuno, dato che è praticamente privo di documenti e l’unico posto in cui potrei trovare un riferimento a “webkit-playsinline” era nel riferimento di iAds, dove si dice: “solo iAds JS”.

Fino a quando iOS Safari non implementa il supporto per i video in linea, devi scrivere un decoder video in un linguaggio supportato dal Web. Esistono implementazioni di decodificatori video, come Broadway per H.264 (video), jsmpeg per mpeg1 e ogv.js (supporto per video e audio).

Tieni presente che il processo di decodifica di un video è pesante dal punto di vista computazionale. Aspettatevi un FPS relativamente lento (± 20).

Per tua informazione, questi ragazzi hanno preparato una demo di un video che puoi riprodurre sul tuo dispositivo iOS.

In iOS 10+

Apple ha abilitato l’attributo playsinline in tutti i browser su iOS 10, quindi funziona perfettamente:

  

In iOS 8 e iOS 9

Puoi aggirare questo problema simulando la riproduzione .play() il video anziché effettivamente .play() .

Puoi usare iphone-inline-video per occuparti della riproduzione e della sincronizzazione audio (se ce ne sono), e mantiene funzionante come dovrebbe.

Hai creato un’app o è per safari mobile? Se si dispone di un’app e si utilizza UIWebView, è necessario impostare la proprietà allowInlineMediaPlayback di UIWebView.

Ci sono dei problemi, sto lavorando su una libreria per consentire automaticamente questa funzionalità. Tuttavia, fino a quando Apple non imposta safari

 webview.allowsInlineMediaPlayback = YES; 

allora dovremo usare gli hack per lo stesso comportamento.

Puoi controllare il progetto qui: https://github.com/newshorts/InlineVideo per vedere se soddisfa le tue esigenze.

In iOS 10 l’aggiunta dell’attributo ‘playsinline’ al tag video HTML5 non impediva la riproduzione a schermo intero su un iPhone UIWebview fino a quando non ho aggiunto anche l’attributo ‘controls’. È così che ho funzionato:

  

Con, ovviamente, _webView.allowsInlineMediaPlayback=YES; anche nel ViewController.

Basta aggiungere al proprio config.xml: Altrimenti UIWebView trascurerà l’attributo webkit-playsinline.

Puoi facilmente farlo aggiungendo questo al tuo file config.xml: UIWebView dovrebbe quindi rispettare l’attributo webkit-playsinline.