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.

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().

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.

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

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/

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.

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.