La lecture automatique de vidéos avec le son désactivé est compatible avec Chrome pour Android à partir de la version 53. La lecture d'un élément vidéo commence automatiquement lorsqu'il apparaît à l'écran si autoplay et muted sont définis. La lecture des vidéos avec le son coupé peut être lancée de manière pragmatique 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 un exemple, consultez cet exemple. La lecture de la vidéo muted commence 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 si elle provenait d'un geste de l'utilisateur, tel qu'un clic sur un bouton. Comparez les deux démonstrations suivantes sur Android : essayez-les dans Chrome 53, puis dans 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.
Vous pouvez désactiver 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 désactiver le son d'une vidéo de manière programmatique sans geste de l'utilisateur, la lecture sera mise en pause.
La modification de muted autoplay permettra également d'utiliser play() avec un élément video qui n'a pas été 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 avec le son désactivé est activée. Vous trouverez un exemple à l'adresse simpl.info/video/scripted.
Pourquoi ce changement ?
La lecture automatique était désactivée dans les versions précédentes de Chrome sur Android, car elle peut être gênante, gourmande en données et déplaire à de nombreux utilisateurs.
La désactivation de la lecture automatique a eu pour effet involontaire d'inciter les développeurs à utiliser des alternatives telles que les GIF animés, ainsi que des 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. Les vidéos peuvent offrir une qualité supérieure aux 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 éléments suivants : le premier est une vidéo, le second un GIF animé :
Ils se ressemblent beaucoup, mais la vidéo fait moins de 200 ko, tandis que le GIF animé fait plus de 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, les coûts élevés des données constituent souvent un obstacle plus important à l'accès qu'une mauvaise connectivité. Étant donné la prévalence des solutions de contournement, le mode Lecture automatique avec le son désactivé ne peut pas être bloqué. La meilleure chose que la plate-forme puisse faire est donc d'offrir de bonnes API et des valeurs par défaut.
Le Web est de plus en plus centré sur les contenus multimédias. Les concepteurs et les développeurs continuent de trouver de nouvelles façons d'utiliser la vidéo, et ils veulent un comportement cohérent sur les différentes plates-formes, par exemple lorsqu'ils utilisent une vidéo en arrière-plan comme élément de conception. La lecture automatique avec le son désactivé permet de profiter de cette fonctionnalité sur mobile et sur ordinateur.
Les 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".
- Cette modification n'a aucune incidence sur l'élément
audio: la lecture automatique est toujours désactivée dans Chrome sur Android, car la lecture automatique avec le son désactivé n'a pas beaucoup de sens pour l'audio. - La lecture automatique n'est pas disponible si le mode Économiseur 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 avec le son désactivé fonctionne pour tous les éléments vidéo visibles dans n'importe quel document visible, iframe ou autre.
- N'oubliez pas que pour profiter du nouveau comportement, vous devez ajouter
mutedetautoplay: comparez simpl.info/video avec simpl.info/video/muted.
Assistance
- La lecture automatique avec le son désactivé est compatible avec Safari sur iOS 10 et versions ultérieures.
- La lecture automatique, avec ou sans le son, est déjà prise en charge sur Android par Firefox et UC Browser. Ils ne bloquent aucun type de lecture automatique.