Autoplay-Richtlinie in Chrome

Verbesserte Nutzerfreundlichkeit, minimierte Anreize zur Installation von Adblockern und reduzierter Datenverbrauch

François Beaufort

Die Autoplay-Richtlinien von Chrome wurden im April 2018 geändert. In diesem Artikel erkläre ich Ihnen, warum und wie sich das auf die Videowiedergabe mit Ton auswirkt. Spoiler alert: Nutzer werden begeistert sein!

Neue Verhaltensweisen

Wie du vielleicht schon bemerkt hast, werden in Webbrowsern immer strengere Richtlinien für die automatische Wiedergabe eingeführt, um die Nutzerfreundlichkeit zu verbessern, Anreize zur Installation von Werbeblockern zu minimieren und den Datenverbrauch in teuren und/oder eingeschränkten Netzwerken zu reduzieren. Mit diesen Änderungen möchten wir Nutzern mehr Kontrolle über die Wiedergabe geben und Publishern mit legitimen Anwendungsfällen helfen.

Die Autoplay-Richtlinien von Chrome sind einfach:

• Stummgeschaltete Autoplays sind immer zulässig.
• Autoplay mit Ton ist in folgenden Fällen zulässig:
  • Der Nutzer hat mit der Domain interagiert (z. B. durch Klicken oder Tippen).
  • Auf dem Computer wurde der Grenzwert für den Index für die Medieninteraktion des Nutzers überschritten. Das bedeutet, dass der Nutzer zuvor ein Video mit Ton wiedergegeben hat.
  • Der Nutzer hat die Website auf einem Mobilgerät dem Startbildschirm hinzugefügt oder auf dem Computer die PWA installiert.
• Top-Frames können die Berechtigung für die automatische Wiedergabe an ihre iFrames delegieren, um die automatische Wiedergabe mit Ton zu ermöglichen.

Media Engagement Index

Der Media Engagement Index (MEI) misst die Neigung einer Person, Medien auf einer Website zu konsumieren. Chrome verwendet ein Verhältnis von Besuchen zu wichtigen Medienwiedergabeereignissen pro Herkunft:

• Die Medienwiedergabe (Audio/Video) muss länger als sieben Sekunden sein.
• Es muss Audio vorhanden sein und die Stummschaltung muss aufgehoben sein.
• Der Tab mit dem Video ist aktiv.
• Die Größe des Videos (in Pixel) muss größer als 200 x 140 sein.

Anhand dieser Daten berechnet Chrome einen Wert für die Medieninteraktion, der auf Websites am höchsten ist, auf denen Medien regelmäßig abgespielt werden. Ist die Geschwindigkeit hoch genug, ist die automatische Wiedergabe von Medien nur auf Computern zulässig.

Die MEI eines Nutzers ist auf der internen about://media-engagement-Seite verfügbar.

Entwicklerschalter

Als Entwickler können Sie das Verhalten der Chrome-Richtlinie für die automatische Wiedergabe lokal ändern, um Ihre Website auf unterschiedliche Nutzerinteraktionen zu testen.

• Sie können die Autoplay-Richtlinie vollständig deaktivieren, indem Sie ein Befehlszeilen-Flag verwenden: chrome.exe --autoplay-policy=no-user-gesture-required. So kannst du deine Website testen, als ob Nutzer intensiv mit deiner Website interagiert hätten. Die automatische Wiedergabe wäre dann immer zulässig.

• Sie können auch festlegen, dass die automatische Wiedergabe nie erlaubt ist, indem Sie die MEI deaktivieren. Außerdem können Sie festlegen, ob Websites mit der höchsten MEI insgesamt standardmäßig die automatische Wiedergabe für neue Nutzer aktivieren. Verwenden Sie dazu Flags: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

iFrame-Delegierung

Mit einer Berechtigungsrichtlinie können Entwickler Browserfunktionen und APIs selektiv aktivieren und deaktivieren. Sobald ein Ursprung die Berechtigung für die automatische Wiedergabe erhalten hat, kann er diese Berechtigung mithilfe der Berechtigungsrichtlinie für die automatische Wiedergabe an ursprungsübergreifende iFrames delegieren. Hinweis: In Iframes mit demselben Ursprung ist die automatische Wiedergabe standardmäßig zulässig.

<!-- 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">

Wenn die Berechtigungsrichtlinie für die automatische Wiedergabe deaktiviert ist, wird bei Aufrufen von play() ohne Nutzerinteraktion das Promise mit einer NotAllowedError DOMException abgelehnt. Das Attribut „Autoplay“ wird ebenfalls ignoriert.

Beispiele

Beispiel 1:Ein Nutzer sieht sich jedes Mal eine TV-Sendung oder einen Film an, wenn er VideoSubscriptionSite.com auf seinem Laptop besucht. Da die Medieninteraktion hoch ist, ist Autoplay zulässig.

Beispiel 2: GlobalNewsSite.com enthält sowohl Text- als auch Videoinhalte. Die meisten Nutzer rufen die Website wegen Textinhalten auf und sehen sich nur gelegentlich Videos an. Der Wert für das Medien-Engagement des Nutzers ist niedrig. Daher ist die automatische Wiedergabe nicht zulässig, wenn ein Nutzer direkt von einer Seite in den sozialen Medien oder über die Suche weitergeleitet wird.

Beispiel 3:LocalNewsSite.com enthält sowohl Text- als auch Videoinhalte. Die meisten Nutzer rufen die Website über die Startseite auf und klicken dann auf die Nachrichtenartikel. Auf den Seiten mit Nachrichtenartikeln ist die automatische Wiedergabe aufgrund der Nutzerinteraktion mit der Domain zulässig. Sie sollten jedoch darauf achten, dass Nutzer nicht von automatisch wiedergegebenen Inhalten überrascht werden.

Beispiel 4:MyMovieReviewBlog.com fügt einen Iframe mit einem Filmtrailer zu einer Rezension ein. Nutzer haben mit der Domain interagiert, um zum Blog zu gelangen. Daher ist die automatische Wiedergabe zulässig. Der Blog muss dieses Berechtigung jedoch explizit an den iFrame delegieren, damit die Inhalte automatisch wiedergegeben werden.

Chrome Enterprise-Richtlinien

Mit Chrome Enterprise-Richtlinien lässt sich das automatische Wiedergabeverhalten für Anwendungsfälle wie Kioske oder unbeaufsichtigte Systeme ändern. Auf der Hilfeseite Richtlinienliste erfahren Sie, wie Sie die zu Autoplay gehörigen Unternehmensrichtlinien festlegen:

• Mit der AutoplayAllowed-Richtlinie wird festgelegt, ob die automatische Wiedergabe zulässig ist oder nicht.
• Mit der Richtlinie AutoplayAllowlist können Sie eine Zulassungsliste mit URL-Mustern angeben, bei denen Autoplay immer aktiviert ist.

Best Practices für Webentwickler

Audio-/Videoelemente

Denken Sie daran: Gehen Sie nicht davon aus, dass ein Video abgespielt wird, und zeigen Sie keine Pausenschaltfläche an, wenn das Video nicht abgespielt wird. Das ist so wichtig, dass ich es unten noch einmal schreibe, für diejenigen, die diesen Beitrag nur überfliegen.

Du solltest immer das Versprechen prüfen, das von der Wiedergabefunktion zurückgegeben wird, um festzustellen, ob es abgelehnt wurde:

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

Eine gute Möglichkeit, Nutzer zu erreichen, ist die automatische Wiedergabe mit Stummschaltung. Nutzer können dann selbst entscheiden, ob sie die Wiedergabe wieder aktivieren möchten. (Siehe Beispiel unten.) Einige Websites tun dies bereits effektiv, darunter Facebook, Instagram, Twitter und YouTube.

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

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

Ereignisse, die eine Nutzeraktivierung auslösen, müssen weiterhin einheitlich in allen Browsern definiert werden. Ich empfehle dir, vorerst bei "click" zu bleiben. Weitere Informationen finden Sie im GitHub-Problem whatwg/html#3849.

Web Audio

Die Web Audio API wird seit Chrome 71 durch Autoplay abgedeckt. Es gibt einige Dinge, die Sie dazu wissen sollten. Es empfiehlt sich, mit der Audiowiedergabe auf eine Nutzerinteraktion zu warten, damit die Nutzer wissen, dass etwas passiert. Denken Sie zum Beispiel an eine Wiedergabeschaltfläche oder einen Ein/Aus-Schalter. Je nach Ablauf der App können Sie auch eine Schaltfläche zum Stummschalten hinzufügen.

Wenn du deine AudioContext beim Seitenaufbau erstellst, musst du resume() irgendwann nach der Interaktion des Nutzers mit der Seite aufrufen (z.B. nachdem er auf eine Schaltfläche geklickt hat). Alternativ wird die AudioContext nach einer Nutzergeste fortgesetzt, wenn start() auf einem beliebigen verbundenen Knoten aufgerufen wird.

// 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');
  });
});

Sie können die AudioContext auch nur erstellen, wenn der Nutzer mit der Seite interagiert.

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

Wenn Sie feststellen möchten, ob der Browser eine Nutzerinteraktion für die Audiowiedergabe erfordert, prüfen Sie nach dem Erstellen die Option AudioContext.state. Wenn das Abspielen erlaubt ist, sollte sofort running angezeigt werden. Andernfalls ist es suspended. Wenn Sie das Ereignis statechange beobachten, können Sie Änderungen asynchron erkennen.

Ein Beispiel finden Sie in der kleinen Pull-Anfrage, mit der die Web Audio-Wiedergabe für diese Richtlinienregeln für die automatische Wiedergabe auf https://airhorner.com korrigiert wird.