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

Question

J'ai construit une application web qui utilise la balise HTML5 et le code JavaScript pour rendre un autre contenu synchronisé 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 s'affiche et occupe tout l'écran, masquant ainsi l'autre contenu dynamique que je veux afficher simultanément à la vidéo.

Y a-t-il un moyen de contourner ce problème ? Si nécessaire, je trouverai un moyen d'écrire des applications natives pour ces deux plateformes, mais cela m'épargnerait beaucoup d'efforts si je pouvais m'en tenir à HTML5/JavaScript.

Answer 1

Dans iOS 10+

Apple a activé l'attribut playsinline dans tous les navigateurs sous iOS 10, de sorte que cela fonctionne de manière transparente :

<video src="file.mp4" playsinline>

Dans iOS 8 et iOS 9

Réponse courte : utiliser iphone-inline-vidéo il permet la lecture en ligne et la synchronisation de l'audio.

Longue réponse : Vous pouvez contourner ce problème en simulant la lecture en écrémage la vidéo au lieu de réellement .play() le faire.

Answer 2

Il existe une propriété qui permet d'activer/désactiver la lecture multimédia en ligne dans le navigateur Web d'iOS (si vous écriviez une application native, il s'agirait de l'attribut allowsInlineMediaPlayback d'un UIWebView). Par défaut, sur l'iPhone, cette propriété est définie sur NO mais sur l'iPad, il est réglé 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, je l'espère, régler le problème pour vous. Je ne sais pas si ça marchera sur vos appareils Android. C'est une propriété de webkit, donc ça pourrait. Ça vaut le coup d'essayer, en tout cas.

Answer 3

Ancienne réponse (applicable jusqu'en 2016)

Voici un lien pour les développeurs Apple qui explicitement dit que -

sur l'iPhone et l'iPod touch, qui sont des appareils à petit écran, "Video is PAS présentées dans la page web"

Considérations spécifiques à l'appareil Safari

Vos options :

• En webkit-playsinline fonctionne pour les vidéos HTML5 sur iOS, mais l'attribut uniquement lorsque vous enregistrez la page web sur votre écran d'accueil en tant qu'application web - Pas si l'on ouvre une page dans Safari
• Pour une application native avec une WebView (ou une application hybride avec HTML, CSS, JS), la fonction UIWebView permet de lire la vidéo en ligne, mais seulement si vous fixer le allowsInlineMediaPlayback propriété pour les UIWebView à true (vrai)

Answer 4

Dans iOS 10 beta 4, le bon code en HTML5 est le suivant

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

webkit-playsinline est pour iOS < 10, et playsinline est pour iOS >= 10

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

Answer 5

Selon cette page https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html elle n'est disponible que si (activée uniquement dans une UIWebView dont la propriété allowsInlineMediaPlayback est définie sur YES). Je crois savoir que dans Mobile Safari, c'est OUI sur l'iPad et NON sur l'iPhone et l'iPod Touch.