Pouvez-vous lire automatiquement des vidéos HTML5 sur l'iPad?
L'attribut <video> tags autoplay="autoplay" fonctionne correctement 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 lancé une boucle pour vérifier 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 à 0 sur l'iPad. Sur mon ordinateur de bureau, il passe par 0, 1 et enfin 4. Sur l'iPad, 4 n'est atteint que si je tape manuellement sur la flèche "Lecture".
De plus, l'appel de $("#periscopevideo").get(0).play() à partir d'un clic via onClick fonctionne également.
Existe-t-il des restrictions de Apple en ce qui concerne la lecture automatique? (J'utilise iOS 5+ au fait).
Mise à jour iOS 10
L'interdiction de 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 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
Depuis iOS 6.1, , il n'est plus possible de lire automatiquement des vidéos sur l'iPad.
Mon hypothèse quant à pourquoi ils ont désactivé la fonctionnalité de lecture automatique?
Eh bien, étant donné que de nombreux propriétaires d’appareils ont des limites d’utilisation des données et de bande passante sur leurs appareils, je pense que Apple a estimé que c’était à l'utilisateur de décider lui-même quand il commencerait à utiliser de la bande passante.
Après quelques recherches, j'ai trouvé l'extrait suivant dans la documentation Apple concernant la lecture automatique sur des 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 se trouver 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 jusqu'à ce que l'utilisateur l'ait initiée. "- documentation Apple.
Voici un avertissement séparé sur la page de référence HTML5 de Safari à propos des raisons pour lesquelles les médias incorporé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 incorporés ne peuvent pas être lus automatiquement dans Safari sous 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 iPad, vous devez définir l'attribut controls ou fournir un contrôleur utilisant JavaScript.
Cela signifie (en termes de code) que les méthodes play() et load() de Javascript sont inactives jusqu'à ce que l'utilisateur lance la lecture, sauf si la méthode play() ou load() est déclenchée (par exemple, une action) cliquez sur l'événement).
En gros, un bouton de lecture lancé par l'utilisateur fonctionne, mais pas un événement onLoad="play()".
Par exemple, ceci lirait 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()">
Je veux commencer par dire en disant que je réalise 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 ne finir que pour prouver qu'il se trompait peu de temps après (mais pas avant d'avoir dérangé mon client), je souhaite ajouter mes pensées et mes suggestions.
Bien que @DSG et @Giona soient corrects et que leurs réponses ne soient pas fausses, vous pouvez utiliser un mécanisme créatif pour "contourner" cette limitation, pour ainsi dire. Cela ne veut pas dire que j’approuve le contournement de cette fonctionnalité, bien au contraire, mais quelques mécanismes permettant à l’utilisateur de "se sentir" toujours comme si un fichier vidéo ou audio était "en lecture automatique".
La solution rapide consiste à masquer une balise vidéo quelque part sur la page mobile. Depuis que j'ai créé un site responsive, je ne le fais que pour les écrans plus petits. La balise video (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, quand un utilisateur "clique" pour regarder un film (interaction utilisateur toujours, il n’ya aucun moyen de contourner cette exigence) au lieu de naviguer vers une page de visionnage secondaire, je charge la vidéo cachée. Cela fonctionne principalement parce que la balise multimédia n'est pas vraiment utilisée, mais plutôt promue en une instance Quicktime; il n'est donc pas nécessaire d'avoir un élément vidéo visible. Dans le gestionnaire pour "cliquer" (ou "toucher" sur le 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 pour le lire et Quicktime ouvre la lecture de la vidéo qu'il a choisie. Cela reste dans la limite du fait que les vidéos ne peuvent être lues que via 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 avait réussi cela avec son téléphone portable, qui consiste essentiellement en une construction de page Javascript vraiment agréable et à un élément de fantaisie se cachant comme dans le cas de la balise video.
voici une "solution de contournement" pour essayer de créer une fonctionnalité UX "à lecture automatique" sur les appareils iOS sans dépasser les limites d'Apple, tout en laissant les utilisateurs décider s'ils souhaitent regarder une vidéo (ou un contenu audio très similaire, bien que je n'ont pas été testés) eux-mêmes sans en avoir chargé un seul sans leur permission.
En outre, pour la personne qui a commenté que cela provient de sleep.fm, cela n’aurait malheureusement toujours pas été une solution à vos problèmes, à savoir la lecture audio en fonction du temps.
J'espère que quelqu'un trouvera cette information utile, cela m'aurait évité une semaine de mauvaise diffusion de nouvelles à un client convaincu de posséder cette fonctionnalité et j'étais heureux de trouver un moyen de la livrer à la fin.
EDIT
Les résultats supplémentaires indiquent que la solution de contournement ci-dessus concerne uniquement les appareils iPhone/iPod. L'iPad lit la vidéo dans Safari avant la projection complète. Vous aurez donc besoin d'un mécanisme pour redimensionner la vidéo au clic avant de la lire, sinon vous obtiendrez de l'audio et pas de vidéo.
Il suffit de mettre
webView.mediaPlaybackRequiresUserAction = NO;
La lecture automatique fonctionne pour moi sur iOS.
À partir de iOS 10, les vidéos peuvent maintenant en lecture automatique , mais seules les vidéos en mode muet sont désactivées ou ne possèdent aucune piste audio. Yay!
En bref:
- Les éléments
<video autoplay>respectent désormais l'attribut autoplay, pour les éléments qui remplissent les conditions suivantes:- Les éléments
<video>pourront être lus automatiquement sans intervention de l'utilisateur si leur média source ne contient aucune piste audio. - Les éléments
<video muted>seront également autorisés à se lire automatiquement sans un geste de l'utilisateur. - Si un élément
<video>gagne une piste audio ou devient muet sans un geste de l'utilisateur, la lecture s'interrompt. - Les éléments
<video autoplay>ne commencent à jouer que lorsqu'ils sont visibles à l'écran, par exemple lorsqu'ils défilent dans la fenêtre d'affichage, sont visibles via CSS et insérés dans le DOM. - Les éléments
<video autoplay>s'interrompent s'ils ne sont plus visibles, par exemple en les faisant défiler hors de la fenêtre.
- Les éléments
Plus d'infos ici: https://webkit.org/blog/6784/new-video-policies-for-ios/
Dans ce 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 incorporés ne peuvent pas être lus automatiquement dans Safari sous 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 iPad, vous devez définir l'attribut controls ou fournir un contrôleur utilisant JavaScript.
Laissez d'abord la vidéo en sourdine pour assurer la lecture automatique dans ios, puis réactivez-la 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>