125 votes

Peut-on lire automatiquement des vidéos HTML5 sur l'iPad ?

El <video> tags autoplay="autoplay" fonctionne bien dans Safari.

Lors du test sur un iPad, la vidéo doit être activée manuellement.

Je pensais qu'il s'agissait d'un problème de chargement, j'ai donc exécuté une boucle vérifiant l'état des médias :

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

L'État reste à 0 sur l'iPad. Sur mon safari de bureau, il passe par 0 , 1 et enfin 4 . Sur l'iPad, il n'atteint que 4 si je touche manuellement la flèche "play".

De plus, le fait d'appeler $("#periscopevideo").get(0).play() d'un clic via onClick fonctionne également.

Y a-t-il des restrictions de la part d'Apple en ce qui concerne la lecture automatique ? (Au fait, j'utilise iOS 5+).

0 votes

0 votes

Nous devrions peut-être nous pencher sur la détection du navigateur, et sur la nécessité ou non d'appeler playVideo() : stackoverflow.com/questions/26895492/

0 votes

157voto

dsg Points 26355

Mise à jour d'iOS 10

L'interdiction de la lecture automatique a été levée à partir d'iOS 10, mais avec certaines restrictions (par exemple, une vidéo peut être lue automatiquement s'il n'y a pas de piste audio).

Pour consulter la liste complète de ces restrictions, voir la documentation officielle : https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 et avant

A partir d'iOS 6.1, il n'est plus possible de lire automatiquement les vidéos sur l'iPad.

Mon hypothèse sur la raison pour laquelle ils ont désactivé la fonction de lecture automatique ?

Eh bien, comme de nombreux propriétaires d'appareils ont des limites d'utilisation des données et de la bande passante sur leurs appareils, je pense qu'Apple a estimé que l'utilisateur lui-même devrait décider quand il lance l'utilisation de la bande passante.


Après quelques recherches, j'ai trouvé l'extrait suivant dans la documentation d'Apple concernant la lecture automatique sur les appareils iOS, qui confirme mon hypothèse :

"Apple a pris la décision de désactiver la lecture automatique des vidéos sur les appareils iOS, à travers les implémentations script et attributaires.

Dans Safari, sur iOS (pour tous les appareils, y compris l'iPad), où l'utilisateur peut se trouver sur un réseau cellulaire et être facturé à l'unité de données, le préchargement et les lecture automatique sont désactivés. Aucune donnée n'est chargée tant que l'utilisateur ne l'a pas initié. " - Documentation Apple.

Voici un avertissement distinct figurant sur le site Page de référence HTML5 de Safari sur la raison pour laquelle les médias intégrés ne peuvent pas être lus dans Safari sur iOS :

Avertissement : Pour éviter les téléchargements non sollicités sur les réseaux cellulaires aux frais de l'utilisateur, les médias intégrés ne peuvent pas être lus automatiquement. aux frais de l'utilisateur, les médias intégrés ne peuvent pas être lus automatiquement dans Safari sur iOS - c'est toujours l'utilisateur qui lance la lecture. Un contrôleur est automatiquement sur l'iPhone ou l'iPod touch une fois la lecture lancée. la lecture est lancée, mais pour l'iPad, vous devez soit définir l'attribut controls soit fournir un contrôleur à l'aide de JavaScript.


Ce que cela signifie (en termes de code), c'est que la fonction Javascript play() y load() sont inactives jusqu'à ce que l'utilisateur lance la lecture, sauf si el play() ou load() est déclenchée par une action de l'utilisateur (par exemple, un événement de clic).

Fondamentalement, un bouton de lecture initié par l'utilisateur fonctionne, mais un onLoad="play()" ne l'est pas.

Par exemple, ceci jouerait le film :

<input type="button" value="Play" onclick="document.myMovie.play()">

Alors que ce qui suit ne ferait rien sur iOS :

<body onload="document.myMovie.play()">

1 votes

Hmmm 3 mois de création d'un réveil en ligne pour iPhone Safari à l'eau ! Nous (sleep.fm) avons trouvé un moyen de garder le téléphone éveillé lorsque l'application est ouverte, mais maintenant, avec iOS 6.1, le son de l'alarme ne fonctionne pas. Il fonctionnait bien dans iOS 6.0. Existe-t-il une solution de contournement ?

1 votes

@Jonah1289 Selon votre article sur Sleep.fm, Brian Cavalier a tweeté un lien github avec le titre suivant Lecture automatique de l'audio sur l'ipad ou l'iphone en utilisant le webkitaudiocontext au lieu de la balise audio Ça pourrait être un bon point de départ.

1 votes

Plus de détails, s'il vous plaît - quelles sont les solutions de contournement spécifiques qui existent pour l'absence de support Autoplay ?

16voto

Brandon Buck Points 3353

Je voudrais commencer par dire que je me rends compte que cette question est ancienne et qu'elle a déjà une réponse acceptée ; mais, en tant qu'internaute malheureux qui a utilisé cette question comme un moyen d'arriver à ses fins pour se voir prouver qu'il avait tort peu après (mais pas avant d'avoir un peu contrarié mon client), je veux ajouter mes réflexions et mes suggestions.

Bien que @DSG et @Giona aient raison et qu'il n'y ait rien de mal dans leurs réponses, il existe un mécanisme créatif que vous pouvez employer pour "contourner", pour ainsi dire, cette limitation. Cela ne veut pas dire que j'approuve le contournement de cette fonctionnalité, bien au contraire, mais juste quelques mécanismes pour que l'utilisateur ait toujours "l'impression" qu'un fichier vidéo ou audio est "en lecture automatique".

La solution rapide est de cacher une balise vidéo quelque part sur la page mobile, puisque j'ai construit un site réactif, je ne le fais que pour les petits écrans. La balise vidéo (exemples HTML et jQuery) :

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Avec cet élément caché sur la page, lorsqu'un utilisateur "clique" pour regarder un film (il s'agit toujours d'une interaction avec l'utilisateur, il n'y a aucun moyen de contourner cette exigence), au lieu de naviguer vers une page secondaire de visionnage, je charge la vidéo cachée. Cela fonctionne principalement parce que la balise media n'est pas vraiment utilisée mais plutôt promue à une instance Quicktime, de sorte qu'il n'est pas du tout nécessaire d'avoir un élément vidéo visible. Dans le gestionnaire de "clic" (ou "touchend" sur mobile).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

Et viola. En ce qui concerne l'interface utilisateur, un utilisateur clique sur une vidéo à lire et Quicktime s'ouvre et lit la vidéo qu'il a choisie. Cela ne change rien au fait que les vidéos ne peuvent être lues que par l'action de l'utilisateur. Je n'impose donc pas de données à quiconque ne décide pas de regarder une vidéo avec ce service. J'ai découvert cela en essayant de comprendre comment exactement Youtube a réussi à faire cela avec son mobile, ce qui consiste essentiellement à construire des pages en Javascript et à cacher des éléments fantaisistes comme dans le cas de la balise vidéo.

tl;dr Voici une solution de contournement pour essayer de créer une fonctionnalité UX de "lecture automatique" sur les appareils iOS sans aller au-delà des limites imposées par Apple et en laissant les utilisateurs décider eux-mêmes s'ils veulent regarder une vidéo (ou un fichier audio, bien que je n'aie pas testé) sans qu'elle soit chargée sans leur permission.

De plus, pour la personne qui a commenté que cela vient de sleep.fm, cela n'aurait malheureusement pas été une solution à votre problème qui est la lecture audio basée sur le temps.

J'espère que quelqu'un trouvera cette information utile. Elle m'aurait épargné une semaine de mauvaises nouvelles à un client qui tenait absolument à disposer de cette fonctionnalité et j'ai été heureux de trouver un moyen de l'annoncer en fin de compte.

EDIT

D'autres recherches indiquent que la solution de contournement ci-dessus ne concerne que les appareils iPhone/iPod. L'iPad lit la vidéo dans Safari avant qu'elle n'ait été affichée en plein écran. Il vous faudra donc un mécanisme pour redimensionner la vidéo en cliquant dessus avant de la lire, sinon vous obtiendrez du son et pas de vidéo.

2 votes

Il serait préférable d'utiliser $dummyVideo.get(0) au lieu de parenthèses, de sorte que jQuery puisse échouer gracieusement si votre sélection est vide.

12voto

JackKalish Points 961

Depuis iOS 10, les vidéos puede autoplay, mais seulement s'ils sont muets ou s'ils n'ont pas de piste audio. Hourra !

En bref :

  • <video autoplay> respecteront désormais l'attribut autoplay, pour les éléments qui remplissent les conditions suivantes :
    • <video> seront autorisés à faire une lecture automatique sans geste de l'utilisateur si leur média source ne contient aucune piste audio.
    • <video muted> Les éléments seront également autorisés à se mettre en lecture automatique sans geste de l'utilisateur.
    • Si un <video> gagne une piste audio ou devient non-muet sans un geste de l'utilisateur, la lecture s'interrompt.
    • <video autoplay> ne commencent à être lus que lorsqu'ils sont visibles à l'écran, par exemple lorsqu'ils défilent dans la fenêtre d'affichage, qu'ils sont rendus visibles par le biais de CSS et qu'ils sont insérés dans le DOM. visible par CSS, et insérés dans le DOM.
    • <video autoplay> se mettront en pause s'ils deviennent invisibles, par exemple lorsqu'ils sont sortis de la fenêtre d'affichage.

Plus d'informations ici : https://webkit.org/blog/6784/new-video-policies-for-ios/

4 votes

L'attribut autoplay ne fonctionne que sur PC, pas sur mobile. J'ai essayé plusieurs fois.

12voto

Er Li Points 47

Il suffit de mettre

webView.mediaPlaybackRequiresUserAction = NO;

La lecture automatique fonctionne pour moi sur iOS.

29 votes

Cela ne fonctionne pas pour un site web, mais uniquement pour les sites que vous avez enveloppés d'une application native.

5 votes

Je veux dire, à partir d'une page Web (comme le demande la question), c'est quelque chose de complètement inaccessible - oui, Javascript dans un navigateur ne peut pas faire cela. Cela ne fonctionne que si vous exécutez votre site à l'intérieur d'une WebView à partir d'une application que vous contrôlez, ce qui n'apporte pas vraiment de solution à la question.

6 votes

@izuriel pour être juste, il a étiqueté la question avec "objective-c" et "cocoa-touch", donc il n'est pas si exagéré de supposer qu'il utilise une vue web.

7voto

Giona Points 7696

Dans ce Référence HTML5 de Safari vous pouvez lire

Afin d'éviter les téléchargements non sollicités sur les réseaux cellulaires aux frais de l'utilisateur, l'émettrice a mis en place un système d'alerte. l'utilisateur, les médias intégrés ne peuvent pas être lus automatiquement dans Safari sur iOS. iOS : c'est toujours l'utilisateur qui lance la lecture. Un contrôleur est automatiquement automatiquement sur l'iPhone ou l'iPod touch une fois la lecture lancée. iPad, vous devez soit définir l'attribut controls, soit fournir un attribut contrôleur en utilisant JavaScript.

38 votes

"à part les fichiers GIF qui peuvent être de plusieurs MB et utilisent la bande passante sans que les gens s'en rendent compte"

0 votes

@Simon_Weaver x12 fois pour la plupart des fois pour être précis.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X