La lecture automatique sans le son pour les vidéos est compatible avec Chrome pour Android à partir de la version 53. La lecture d'un élément vidéo démarre automatiquement dès qu'il est visible si les paramètres autoplay et muted sont définis. De plus, la lecture des vidéos dont le son est désactivé 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 en sourdine est activée. Vous trouverez un exemple à l'adresse 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 gênante, assoiffée de données et de nombreux utilisateurs n'aiment pas cette fonctionnalité.
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, d'exigences de bande passante, 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 cela décharge beaucoup la 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 subtilités
- Du point de vue de l'accessibilité, la lecture automatique peut s'avérer 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'affecte pas l'élément
audio: la lecture automatique est toujours désactivée dans Chrome sur Android, car la lecture automatique avec le son coupé 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
mutedainsi queautoplay: comparez simpl.info/video à 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, qu'elle soit coupée ou non, est déjà compatible avec Android avec Firefox et le navigateur UC: elle ne bloque aucun type de lecture automatique.