La lecture automatique des vidéos sans le son est prise en charge par Chrome pour Android à partir de la version 53. La lecture d'un élément vidéo démarre automatiquement lorsqu'il devient visible si autoplay et muted sont définis. La lecture des vidéos sans son peut être lancée de manière programmatique avec play(). Auparavant, la lecture sur mobile devait être lancée par un geste de l'utilisateur, quel que soit l'état du son.
<video playsinline autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Pour voir une démonstration, consultez cet exemple. La lecture de la vidéo muted démarre automatiquement dans Chrome 53 ou version ultérieure.
De plus, la lecture en mode silencieux peut désormais être lancée à l'aide de la méthode play(). Auparavant, play() ne lançait la lecture que s'il provenait d'un geste de l'utilisateur, comme un clic sur un bouton. Comparez les deux démos suivantes sur Android. Essayez-les sur Chrome 53, puis sur une version antérieure :
Nous vous recommandons d'utiliser l'attribut autoplay dans la mesure du possible, et la méthode play() uniquement si nécessaire.
Il est possible de réactiver le son d'une vidéo de manière programmatique en réponse à un geste de l'utilisateur, tel qu'un click. Toutefois, si vous essayez de réactiver le son d'une vidéo de manière programmatique sans geste de l'utilisateur, la lecture sera suspendue.
La modification muted autoplay permettra également d'utiliser play() avec un élément video non créé dans le DOM, par exemple pour piloter la lecture WebGL.
La méthode play() renvoie également une promesse, qui peut être utilisée pour vérifier si la lecture programmatique en mode silencieux est activée. Vous trouverez un exemple sur simpl.info/video/scripted.
Pourquoi ce changement ?
La lecture automatique a été désactivée dans les versions précédentes de Chrome sur Android, car elle peut être perturbante, consommer beaucoup de données et ne pas plaire à de nombreux utilisateurs.
La désactivation de la lecture automatique a eu pour effet involontaire de pousser les développeurs à trouver des alternatives, comme les GIF animés, ainsi que les hacks <canvas> et <img>. Ces techniques sont bien moins efficaces que la vidéo optimisée en termes de consommation d'énergie, de performances, de bande passante requise, de coût des données et d'utilisation de la mémoire. La vidéo peut offrir une qualité supérieure à celle des GIF animés, avec une compression bien meilleure : environ 10 fois en moyenne et jusqu'à 100 fois au mieux. Le décodage vidéo en JavaScript est possible, mais il consomme énormément de batterie.
Comparez les deux exemples suivants : le premier est une vidéo et le second est un GIF animé :
Elles se ressemblent beaucoup, mais la vidéo pèse moins de 200 ko, tandis que le GIF animé dépasse les 900 ko.
Chrome et les autres fournisseurs de navigateurs sont extrêmement prudents concernant la bande passante des utilisateurs. Pour de nombreux utilisateurs et dans de nombreux contextes, le coût élevé des données est souvent un obstacle à l'accès plus important qu'une mauvaise connectivité. Étant donné la prévalence des solutions de contournement, la lecture automatique sans son ne peut pas être bloquée. La meilleure chose que la plate-forme puisse faire est donc de proposer de bonnes API et des valeurs par défaut.
Le Web est de plus en plus axé sur les contenus multimédias. Les concepteurs et les développeurs continuent de trouver de nouvelles façons d'utiliser la vidéo, parfois de manière inattendue. Ils souhaitent un comportement cohérent sur toutes les plates-formes, par exemple lorsqu'ils utilisent une vidéo en arrière-plan comme élément de conception. La lecture automatique sans le son permet d'activer ce type de fonctionnalité sur mobile et sur ordinateur.
Dans les moindres détails
- Du point de vue de l'accessibilité, la lecture automatique peut être particulièrement problématique. Chrome 53 et versions ultérieures sur Android proposent un paramètre permettant de désactiver complètement la lecture automatique : dans les paramètres multimédias, sélectionnez "Lecture automatique".
- Ce changement n'a aucune incidence sur l'élément
audio: la lecture automatique est toujours désactivée sur Chrome pour Android, car la lecture automatique sans son n'a pas beaucoup de sens pour l'audio. - La lecture automatique n'est pas disponible si le mode Économie de données est activé. Si le mode Économiseur de données est activé, la lecture automatique est désactivée dans les paramètres multimédias.
- La lecture automatique sans son fonctionne pour tout élément vidéo visible dans n'importe quel document, iframe ou autre.
- N'oubliez pas que pour profiter du nouveau comportement, vous devrez ajouter
mutedetautoplay: comparez simpl.info/video avec simpl.info/video/muted.
Assistance
- La lecture automatique sans son est compatible avec Safari sur iOS 10 et versions ultérieures.
- La lecture automatique, avec ou sans son, est déjà disponible sur Android avec Firefox et UC Browser, qui ne bloquent aucun type de lecture automatique.