Règle de lecture automatique dans Chrome

Amélioration de l'expérience utilisateur, réduction des incitations à l'installation de 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, et je vais vous expliquer pourquoi et comment cela affecte la lecture vidéo avec le son. Alerte spoiler: les utilisateurs vont adorer !

Je vais te trouver et je vais t'arrêter.
Sean Bean: L'un ne se contente pas de lire automatiquement les vidéos.
Mèmes Internet marqués "autoplay" 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 minimiser 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 à offrir des avantages aux éditeurs ayant des cas d'utilisation légitimes.

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

Indice d'engagement média

L'indice d'engagement média (MEI) mesure la propension d'un individu à consommer des médias sur un site. L'approche de Chrome repose sur le ratio entre les visites et les é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.
  • Le son doit être présent et le son doit être réactivé.
  • L'onglet contenant la vidéo est actif.
  • La taille de la vidéo (en pixels) 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ù des contenus multimédias sont lus régulièrement. Lorsqu'il est suffisamment élevé, la lecture automatique du contenu multimédia est autorisée uniquement 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 commutateurs pour les développeurs

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

  • Vous pouvez désactiver entièrement 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 l'utilisateur était fortement intéressé par votre site, et la lecture automatique de la vidéo 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 indiquant si les sites présentant le MEI global le plus élevé bénéficient d'une lecture automatique par défaut pour les nouveaux utilisateurs. Effectuer cette opération avec des indicateurs: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Délégation iFrame

Une stratégie d'autorisations 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 la déléguer à des iFrames multi-origines à l'aide de la règle d'autorisation pour la lecture automatique. Notez que la lecture automatique est autorisée par défaut sur 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">

Si 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 DOMException NotAllowedError. L'attribut lecture automatique est également ignoré.

Exemples

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

Exemple 2:GlobalNewsSite.com comporte à la fois du texte et du contenu vidéo. La plupart des utilisateurs se rendent sur le site pour trouver du contenu textuel et ne regardent des vidéos qu'occasionnellement. Le score d'engagement médiatique des utilisateurs est faible. La lecture automatique n'est donc pas autorisée si un utilisateur accède directement à une page de réseaux sociaux ou à une recherche.

Exemple 3:LocalNewsSite.com comporte à la fois du texte et du contenu 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 des pages d'articles d'actualités serait autorisée en raison de l'interaction de l'utilisateur avec le domaine. Cependant, vous devez veiller à ce que les utilisateurs ne soient pas surpris par la lecture automatique du contenu.

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

Règles Chrome Enterprise

Il est possible de modifier le comportement de lecture automatique à l'aide des règles d'entreprise Chrome pour des cas d'utilisation tels que les kiosques ou les systèmes autonomes. 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 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 supposez pas qu'une vidéo va être lue 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 encore une fois ci-dessous pour ceux qui l'ont parcourue.

Vous devez toujours consulter la promesse renvoyée par la fonction de lecture pour voir si elle a été rejeté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 les laisser choisir de réactiver le son en activant la lecture automatique avec le son coupé. (voir l'exemple ci-dessous). Certains sites Web le font déjà efficacement, comme 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. Pour en savoir plus, consultez l'article GitHub issue whatwg/html#3849 (Problème GitHub :

Audio pour le Web

L'API Web Audio est compatible avec la lecture automatique depuis Chrome 71. Il y a quelques choses à savoir à son sujet. Tout d'abord, il est recommandé d'attendre une interaction de l'utilisateur avant de lancer la lecture audio afin que celui-ci soit informé de ce qui se passe. Pensez à un bouton « lecture » ou « bouton Marche/Arrêt », par exemple. Vous pouvez également ajouter un bouton "Réactiver le son" en fonction du flux de l'application.

Si vous créez votre AudioContext lors du chargement de la page, vous devrez appeler resume() après que l'utilisateur a interagi avec la page (par exemple, après avoir cliqué sur un bouton). Le AudioContext sera également réactivé après un geste de l'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 créer l'AudioContext uniquement lorsque l'utilisateur interagit avec la page.

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

Pour détecter 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 immédiatement passer à 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 courte demande d'extraction qui corrige la lecture de contenu audio sur le Web pour ces règles de règles de lecture automatique pour https://airhorner.com.