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 changé en avril 2018. Je vais vous expliquer pourquoi et comment cela affecte la lecture vidéo avec du son. Avertissement : 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.
Des mèmes Internet tagués "autoplay" 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 :

  • La lecture automatique avec le son désactivé est toujours autorisée.
  • La lecture automatique avec le son est autorisée dans les cas suivants: <ph type="x-smartling-placeholder">
  • Les cadres supérieurs peuvent déléguer l'autorisation de lecture automatique à leurs iFrames pour autoriser la lecture automatique avec le son

Indice d'interaction avec les mé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 contenant 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. Lorsqu'il est suffisamment élevé, le média être autorisé à lire automatiquement sur ordinateur uniquement.

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

<ph type="x-smartling-placeholder">
</ph> Capture d&#39;é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 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'une ligne de commande indicateur: chrome.exe --autoplay-policy=no-user-gesture-required Cela vous permet de tester votre site Web comme si l'utilisateur était fortement engagé avec votre site et que la lecture automatique était toujours autorisée.

  • Vous pouvez également vous assurer que la lecture automatique n'est jamais autorisée en désactivant les MEI et si les sites présentant les MEI globaux les plus élevés sont lus automatiquement par défaut pour de nouveaux utilisateurs. Utilisez des indicateurs pour effectuer cette opération: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Délégation d'iFrame

Une règle d'autorisation permet aux développeurs d'activer et de désactiver de manière sélective. des fonctionnalités de navigateur et des API. Une fois qu'une origine a reçu la lecture automatique il peut déléguer cette autorisation aux iFrames multi-origines avec règle d'autorisation pour la lecture automatique. Notez que la lecture automatique est autorisée par défaut sur des cadres 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 Un geste de l'utilisateur rejette la promesse avec une exception DOMException 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. Étant donné que le score d'engagement média élevée, 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 multimédia des utilisateurs est faible. Par conséquent, la lecture automatique n'est pas autorisée si un utilisateur accède directement à 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 actualités articles. La lecture automatique des pages d'articles de presse serait autorisée à cause de l'utilisateur avec le domaine. Toutefois, il convient de 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 un avis. Comme les utilisateurs interagissaient avec le domaine pour accéder au blog, la lecture automatique est autorisée. Cependant, le blog doit déléguer explicitement à l'iFrame pour activer la lecture automatique du contenu.

Règles Chrome Enterprise

Les règles Chrome Enterprise permettent de modifier le comportement de la lecture automatique pour des cas d'utilisation tels que les kiosques ou les systèmes sans surveillance. Consultez le Règlement Liste pour découvrir comment configurer la lecture automatique de l'entreprise règles:

  • La règle AutoplayAllowed détermine si la lecture automatique est autorisée ou non.
  • La règle AutoplayAllowlist vous permet d'effectuer les actions suivantes : définir 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 n'affichent pas de bouton de pause lorsque la vidéo n'est pas en cours de lecture. Il est tellement il est important de l'écrire une fois de plus ci-dessous pour ceux qui se contentent parcourir ce post.

Vous devez toujours vérifier la promesse renvoyée par la fonction de lecture pour voir si il a été refusé:

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 pour 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 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 toujours être définis de manière cohérente des navigateurs. Je vous recommande donc de vous en tenir à "click" pour le moment. Voir Problème GitHub whatwg/html#3849.

Web audio

L'API Web Audio est couverte par la lecture automatique depuis Chrome 71. Il y a quelques éléments à savoir à son sujet. Tout d'abord, il est recommandé d'attendre une interaction avec l'utilisateur avant de lancer la lecture audio afin que les utilisateurs soient au courant si quelque chose se passe. Pensez à une « lecture » ou "Marche/Arrêt" par exemple. Vous pouvez également ajouter un bouton "Désactiver le son" en fonction du 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). Le AudioContext sera également réactivé après qu'un utilisateur geste si start() est appelé sur n'importe quel 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 ne pouvez également créer le AudioContext que lorsque l'utilisateur interagit avec la .

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 sa création. Si la lecture est autorisée, elle doit passer immédiatement à 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 les problèmes Lecture de contenus audio Web conformément aux règles de lecture automatique pour https://airhorner.com