web-dev-qa-db-fra.com

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

J'ai créé une application Web qui utilise la balise HTML5 et le code JavaScript qui restitue le contenu synchronisé avec la vidéo en cours d'exécution. 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 reprend l'écran, masquant 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 économiser beaucoup d'efforts si je pouvais me contenter de HTML5/JavaScript.

iphoneandroidhtml5videofullscreen
114
AlpineCarver

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>

Sous iOS 8 et iOS 9

Réponse courte: utilisez iphone-inline-video , il active 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 réellement .play() .

62
fregante

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 propriété allowsInlineMediaPlayback d'un UIWebView). Par défaut, sur iPhone, le paramètre est défini sur NO, mais sur 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>

... cela 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é du webkit, donc cela pourrait être. Ça vaut le coup d'y aller, de toute façon.

51
lxt

Voici un lien de développeur Apple qui indique explicitement -)

sur l'iPhone et l'iPod touch, qui sont de petits écrans, "La vidéo est [~ # ~] et non [~ # ~] présentée dans la page Web "

Considérations spécifiques au périphérique Safari

[~ # ~] maintenant [~ # ~] :

  • Le webkit-playsinline L’attribut _ 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), UIWebView permet de lire la vidéo en ligne, mais uniquement si vous définissez la propriété allowsInlineMediaPlayback pour la classe UIWebView à true
40
KingJulian

Dans iOS 10 beta 4.Le code approprié en HTML5 est

<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/

15
iamhite

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

11
jz-

Je ne connais pas Android, mais Safari sur iPhone ou iPod touch lira toutes les vidéos en plein écran à cause de la petite taille de l'écran. Sur l'iPad, la vidéo est lue sur la page, mais permet à l'utilisateur de la rendre en plein écran.

9
ughoavgfhw