130

Ho creato un'app Web che utilizza il tag HTML5 e il codice JavaScript per il rendering di altri contenuti sincronizzati con il video in esecuzione. Funziona alla grande nei browser desktop: Firefox, Chrome e Safari. Su un iPhone o un DroidX, il lettore video nativo si apre e prende il controllo dello schermo, oscurando così gli altri contenuti dinamici che voglio visualizzare contemporaneamente al video.

C'è un modo per aggirare questo? Se necessario, scoprirò come scrivere app native per entrambe quelle piattaforme, ma mi risparmierei moltissimo se potessi semplicemente attenermi a HTML5 / JavaScript.

— AlpineCarver
fonte

1

In realtà, le implementazioni del browser dei lettori audio / video in iOS e Android sono buggy come l'inferno. Prova diversi giocatori sulla pagina o prova ad aggiungere controlli eleganti a loro e vedrai - è inutilizzabile. Quindi, probabilmente un'app a schermo intero esterna per la riproduzione di video - non è poi così male;)

— tuxSlayer

1

Sono felice ogni volta che i dispositivi Apple visualizzano i miei contenuti nel modo previsto. Lo uso per festeggiarlo.

— Anders Lindén,

Tecnicamente no, ma ci sono un paio di librerie disponibili che lo rendono possibile, come iphone-inline-video (divulgazione: l'ho scritto)

— fregante

74

In iOS 10+

Apple ha abilitato l'attributo playsinlinein tutti i browser su iOS 10, quindi funziona perfettamente:

<video src="file.mp4" playsinline>

In iOS 8 e iOS 9

Risposta breve: usa iphone-inline-video , abilita la riproduzione in linea e sincronizza l'audio.

Risposta lunga: è possibile aggirare questo problema simulando la riproduzione sfogliando il video anziché eseguendolo effettivamente .play().

— fregante
fonte

Non funziona in Captive Network Assistant (Captive Portal)

— Dominik Vogt,

54

C'è una proprietà che abilita / disabilita la riproduzione multimediale in linea nel browser web iOS (se stavi scrivendo un'app nativa, sarebbe la allowsInlineMediaPlaybackproprietà di un UIWebView). Per impostazione predefinita su iPhone è impostato su NO, ma su iPad è impostato su YES.

Fortunatamente per te, puoi anche regolare questo comportamento in HTML come segue:

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

... speriamo che lo risolva per te. Non so se funzionerà sui tuoi dispositivi Android. È una proprietà webkit, quindi potrebbe. Vale la pena provare, comunque.

— LXT
fonte

25

Grazie per il suggerimento Sfortunatamente, non ha cambiato il comportamento che sto vedendo: i lettori video nativi a schermo intero vengono visualizzati sia su iPhone che su DroidX.

— AlpineCarver,

5

Sto riscontrando anche questo problema. Ho aggiunto webkit-playsinline e persino la versione xml convalidata di webkit-playsinline = "webkit-playsinline", ma non cambia il comportamento

— mike clagg

7

Questo potrebbe non funzionare in Safari per iPhone poiché la visualizzazione Web non consente la riproduzione di video in linea. Se, tuttavia, la pagina Web è ospitata all'interno del tuo UIWebView all'interno della tua app, puoi impostare queste proprietà e sarà possibile la riproduzione video in linea: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;

— Willster,

14

Funziona anche con Cordova / PhoneGap. Basta aggiungere quanto segue al tuo config.xml nel progetto Cordova:<preference name="AllowInlineMediaPlayback" value="true" />

— Mr. TA

3

<preferenza name = "AllowInlineMediaPlayback" value = "true" /> Great !. funziona benissimo sul mio iPhone. Molte grazie.

— sirius2013,

41

Vecchia risposta (applicabile fino al 2016)

Ecco un link per sviluppatori Apple che dice esplicitamente che:

su iPhone e iPod touch, che sono dispositivi a schermo piccolo, "Il video NON è presentato nella pagina Web"

Considerazioni specifiche sul dispositivo Safari

Le tue opzioni :

L' webkit-playsinlineattributo funziona per i video HTML5 su iOS ma solo quando salvi la pagina web nella schermata iniziale come webapp - Non se hai aperto una pagina in Safari
Per un'app nativa con WebView (o un'app ibrida con HTML, CSS, JS) UIWebViewconsente di riprodurre il video in linea, ma solo se si imposta la allowsInlineMediaPlaybackproprietà per la UIWebViewclasse su true

— KingJulian
fonte

1

Vedi i miei commenti alla risposta accettata. ICYMI, per Cordova, aggiungi quanto segue al tuo config.xml:<preference name="AllowInlineMediaPlayback" value="true" />

— Mr. TA

Su YouTube.com si gioca senza passare a schermo intero

— Anthony,

La risposta è vecchia, 2014, e le cose potrebbero essere cambiate. Inoltre, youtube.com non è un'app nativa con un WebView come indicato nella risposta. Grazie per avermelo notato.

— King Julul

18

In iOS 10 beta 4. Il codice giusto in HTML5 è

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinlineè per iOS <10 ed playsinlineè per iOS> = 10

Vedi i dettagli via https://webkit.org/blog/6784/new-video-policies-for-ios/

— iamhite
fonte

11

Secondo questa pagina https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html è disponibile solo se (Abilitato solo in un UIWebView con la proprietà allowInlineMediaPlayback impostata su YES. ) Capisco in Mobile Safari che è SÌ su iPad e NO su iPhone e iPod Touch.

— jz-
fonte

4

Sembra che questo funzionerebbe solo se si stesse configurando una pagina del player HTML5 per "vivere all'interno" di un'app iOS nativa. Certamente non funziona su una semplice pagina web.

— natlee75,

9

Non conosco Android, ma Safari su iPhone o iPod touch riprodurrà tutti i video a schermo intero a causa delle dimensioni ridotte dello schermo. Sull'iPad riprodurrà il video sulla pagina ma consentirà all'utente di renderlo a schermo intero.

— ughoavgfhw
fonte

Posso evitare il lettore video nativo a schermo intero con HTML5 su iPhone o Android?

In iOS 10+

In iOS 8 e iOS 9