Autoplay-Richtlinie in Chrome

Verbesserte Nutzererfahrung, geringere Anreize zur Installation von Werbeblockern und geringerer Datenverbrauch

Die Chrome-Richtlinien für die automatische Wiedergabe wurden im April 2018 geändert. Heute erkläre ich dir, warum und wie sich das auf die Videowiedergabe mit Ton auswirkt. Achtung, Spoiler: Die Nutzer werden begeistert sein!

Neue Funktionsweisen

Wie du vielleicht bemerkt hast, werden in Webbrowsern immer strengere Autoplay-Richtlinien eingeführt, um die Nutzerfreundlichkeit zu verbessern, Anreize für die Installation von Werbeblockern zu minimieren und den Datenverbrauch in teuren und/oder eingeschränkten Netzwerken zu reduzieren. Diese Änderungen sollen Nutzern eine bessere Steuerung der Wiedergabe ermöglichen und Verlagen und Webpublishern bei legitimen Anwendungsfällen zugutekommen.

Die Autoplay-Richtlinien von Chrome sind einfach:

• Stummgeschaltetes Autoplay ist immer erlaubt.
• Autoplay mit Ton ist in folgenden Fällen zulässig:
  • Der Nutzer hat mit der Domain interagiert (klicken, tippen usw.).
  • Auf dem Computer wurde der Grenzwert für den Media Engagement Index des Nutzers überschritten. Das bedeutet, dass der Nutzer zuvor ein Video mit Ton abgespielt hat.
  • Der Nutzer hat auf einem Mobilgerät die Website zu seinem Startbildschirm hinzugefügt oder auf dem Computer die PWA installiert.
• Für Top-Frames kann die Autoplay-Berechtigung an ihre iFrames delegiert werden, um die Autoplay-Funktion mit Ton zu ermöglichen.

Media-Engagement-Index

Der Media Engagement Index (MEI) misst die Neigung einer Person, Medien auf einer Website zu konsumieren. Bei Chrome handelt es sich um das Verhältnis von Besuchen zu signifikanten Medienwiedergabeereignissen pro Ursprung:

• Die Mediennutzung (Audio/Video) muss länger als sieben Sekunden sein.
• Audio muss vorhanden und lautgeschaltet sein.
• Der Tab mit dem Video ist aktiv.
• Die Größe des Videos (in px) muss größer als 200 × 140 sein.

Auf dieser Grundlage berechnet Chrome einen Medien-Engagement-Wert, der auf Websites, auf denen regelmäßig Medien wiedergegeben werden, am höchsten ist. Ist sie hoch genug, dürfen Medien nur auf Computern automatisch wiedergegeben werden.

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

Entwicklermigration

Als Entwickler können Sie das Verhalten der Chrome-Richtlinien für die Autoplay-Funktion 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 können Sie Ihre Website testen, als ob Nutzer intensiv mit Ihrer Website interagieren würden, und die Autoplay-Funktion wäre immer erlaubt.

• Sie können auch dafür sorgen, dass Autoplay nie zugelassen wird. Deaktivieren Sie dazu MEI und geben Sie an, ob Websites mit dem höchsten MEI insgesamt Autoplay für neue Nutzer standardmäßig erhalten. So gehts mit Flags: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

iFrame-Delegierung

Mit einer Berechtigungsrichtlinie können Entwickler Browserfunktionen und APIs selektiv aktivieren und deaktivieren. Nachdem ein Ursprung die Berechtigung für die automatische Wiedergabe erhalten hat, kann er diese Berechtigung mit der Berechtigungsrichtlinie für die automatische Wiedergabe an ursprungsübergreifende iFrames delegieren. In iFrames mit derselben Quelle ist Autoplay 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 Autoplay deaktiviert ist, wird bei Aufrufen von play() ohne Nutzergeste das Promise mit der DOMException NotAllowedError abgelehnt. Auch das Attribut „Autoplay“ wird ignoriert.

Beispiele

Beispiel 1:Jedes Mal, wenn ein Nutzer VideoSubscriptionSite.com auf seinem Laptop aufruft, sieht er sich eine Serie oder einen Film an. Da die Interaktion mit den Medien hoch ist, ist Autoplay zulässig.

Beispiel 2: GlobalNewsSite.com enthält sowohl Text- als auch Videoinhalte. Die meisten Nutzer rufen die Website nur gelegentlich auf, um sich dort Textinhalte anzusehen, und sehen sich nur gelegentlich Videos an. Der Medien-Engagement-Wert der Nutzer ist niedrig. Daher wäre Autoplay nicht zulässig, wenn ein Nutzer direkt von einer Seite in einem sozialen Netzwerk oder über die Suche navigiert.

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. Autoplay auf den Seiten mit Nachrichtenartikeln wäre aufgrund einer Nutzerinteraktion mit der Domain zulässig. Sie sollten jedoch darauf achten, dass automatisch wiedergegebene Inhalte nicht überrascht werden.

Beispiel 4:MyMovieReviewBlog.com bettet einen iFrame mit einem Filmtrailer für eine Rezension ein. Nutzer haben mit der Domain interagiert, um zum Blog zu gelangen. Autoplay ist daher zulässig. Allerdings muss der Blog diese Berechtigung ausdrücklich an den iFrame delegieren, damit die Inhalte automatisch wiedergegeben werden können.

Chrome Enterprise-Richtlinien

Es ist möglich, das Autoplay-Verhalten mit Chrome-Unternehmensrichtlinien für Anwendungsfälle wie Kioske oder unbeaufsichtigte Systeme zu ändern. Auf der Hilfeseite Richtlinienliste erfährst du, wie du die Unternehmensrichtlinien für Autoplay festlegen kannst:

• Die Richtlinie AutoplayAllowed legt fest, ob Autoplay zulässig ist oder nicht.
• Mit der Richtlinie AutoplayAllowlist kannst du eine Zulassungsliste mit URL-Mustern festlegen, bei denen Autoplay immer aktiviert ist.

Best Practices für Webentwickler

Audio-/Videoelemente

Wichtig: Gehen Sie nie davon aus, dass ein Video abgespielt wird. Zeigen Sie keine Pausenschaltfläche an, wenn das Video nicht tatsächlich wiedergegeben wird. Es ist so wichtig, dass ich es unten noch einmal für alle schreibe, die sich diesen Beitrag nur überfliegen.

Sie sollten sich immer das Promise ansehen, das von der play-Funktion zurückgegeben wird, um zu prüfen, 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 anzusprechen, ist die stummgeschaltete Autoplay-Funktion, mit der die Stummschaltung aufgehoben werden kann. (siehe Beispiel unten). Einige Websites tun das bereits, z. B. Facebook, Instagram, Twitter und YouTube.

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

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

Ereignisse, die eine Nutzeraktivierung auslösen, müssen weiterhin in allen Browsern einheitlich definiert werden. Du solltest dich bis auf Weiteres bei "click" bleiben. Siehe GitHub-Problem whatwg/html#3849.

Web-Audio

Die Web Audio API wird seit Chrome 71 von Autoplay unterstützt. Dafür gibt es einige Dinge zu wissen. Es empfiehlt sich, zuerst auf eine Nutzerinteraktion zu warten, bevor Sie die Audiowiedergabe starten. So wissen Nutzer, dass etwas passiert. Denken Sie z. B. an eine Wiedergabeschaltfläche oder einen An-/Aus-Schalter. Je nach Verwendung der App können Sie auch eine Schaltfläche zur Aufhebung der Stummschaltung hinzufügen.

Wenn du die AudioContext beim Seitenaufbau erstellst, musst du resume() irgendwann nach der Interaktion des Nutzers mit der Seite aufrufen (z.B. nachdem ein Nutzer auf eine Schaltfläche geklickt hat). Alternativ wird AudioContext nach einer Touch-Geste des Nutzers fortgesetzt, wenn start() auf einem angehängten 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 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 herausfinden möchten, ob der Browser für die Audiowiedergabe eine Nutzerinteraktion erfordert, prüfen Sie nach der Erstellung AudioContext.state. Wenn die Wiedergabe erlaubt ist, sollte sofort zu running gewechselt werden. Andernfalls ist es suspended. Wenn Sie das statechange-Ereignis überwachen, können Sie Änderungen asynchron erkennen.

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