web-dev-qa-db-fra.com

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 ne reçois qu'un bouton de lecture qui, lorsqu'il est enfoncé, ouvre le lecteur vidéo natif dans une nouvelle fenêtre, en plus de toutes mes affaires.

Cela signifie que je perds l'accès à mes contrôles personnalisés et au suivi du temps (écrit en Javascript), car la vidéo s'exécute maintenant de manière isolée.

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

À votre santé

iphoneipadvideohtml5
77
Andre

Droite,

Je n'allais nulle part avec ça et j'ai déposé un bug avec Apple.

Après quelques semaines, ils m'ont répondu en disant très simplement que je devais ajouter "webkit-playsinline" à la balise vidéo sur le HTML, ainsi que l'ajout de la propriété "allowInlineMediaPlayback" sur UIWebView.

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

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

Et tout fonctionne très bien :)

J'espère que cela aide quelqu'un, car il est pratiquement non documenté et le seul endroit où j'ai pu trouver une référence à "webkit-playsinline" était dans la référence iAds, où il est dit: "iAds JS uniquement".

104
Andre

Jusqu'à ce qu'iOS Safari implémente la prise en charge vidéo en ligne, vous devez écrire le décodeur vidéo dans une langue prise en charge par le Web. Il existe des implémentations existantes de décodeurs vidéo, tels que Broadway pour H.264 (vidéo), jsmpeg pour mpeg1 et ogv.js (vidéo et un support solide).

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 référence, ces gars-là ont préparé une démo d'une vidéo que vous pouvez lire sur votre appareil iOS.

11
Gajus

Dans iOS 10+

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

<video src="file.mp4" playsinline>

Dans iOS 8 et iOS 9

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

Vous pouvez utiliser iphone-inline-video pour prendre soin de la lecture et de la synchronisation audio (le cas échéant), et il maintient le <video> Fonctionne comme il se doit.

2
fregante

Dans iOS 10, l'ajout de l'attribut 'playsinline' à la balise vidéo HTML5 n'a pas empêché la lecture en plein écran sur un iPhone UIWebview jusqu'à ce que j'ajoute également l'attribut 'contrôles'. Voici comment je l'ai fait fonctionner:

<video width="100%" height="240" controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

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

1
saswanb

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

1
LarsJK

Ajoutez simplement ce qui suit à votre config.xml: <preference name="AllowInlineMediaPlayback" value="true" /> Sinon, UIWebView négligera l'attribut webkit-playsinline.

0
Paradise

Il y a quelques contournements, je travaille sur une bibliothèque pour autoriser cette fonctionnalité automatiquement. Cependant, jusqu'à Apple définit 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.

0
newshorts