Vidéo en ligne HTML5 sur iPhone vs iPad / navigateur

J’ai créé un lecteur vidéo HTML5 (très simple) qui fonctionne parfaitement sur l’iPad et le navigateur.

Cependant, lorsque je l’ouvre sur l’iPhone, je n’ai qu’un bouton de lecture qui, une fois pressé, ouvre le lecteur vidéo natif sur une nouvelle fenêtre, en plus de tous mes trucs.

Cela signifie que je perds l’access à mes contrôles personnalisés et à mon suivi de temps (écrit en Javascript), car la vidéo est maintenant isolée.

Existe-t-il un moyen de remplacer le contrôle de la vidéo HTML5 par Apple sur l’iPhone et de le faire fonctionner comme sur l’ipad?

À votre santé

Droite,

Je n’allais nulle part avec ceci et a déposé un bug avec Apple.

Après quelques semaines, ils sont revenus me dire, très simplement, que je devais append “webkit-playsinline” à la balise vidéo sur le code HTML, et append la propriété “allowInlineMediaPlayback” sur UIWebView.

Donc à la fin, voici à quoi ça ressemble:

HTML

 

Obj-C

 webview.allowsInlineMediaPlayback = YES; 

Et tout fonctionne bien 🙂

J’espère que cela aidera quelqu’un, car il est virtuellement non documenté et le seul endroit où j’ai pu trouver une référence à “webkit-playsinline” était la référence iAds, où il était écrit: “iSs JS uniquement”.

Jusqu’à ce que iOS Safari implémente le support vidéo en ligne, vous devez écrire un décodeur vidéo dans un langage compatible avec le Web. Il existe des implémentations de décodeurs vidéo, telles que Broadway pour H.264 (vidéo), jsmpeg pour mpeg1 et ogv.js ( support vidéo et audio).

Gardez à l’esprit que le processus de décodage d’une vidéo est lourd en termes de calcul. Attendez-vous à un FPS relativement lent (± 20).

Pour votre information, ces gars-là ont préparé une démonstration d’une vidéo que vous pouvez lire sur votre appareil iOS.

Dans iOS 10+

Apple a activé l’atsortingbut playsinline dans tous les navigateurs sur iOS 10, donc cela fonctionne parfaitement:

  

Dans iOS 8 et iOS 9

Vous pouvez contourner ce problème en simulant la lecture en survolant la vidéo au lieu de la .play() .

Vous pouvez utiliser iphone-inline-video pour prendre en charge la lecture et la synchronisation audio (le cas échéant), tout en conservant le fonctionnement de la .

Avez-vous une application créée ou est-ce pour le safari mobile? Si vous avez une application et que vous utilisez UIWebView, vous devez définir la propriété permissionsInlineMediaPlayback de UIWebView.

Il existe des solutions de contournement, je travaille sur une bibliothèque pour autoriser cette fonctionnalité automatiquement. Cependant, jusqu’à ce que Apple définisse Safari sur

 webview.allowsInlineMediaPlayback = YES; 

alors nous devrons utiliser des hacks pour le même comportement.

Vous pouvez consulter le projet ici: https://github.com/newshorts/InlineVideo pour voir s’il répond à vos besoins.

Dans iOS 10, l’ajout de l’atsortingbut “playsinline” à la balise vidéo HTML5 n’empêchait pas la lecture en plein écran sur un UIWebview pour iPhone jusqu’à ce que j’ajoute également l’atsortingbut “controls”. Voici comment je l’ai fait fonctionner:

  

Avec, bien sûr, _webView.allowsInlineMediaPlayback=YES; dans le ViewController également.

Ajoutez simplement les informations suivantes à votre fichier config.xml: Sinon, UIWebView néglige l’atsortingbut webkit-playsinline.

Vous pouvez facilement autoriser cela en ajoutant ceci à votre config.xml: UIWebView devrait alors respecter l’atsortingbut webkit-playsinline.