Pouvez-vous lire automatiquement des vidéos HTML5 sur l'iPad?

123

L' attribut <video>tags autoplay="autoplay"fonctionne très bien dans Safari.

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

Je pensais que c'était un problème de chargement, alors j'ai exécuté une boucle de vérification de l'état du média:

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 0sur l'iPad. Sur mon safari de bureau, ça passe 0, 1et enfin 4. Sur l'iPad, il n'atteint que 4si j'appuie manuellement sur la flèche «play».

De plus, appeler à $("#periscopevideo").get(0).play()partir d'un clic via onClickfonctionne aussi.

Existe-t-il des restrictions d'Apple en ce qui concerne la lecture automatique? (J'utilise iOS 5+ au fait).

jquery  ios  objective-c  html  cocoa-touch 
— Jem
source
— apsillers
Peut-être devrions-nous examiner la détection du navigateur et savoir si vous devez ou non appeler playVideo (): stackoverflow.com/questions/26895492/…
— Redtopia
— dimitar
— Matthias M
opera mini dans ios prend en charge la lecture automatique par défaut, contrairement à Chrome, Firefox et Safari et ne propose pas d'options d'activation.
— anonyme

Réponses:

156

Mise à jour iOS 10

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

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

iOS 9 et avant

Depuis iOS 6.1, il n'est plus possible de lire automatiquement des vidéos sur l'iPad.

Mon hypothèse quant à 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 / de bande passante sur leurs appareils, je pense qu'Apple a estimé que l'utilisateur lui-même devrait décider du moment où il utilisait la bande passante.

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

«Apple a pris la décision de désactiver la lecture automatique de la vidéo sur les appareils iOS, via des implémentations de scripts et d'attributs.

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

Voici un avertissement distinct figurant sur la page de référence de Safari HTML5 expliquant pourquoi les médias intégrés ne peuvent pas être lus dans Safari sur iOS:

Avertissement : pour empêcher 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 dans Safari sur iOS - l'utilisateur lance toujours la lecture. Un contrôleur est automatiquement fourni sur l'iPhone ou l'iPod touch une fois la lecture lancée, mais pour l'iPad, vous devez soit définir l'attribut des commandes, soit fournir un contrôleur à l'aide de JavaScript.

Ce que cela signifie (en termes de code), c'est que les méthodes play()et Javascript load()sont inactives jusqu'à ce que l'utilisateur lance la lecture, à moins que la méthode play()ou ne load()soit déclenchée par une action de l'utilisateur (par exemple un événement de clic).

Fondamentalement, un bouton de lecture lancé par l'utilisateur fonctionne, mais pas un onLoad="play()"événement.

Par exemple, cela 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()">
— dsgriffin
source
1
Hmmm 3 mois de création d'un réveil en ligne pour iPhone Safari à l'égout! Nous (sleep.fm) avons trouvé un moyen de garder le téléphone éveillé pendant que l'application est ouverte, mais maintenant avec iOS 6.1, le son de l'alarme ne sera plus lu. Cela a bien fonctionné sous iOS 6.0. Y at-il un travail autour?
— chaser7016
1
oh attendez que nous ayons remis en marche notre réveil Web mobile (sleep.fm) pour iPhone Safari, il y a donc des solutions pour le manque de prise en charge de la lecture automatique html5.
— chaser7016
1
@ Jonah1289 Selon votre article de blog 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 webkitaudiocontext au lieu de la balise audio. Cela pourrait être un bon point de départ.
— Francisco
1
Plus de détails, s'il vous plaît - Quelles solutions de contournement spécifiques existent pour le manque de support de lecture automatique?
— Umopepisdn
11
Ce qu'ils devraient faire, c'est autoriser la lecture automatique en wifi, et soit avoir une lecture manuelle, soit indiquer à l'utilisateur que la vidéo souhaite être lue automatiquement sur un réseau mobile.
— Ric
16

Je veux commencer par dire en disant que je me rends compte que cette question est ancienne et a déjà une réponse acceptée; mais, en tant qu'internaute malheureux qui a utilisé cette question comme un moyen de terminer seulement pour se tromper peu de temps après (mais pas avant de déranger un peu mon client), je veux ajouter mes réflexions et suggestions.

Bien que @DSG et @Giona soient corrects et qu'il n'y ait rien de mal dans leurs réponses, il existe un mécanisme créatif que vous pouvez utiliser 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 qu'un utilisateur «se sente» toujours comme si un fichier vidéo ou audio est en «lecture automatique».

La solution la plus rapide consiste à masquer une balise vidéo quelque part sur la page mobile, car j'ai créé 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 cela caché sur la page, lorsqu'un utilisateur "clique" pour regarder un film (toujours en interaction avec l'utilisateur, il n'y a aucun moyen de contourner cette exigence) au lieu de naviguer vers une page de lecture secondaire, je charge la vidéo masquée. Cela fonctionne principalement parce que la balise multimédia n'est pas vraiment utilisée mais plutôt promue vers une instance Quicktime, donc avoir un élément vidéo visible n'est pas du tout nécessaire. Dans le gestionnaire pour "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 alto. En ce qui concerne l'UX, un utilisateur clique sur une vidéo à lire et Quicktime ouvre la lecture de la vidéo de son choix. Cela reste dans la limite selon laquelle les vidéos ne peuvent être lues que via l'action de l'utilisateur, donc je ne force pas les 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 Youtube a réussi cela avec son mobile, qui est essentiellement une très belle création de page Javascript et un élément de fantaisie caché 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 d'Apple et en laissant les utilisateurs décider s'ils veulent regarder une vidéo (ou un son le plus similaire, bien que je 'ai pas testé) eux-mêmes sans en avoir un juste chargé sans leur permission.

De plus, pour la personne qui a commenté cela depuis sleep.fm, cela n'aurait malheureusement pas été une solution à vos problèmes qui sont la lecture audio basée sur le temps.

J'espère que quelqu'un trouvera cette information utile, cela m'aurait sauvé une semaine de mauvaises nouvelles à un client qui était catégorique sur le fait qu'il dispose de cette fonctionnalité et j'étais heureux de trouver un moyen de la livrer à la fin.

ÉDITER

D'autres découvertes indiquent que la solution de contournement ci-dessus est réservée aux appareils iPhone / iPod. L'iPad lit la vidéo dans Safari avant qu'elle ne soit en plein écran, vous aurez donc besoin d'un mécanisme pour redimensionner la vidéo en cliquant avant de jouer, sinon vous vous retrouverez avec de l'audio et pas de vidéo.

— Brandon Buck
source
2
Il serait préférable d'utiliser à la $dummyVideo.get(0)place des crochets, afin que jQuery puisse échouer si votre sélection est vide.
— Micros
12

Juste réglé

webView.mediaPlaybackRequiresUserAction = NO;

La lecture automatique fonctionne pour moi sur iOS.

— Er Li
source
29
Cela ne fonctionne pas pour un site Web, cela ne fonctionne que pour les sites où vous les avez enveloppés avec une application native.
— Brandon Buck
5
Je veux dire, à partir d'une page Web (comme la question le demande), 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 dont vous avez le contrôle, donc cela ne fournit pas vraiment de solution à la question.
— Brandon Buck
6
@izuriel pour être honnête, il a tagué la question avec "objective-c" et "cacao-touch", donc ce n'est pas SI exagéré de supposer qu'il utilise une webview
— Kloar
3
Les balises @Kloar sont généralement ajoutées pour attirer plus d'attention ou pour une incompréhension générale du problème qu'ils essaient de résoudre. La personne qui pose la question peut avoir pensé que mentionner objective-c revenait à dire «iOS» (et similaire pour le cacao-touch). La balise "uiwebview" n'est pas répertoriée, donc j'exclurais cela comme une option viable. La question mentionne l'utilisation de Safari sur bureau et iPad (rien sur une application) et utilise des codes de démonstration Javascript pour déboguer la situation. Dans l'ensemble, je dirais que c'est plus une valeur sûre que cette question recherchait vraiment des solutions Web et non natives.
— Brandon Buck
— cottonBallPaws
11

À partir d'iOS 10, les vidéos peuvent désormais être lues automatiquement, mais seules celles-ci sont désactivées ou n'ont pas de piste audio. Yay!

En bref:

  • <video autoplay> Les éléments honoreront désormais l'attribut de lecture automatique, pour les éléments qui remplissent les conditions suivantes:
    • <video> les éléments pourront être lus automatiquement sans geste de l'utilisateur si leur média source ne contient aucune piste audio.
    • <video muted> Les éléments pourront également être lus automatiquement sans geste de l'utilisateur.
    • Si un <video>élément gagne une piste audio ou devient réactivé sans un geste de l'utilisateur, la lecture s'arrête.
    • <video autoplay> Les éléments ne commenceront à jouer que lorsqu'ils seront visibles à l'écran, par exemple lorsqu'ils défilent dans la fenêtre, sont rendus visibles via CSS et insérés dans le DOM.
    • <video autoplay> les éléments s'arrêteront s'ils deviennent non visibles, par exemple en faisant défiler la fenêtre hors de la fenêtre.

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

— JackKalish
source
4
L'attribut de lecture automatique fonctionne uniquement sur PC, pas sur mobile. J'ai essayé plusieurs fois.
— huykon225
7

Dans cette référence Safari HTML5 , vous pouvez lire

Pour empêcher 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 dans Safari sur iOS - l'utilisateur lance toujours la lecture. Un contrôleur est automatiquement fourni sur l'iPhone ou l'iPod touch une fois la lecture lancée, mais pour l'iPad, vous devez soit définir l'attribut des commandes, soit fournir un contrôleur à l'aide de JavaScript.

— Giona
source
38
"à part les fichiers GIF qui peuvent faire plusieurs Mo et utiliser la bande passante sans même que les gens s'en rendent compte"
— Simon_Weaver
@Simon_Weaver x12 fois la plupart du temps pour être précis.
— Burak Tokak
2

Laissez d'abord le son de la vidéo pour garantir la lecture automatique dans iOS, puis réactivez-le si vous le souhaitez.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
— Mohammad Ali Akbari
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.