Lecture automatique sans le son sur mobile – Dites adieu aux fonctionnalités de Canvas et de GIF animés !

La lecture automatique avec le son coupé pour les vidéos est compatible avec Chrome pour Android depuis la version 53. La lecture d'un élément vidéo démarre automatiquement une fois qu'il est visible si les options autoplay et muted sont définies. Vous pouvez également lancer la lecture des vidéos sans le son de façon pragmatique avec play(). Auparavant, la lecture sur mobile devait être lancée par un geste de la part de l'utilisateur, que le son soit coupé ou non.

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

Pour voir un exemple concret, consultez cet exemple. La lecture de la vidéo muted démarre automatiquement dans Chrome 53 ou version ultérieure.

Capture d&#39;écran du lecteur vidéo.

De plus, la lecture sans le son 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, comme un clic sur un bouton. Comparez les deux versions de démonstration suivantes sur Android (essayez-les sur Chrome 53, puis sur une ancienne version) :

Nous vous recommandons d'utiliser l'attribut autoplay dans la mesure du possible et la méthode play() uniquement si nécessaire.

Vous pouvez réactiver le son d'une vidéo par programmation en réponse à un geste de l'utilisateur (click, par exemple). Toutefois, si vous tentez de le réactiver par programmation sans geste, 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 lancer la lecture WebGL.

La méthode play() renvoie également une promesse, qui permet de vérifier si la lecture programmatique avec le son coupé est activée. Vous trouverez un exemple sur la page 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 et énergique, et de nombreux utilisateurs n'aiment pas cette fonctionnalité.

La désactivation de la lecture automatique avait pour effet involontaire de rediriger les développeurs vers des alternatives telles que les GIF animés, ainsi que les piratages <canvas> et <img>. Ces techniques sont bien pires 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 meilleure qualité que les GIF animés, avec une bien meilleure compression: environ 10 fois en moyenne, et jusqu'à 100 fois dans le meilleur des cas. Il est possible de décoder des vidéos en JavaScript, mais cela décharge beaucoup la batterie.

Comparez les éléments suivants. Le premier est une vidéo et le second est un GIF animé:

Lecture d&#39;un extrait vidéo en cours.

Ils se ressemblent, mais la vidéo fait moins de 200 Ko et le GIF animé dépasse 900 Ko.

Chrome et les autres fournisseurs de navigateurs sont extrêmement prudents vis-à-vis de la bande passante de l'utilisateur. Pour de nombreux utilisateurs, dans de nombreux contextes, un coût élevé en termes de données constitue souvent un obstacle plus important à l'accès qu'une mauvaise connectivité. Compte tenu de la prévalence des solutions de contournement, la lecture automatique avec le son coupé ne peut pas être bloquée. Il est donc préférable que la plate-forme propose des API et des valeurs par défaut de qualité.

Le Web est de plus en plus axé sur les médias. Les concepteurs et les développeurs continuent à trouver de nouvelles façons imprévues d'utiliser les vidéos, et ils veulent 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 avec le son coupé permet ce type de fonctionnalité sur mobile et sur ordinateur.

Détails

  • En ce qui concerne 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 "Paramètres multimédias", sélectionnez "Lecture automatique".
  • Ce changement 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'est pas pertinente pour l'audio.
  • La lecture n'est pas lancée automatiquement 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 coupé fonctionne pour tout élément vidéo visible dans tout document visible, iFrame ou autre.
  • N'oubliez pas que pour profiter de ce nouveau comportement, vous devez ajouter muted et autoplay: comparez simpl.info/video et simpl.info/video/muted.

Assistance

  • La lecture automatique avec le son coupé est compatible avec Safari sur iOS 10 ou version ultérieure.
  • La lecture automatique, avec ou sans son, est déjà compatible avec Firefox et UC sur Android: elle ne bloque aucun type de lecture automatique.

En savoir plus