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. Attention spoiler: les utilisateurs vont adorer !

Je vous trouverai et je vous mettrai en pause.
Sean Bean: On ne se contente pas de lire automatiquement les vidéos.
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 adoptent des règles de lecture automatique plus strictes 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 restreints. Ces modifications visent à donner aux utilisateurs un meilleur contrôle de la lecture et à aider les éditeurs avec des cas d'utilisation légitimes.

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

Indice d'engagement média

L'indice d'engagement média (MEI) mesure la propension d'un individu à consommer des contenus multimédias sur un site. L'approche de Chrome repose sur le ratio de visites aux événements de lecture de contenus multimédias significatifs 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 activé.
  • L'onglet contenant la vidéo est actif.
  • La taille de la vidéo (en px) doit être supérieure à 200 x 140.

À partir de là, Chrome calcule un score d'engagement média, qui est le plus élevé sur les sites où les contenus multimédias sont lus régulièrement. Lorsque cette valeur est suffisamment élevée, la lecture automatique du contenu multimédia n'est autorisée que sur ordinateur.

Les MEI d'un utilisateur sont disponibles sur la page interne de 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.

Boutons bascules pour les développeurs

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

  • 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 vous assurer que la lecture automatique n'est jamais autorisée en désactivant les MEI et en déterminant si les sites ayant les MEI globales les plus élevées obtiennent 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 de manière sélective 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 grâce aux règles d'autorisation pour la lecture automatique. Notez que la lecture automatique est autorisée par défaut sur les iFrame 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 de l'utilisateur rejettent la promesse avec une exception DOMException NotAllowedError. L'attribut de lecture automatique est également ignoré.

Exemples

Exemple 1:Chaque fois qu'un utilisateur visite VideoSubscriptionSite.com sur son ordinateur portable, il regarde une série TV ou un film. Comme le score d'engagement média est élevé, la lecture automatique est autorisée.

Exemple 2:GlobalNewsSite.com comporte à la fois du texte et des vidéos. La plupart des utilisateurs vont sur le site pour consulter du contenu textuel et ne regardent des vidéos qu'occasionnellement. 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 comporte à la fois du texte et des vidéos. La plupart des utilisateurs accèdent au site via la page d'accueil, puis cliquent sur les articles d'actualité. La lecture automatique des pages d'articles de presse serait autorisée en raison d'une interaction de l'utilisateur avec le domaine. Toutefois, il convient de veiller à ce que les utilisateurs ne soient pas surpris par la lecture automatique de contenu.

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

Règles Chrome Enterprise

Il est possible de modifier le comportement de la lecture automatique à l'aide des règles Chrome Enterprise pour des cas d'utilisation tels que les kiosques ou les systèmes sans surveillance. 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 règle AutoplayAllowlist vous permet de spécifier une liste d'autorisation de formats d'URL où 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 l'écrire une fois de plus ci-dessous pour ceux qui l'évoquent simplement.

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.
  });
}

Pour susciter l'intérêt des utilisateurs, vous pouvez utiliser la lecture automatique avec le son coupé et les laisser choisir de le réactiver. (voir l'exemple ci-dessous). Certains sites Web le font déjà efficacement, y compris Facebook, Instagram, Twitter et YouTube.

<video id="video" muted 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 toujours être définis de manière cohérente entre les navigateurs. Je vous recommande de vous en tenir à "click" pour le moment. Consultez le problème GitHub whatwg/html#3849.

Web audio

L'API Web Audio est accessible en lecture automatique depuis Chrome 71. Il y a quelques éléments à savoir à son sujet. Tout d'abord, il est recommandé d'attendre une interaction de l'utilisateur avant de lancer la lecture audio afin qu'il sache qu'il se passe quelque chose. 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 lors du chargement de la page, vous devez 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). AudioContext est également réactivé après un geste de l'utilisateur si start() est appelé sur un nœud associé.

// Existing code unchanged.
window. {
  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 ne pouvez également 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 déterminer si le navigateur nécessite une interaction de l'utilisateur pour lire du contenu audio, vérifiez AudioContext.state après l'avoir créé. Si la lecture est autorisée, il doit passer immédiatement à running. Sinon, la valeur sera 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.