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:

• Stummgeschaltetes Autoplay ist immer erlaubt.
• Die automatische Wiedergabe mit Ton ist unter folgenden Voraussetzungen 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 seinem Mobilgerät dem Startbildschirm hinzugefügt oder die PWA auf dem Computer installiert.
• Übergeordnete Frames können die Autoplay-Berechtigung an ihre Iframes delegieren, um die automatische Wiedergabe mit Ton zuzulassen.

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 Medien (Audio/Video) müssen mindestens sieben Sekunden lang angesehen werden.
• Es muss Audio vorhanden sein und die Stummschaltung muss aufgehoben sein.
• Der Tab mit dem Video ist aktiv.
• Die Größe des Videos (in Pixeln) muss größer als 200 × 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 Seite about://media-engagement 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 mit einem Befehlszeilenflag vollständig deaktivieren: chrome.exe --autoplay-policy=no-user-gesture-required. So können Sie Ihre Website testen, als ob Nutzer intensiv mit Ihrer Website interagieren würden und die Wiedergabe immer automatisch gestartet würde.

• 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 mit der Berechtigungsrichtlinie für die automatische Wiedergabe an iframes verschiedener Ursprünge 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 der Wert für die Interaktion mit Medien 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. Allerdings sollten Nutzer nicht von automatisch abgespielten 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 AutoplayAllowlist-Richtlinie können Sie eine Zulassungsliste mit URL-Mustern angeben, für die 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 den Versuch prüfen, der von der Wiedergabefunktion zurückgegeben wird, um festzustellen, ob er 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 die Nutzeraktivierung auslösen, müssen noch plattformübergreifend definiert werden. Ich würde Ihnen empfehlen, 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, zuerst auf eine Nutzerinteraktion zu warten, bevor die Audiowiedergabe gestartet wird, damit 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 Sie AudioContext beim Laden der Seite erstellen, müssen Sie resume() einige Zeit nach der Nutzerinteraktion mit der Seite aufrufen (z.B. nachdem ein Nutzer 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 zum Abspielen von Audio 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 ist der kleine Pull-Request, mit dem die Web Audio-Wiedergabe für diese Richtlinien für die automatische Wiedergabe für https://airhorner.com korrigiert wird.