Puis-je éviter le lecteur vidéo plein écran natif avec HTML5 sur iPhone ou Android?

130

J'ai créé une application Web qui utilise la balise HTML5 et le code JavaScript qui restitue d'autres contenus synchronisés avec la vidéo en cours. Cela fonctionne très bien dans les navigateurs de bureau: Firefox, Chrome et Safari. Sur un iPhone ou un DroidX, le lecteur vidéo natif apparaît et prend le contrôle de l'écran, occultant ainsi l'autre contenu dynamique que je souhaite afficher simultanément avec la vidéo.

Y a-t-il un moyen de contourner cela? Si nécessaire, je trouverai comment écrire des applications natives pour ces deux plates-formes, mais cela me ferait gagner beaucoup d'efforts si je pouvais simplement m'en tenir à HTML5 / JavaScript.

iphone android html video fullscreen AlpineCarver
la source
1
En fait, les implémentations de navigateurs des lecteurs A / V dans iOS et Android sont buggées comme l'enfer. Essayez plusieurs joueurs sur la page ou essayez de leur ajouter des commandes élégantes et vous verrez - c'est inutilisable. Donc, probablement une application plein écran externe pour lire une vidéo - n'est pas si mal;)
tuxSlayer
1
Je suis heureux chaque fois que les appareils Apple rendent mon contenu de la manière prévue. J'utilise pour célébrer ça.
Anders Lindén
Techniquement non, mais il y a quelques bibliothèques disponibles qui le rendent possible, comme iphone-inline-video (divulgation: je l'ai écrit)
fregante

Réponses:

74

Dans iOS 10+

Apple a activé l'attribut playsinlinedans tous les navigateurs sur iOS 10, donc cela fonctionne de manière transparente:

<video src="file.mp4" playsinline>

Sous iOS 8 et iOS 9

Réponse courte: utilisez iphone-inline-video , il permet la lecture en ligne et synchronise l'audio.

Réponse longue: vous pouvez contourner ce problème en simulant la lecture en survolant la vidéo au lieu de la faire réellement .play().

frégante
la source
Cela ne fonctionne pas dans l'Assistant réseau captif (portail captif)
Dominik Vogt
54

Il existe une propriété qui active / désactive la lecture multimédia en ligne dans le navigateur Web iOS (si vous écriviez une application native, ce serait la allowsInlineMediaPlaybackpropriété d'un UIWebView). Par défaut sur l'iPhone, ce paramètre est défini sur NO, mais sur l'iPad, il est défini sur YES.

Heureusement pour vous, vous pouvez également ajuster ce comportement en HTML comme suit:

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

... qui devrait, espérons-le, régler le problème pour vous. Je ne sais pas si cela fonctionnera sur vos appareils Android. C'est une propriété webkit, donc ça pourrait. Ça vaut le coup, de toute façon.

lxt
la source
25
Merci pour la suggestion. Malheureusement, cela n'a pas changé le comportement que je vois - des lecteurs vidéo natifs plein écran apparaissent à la fois sur iPhone et DroidX.
AlpineCarver
5
J'ai aussi ce problème. J'ai ajouté le webkit-playinline et même la version validée xml de webkit-playinline = "webkit-playinline", mais ne change pas le comportement
mike clagg
7
Cela peut ne pas fonctionner dans Safari pour iPhone car la vue Web ne permet pas la lecture vidéo en ligne. Cependant, si la page Web est hébergée dans votre propre UIWebView dans votre propre application, vous pouvez définir ces propriétés et la lecture vidéo en ligne sera possible: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NON;
Willster
14
Cela fonctionne également dans Cordova / PhoneGap. Ajoutez simplement ce qui suit à votre projet config.xml dans Cordova:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
3
<préférence name = "AllowInlineMediaPlayback" value = "true" /> Super !. cela fonctionne bien sur mon iPhone. Merci beaucoup.
sirius2013
41

Ancienne réponse (applicable jusqu'en 2016)

Voici un lien de développeur Apple qui dit explicitement que -

sur l'iPhone et l'iPod touch, qui sont des appareils à petit écran, "La vidéo n'est PAS présentée dans la page Web"

Considérations spécifiques aux périphériques Safari

Vos options :

  • L' webkit-playsinlineattribut fonctionne pour les vidéos HTML5 sur iOS mais uniquement lorsque vous enregistrez la page Web sur votre écran d'accueil en tant qu'application Web - Pas si vous ouvrez une page dans Safari
  • Pour une application native avec WebView (ou une application hybride avec HTML, CSS, JS), UIWebViewpermet de lire la vidéo en ligne, mais uniquement si vous définissez la allowsInlineMediaPlaybackpropriété de la UIWebViewclasse sur true
RoiJulian
la source
1
Voir mes commentaires sur la réponse acceptée. ICYMI, pour Cordova, ajoutez ce qui suit à votre config.xml:<preference name="AllowInlineMediaPlayback" value="true" />
M. TA
Sur YouTube.com, il joue sans passer en plein écran
Anthony
La réponse est ancienne, 2014, et les choses ont peut-être changé. De plus, youtube.com n'est pas une application native avec une WebView comme mentionné dans la réponse. Merci d'avoir remarqué.
KingJulian
18

Dans iOS 10 bêta 4, le bon code en HTML5 est

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

webkit-playsinlineest pour iOS <10 et playsinlineest pour iOS> = 10

Voir les détails via https://webkit.org/blog/6784/new-video-policies-for-ios/

iamhite
la source
11

Selon cette page https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html, il n'est disponible que si (Activé uniquement dans un UIWebView avec la propriété allowInlineMediaPlayback définie sur YES. ) Je comprends que dans Mobile Safari, c'est OUI sur iPad et NON sur iPhone et iPod Touch.

jz-
la source
4
Il semble que cela ne fonctionne que si vous configurez une page de lecteur HTML5 pour "vivre dans" une application iOS native. Cela ne fonctionne certainement pas sur une vieille page Web.
natlee75
9

Je ne sais pas pour Android, mais Safari sur l'iPhone ou l'iPod touch lira toutes les vidéos en plein écran en raison de la petite taille de l'écran. Sur l'iPad, il lira la vidéo sur la page mais permettra à l'utilisateur de la faire en plein écran.

ughoavgfhw
la source