Règle de lecture automatique dans Chrome

Amélioration de l'expérience utilisateur, réduction des incitations à installer des bloqueurs de publicité et réduction de la consommation de données

François Beaufort
François Beaufort
GitHub

Les règles de lecture automatique de Chrome ont été modifiées en avril 2018. Je vais vous expliquer pourquoi et comment cela affecte la lecture des vidéos avec le son. Avertissement: les utilisateurs vont adorer !

Liam Neeson: Je te trouverai et je te mettrai en pause.
Sean Bean: On ne lance pas simplement des vidéos en lecture automatique.
Les mèmes Internet avec le tag "autoplay" ont été trouvés sur Imgflip et Imgur.

Nouveaux comportements

Comme vous l'avez peut-être remarqué, les navigateurs Web s'orientent vers des règles plus strictes concernant la lecture automatique afin d'améliorer l'expérience utilisateur, de réduire les incitations à installer des bloqueurs de publicité et de réduire la consommation de données sur les réseaux coûteux et/ou limités. Ces modifications visent à donner aux utilisateurs plus de contrôle sur la lecture et à profiter aux éditeurs ayant des cas d'utilisation légitimes.

Les règles de lecture automatique de Chrome sont simples:

Indice d'engagement sur les contenus multimédias

L'indice d'engagement multimédia (MEI) mesure la propension d'un individu à consommer des contenus multimédias sur un site. L'approche de Chrome consiste à calculer le ratio des visites par rapport aux événements de lecture multimédia importants par origine:

  • La consommation du contenu multimédia (audio/vidéo) doit être supérieure à sept secondes.
  • L'audio doit être présent et le son doit être activé.
  • L'onglet de la vidéo est actif.
  • La taille de la vidéo (en px) doit être supérieure à 200 x 140.

Chrome calcule ensuite un score d'engagement multimédia, qui est le plus élevé sur les sites où des contenus multimédias sont lus régulièrement. Lorsque ce seuil est atteint, la lecture automatique des contenus multimédias est autorisée sur ordinateur uniquement.

Le MEI d'un utilisateur est disponible sur la page interne about://media-engagement.

Capture d'écran de la page interne about://media-engagement.
Capture d'écran de la page interne de about://media-engagement dans Chrome.

Commutateurs pour les développeurs

En tant que développeur, vous pouvez modifier localement le comportement des règles de lecture automatique de Chrome pour tester différents niveaux d'engagement utilisateur sur votre site Web.

  • Vous pouvez désactiver complètement la règle de lecture automatique à l'aide d'un indicateur de ligne de commande : chrome.exe --autoplay-policy=no-user-gesture-required. Cela vous permet de tester votre site Web comme si les utilisateurs étaient fortement engagés avec votre site, et la lecture automatique serait toujours autorisée.

  • Vous pouvez également décider de vous assurer que la lecture automatique n'est jamais autorisée en désactivant l'indice MEI et de savoir si les sites avec le MEI global le plus élevé bénéficient de la lecture automatique par défaut pour les nouveaux utilisateurs. Utilisez des indicateurs pour effectuer cette opération: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Délégation iFrame

Une règle d'autorisation permet aux développeurs d'activer et de désactiver sélectivement les fonctionnalités et les API du navigateur. Une fois qu'une origine a reçu l'autorisation de lecture automatique, elle peut déléguer cette autorisation pour les iFrames multi-origines à l'aide des règles d'autorisation pour la lecture automatique. Notez que la lecture automatique est autorisée par défaut dans les iFrames de même origine.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

Lorsque la règle d'autorisation pour la lecture automatique est désactivée, les appels à play() sans geste utilisateur rejettent la promesse avec une exception DOM NotAllowedError. L'attribut "autoplay" est également ignoré.

Exemples

Exemple 1:Chaque fois qu'un utilisateur accède à VideoSubscriptionSite.com sur son ordinateur portable, il regarde une émission TV ou un film. Comme son score d'engagement multimédia est élevé, la lecture automatique est autorisée.

Exemple 2:GlobalNewsSite.com contient à la fois du texte et des vidéos. La plupart des utilisateurs accèdent au site pour lire du contenu textuel et ne regardent des vidéos que de temps en temps. Le score d'engagement des utilisateurs sur les médias étant faible, la lecture automatique ne serait pas autorisée si un utilisateur navigue directement depuis une page de réseau social ou une recherche.

Exemple 3:LocalNewsSite.com contient du texte et des contenus vidéo. La plupart des utilisateurs accèdent au site via la page d'accueil, puis cliquent sur les articles d'actualité. La lecture automatique sur les pages d'articles d'actualités est autorisée en raison de l'interaction de l'utilisateur avec le domaine. Toutefois, vous devez veiller à ce que les utilisateurs ne soient pas surpris par le contenu en lecture automatique.

Exemple 4:MyMovieReviewBlog.com intègre une iFrame avec une bande-annonce de film pour accompagner un avis. Les utilisateurs ayant interagi avec le domaine pour accéder au blog, la lecture automatique est autorisée. Toutefois, le blog doit déléguer explicitement ce privilège à l'iFrame pour que le contenu soit lu automatiquement.

Règles Chrome Enterprise

Vous pouvez modifier le comportement de la lecture automatique à l'aide des règles Chrome Enterprise pour des cas d'utilisation tels que les bornes ou les systèmes non surveillés. Consultez la page d'aide Liste des règles pour découvrir comment définir les règles d'entreprise liées à la lecture automatique:

  • La règle AutoplayAllowed détermine si la lecture automatique est autorisée ou non.
  • La stratégie AutoplayAllowlist vous permet de spécifier une liste d'autorisation de formats d'URL pour lesquels la lecture automatique sera toujours activée.

Bonnes pratiques pour les développeurs Web

Éléments audio/vidéo

N'oubliez pas: ne partez pas du principe qu'une vidéo va se lancer et n'affichez pas de bouton de pause lorsque la vidéo n'est pas en cours de lecture. C'est tellement important que je vais le réécrire une fois ci-dessous pour ceux qui ne lisent que les grandes lignes de ce post.

Vous devez toujours consulter la promesse renvoyée par la fonction de lecture pour voir si elle a été refusée:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Un bon moyen d'engager les utilisateurs consiste à utiliser la lecture automatique avec le son coupé et à leur laisser le choix de l'activer. (Voir l'exemple ci-dessous.) Certains sites Web le font déjà efficacement, comme Facebook, Instagram, Twitter et YouTube.

<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

Les événements qui déclenchent l'activation de l'utilisateur doivent encore être définis de manière cohérente dans tous les navigateurs. Je vous recommande donc de vous en tenir à "click" pour le moment. Consultez le problème GitHub whatwg/html#3849.

Web Audio

L'API Web Audio est couverte par la lecture automatique depuis Chrome 71. Voici quelques points à retenir. Tout d'abord, il est recommandé d'attendre une interaction de l'utilisateur avant de lancer la lecture audio afin que les utilisateurs sachent que quelque chose se passe. Pensez à un bouton de lecture ou à un bouton Marche/Arrêt, par exemple. Vous pouvez également ajouter un bouton de réactivation du son selon le flux de l'application.

Si vous créez votre AudioContext au chargement de la page, vous devrez appeler resume() quelque temps après que l'utilisateur a interagi avec la page (par exemple, après qu'il a cliqué sur un bouton). Sinon, AudioContext sera repris après un geste utilisateur si start() est appelé sur un nœud associé.

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

Vous pouvez également ne créer le AudioContext que lorsque l'utilisateur interagit avec la page.

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

Pour savoir si le navigateur nécessite une interaction de l'utilisateur pour lire l'audio, vérifiez AudioContext.state après l'avoir créé. Si la lecture est autorisée, elle doit immédiatement passer à running. Sinon, il est défini sur suspended. Si vous écoutez l'événement statechange, vous pouvez détecter les modifications de manière asynchrone.

Pour voir un exemple, consultez la petite demande d'extraction qui résout la lecture audio sur le Web pour ces règles de lecture automatique pour https://airhorner.com.