Autoplay-Richtlinie in Chrome

Verbesserte Nutzererfahrung, minimierte Anreize zur Installation von Werbeblockern und reduzierter Datenverbrauch

Die Autoplay-Richtlinien von Chrome wurden im April 2018 geändert. Ich erkläre dir heute, warum und wie sich das auf die Videowiedergabe mit Ton auswirkt. Spoiler-Warnung: Die Nutzer werden begeistert sein!

Neue Verhaltensweisen

Wie Sie vielleicht bemerkt haben, werden für Webbrowser strengere Autoplay-Richtlinien 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. Diese Änderungen sollen Nutzern eine bessere Kontrolle über die Wiedergabe bieten und Verlagen und Webpublishern von legitimen Anwendungsfällen zugutekommen.

Die Autoplay-Richtlinien in 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. klicken oder tippen).
  • Auf dem Computer wurde der Grenzwert für den Media Engagement Index des Nutzers überschritten. Das bedeutet, dass er zuvor ein Video mit Ton abgespielt 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.

Index für das Medieninteresse

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

• Die Medienwiedergabe (Audio/Video) muss länger als sieben Sekunden sein.
• Der Ton muss vorhanden 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.

Daraus berechnet Chrome einen Wert für die Medieninteraktion, der für Websites, auf denen regelmäßig Medien wiedergegeben werden, den höchsten Wert hat. Wenn sie hoch genug ist, werden Medien nur auf Desktop-Computern automatisch wiedergegeben.

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

Wechsel der Entwickler

Als Entwickler möchten Sie möglicherweise 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 können Sie Ihre Website testen, als ob Nutzer intensiv mit Ihrer Website interagiert hätten. Die automatische Wiedergabe wäre dann immer zulässig.

• Sie können auch festlegen, dass Autoplay niemals zulässig ist. Deaktivieren Sie dazu den MEI und legen Sie fest, ob Websites mit dem höchsten MEI standardmäßig Autoplay für neue Nutzer erhalten. Aktion mit 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. Beachten Sie, dass Autoplay für iFrames mit demselben Ursprung standardmäßig zulässig ist.

<!-- 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, lehnen Aufrufe von play() ohne Nutzergeste das Versprechen mit einer DOMException NotAllowedError ab. Das Attribut „Autoplay“ wird ebenfalls ignoriert.

Beispiele

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

Beispiel 2: GlobalNewsSite.com enthält sowohl Text- als auch Videoinhalte. Die meisten Nutzer besuchen die Website für Textinhalte und sehen sich nur gelegentlich Videos an. Da der Medien-Engagement-Wert der Nutzer niedrig ist, wäre Autoplay nicht zulässig, wenn ein Nutzer direkt von einer Social-Media-Seite oder einer Suche aus 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. Die Autoplay-Funktion auf den Seiten mit Nachrichtenartikeln wäre aufgrund der Nutzerinteraktion mit der Domain zulässig. Sie sollten jedoch darauf achten, dass Nutzer nicht von automatisch wiedergegebenen Inhalten überrascht werden.

Beispiel 4:Mit MyMovieReviewBlog.com wird ein iFrame mit einem Filmtrailer eingebettet, um eine Rezension zu erstellen. Da Nutzer mit der Domain interagiert haben, um zum Blog zu gelangen, ist Autoplay zulässig. Der Blog muss diese Berechtigung jedoch explizit an den iFrame delegieren, damit die Inhalte automatisch wiedergegeben werden.

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 erfahren Sie, wie Sie die Unternehmensrichtlinien für die Autoplay-Funktion festlegen:

• Die Richtlinie AutoplayAllowed legt fest, ob Autoplay erlaubt 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

Denk daran: Gehe nicht davon aus, dass ein Video abgespielt wird, und blende keine Pause-Schaltfläche ein, wenn das Video nicht wirklich abgespielt wird. Es ist so wichtig, dass ich es für diejenigen, die den Beitrag einfach nur überfliegen, noch einmal schreibe.

Sie sollten sich immer das von der Wiedergabefunktion zurückgegebene Promise ansehen, 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 tolle Möglichkeit, Nutzer anzusprechen, ist die Verwendung der stummgeschalteten Autoplay-Funktion, bei der Nutzer selbst entscheiden lassen, ob sie die Stummschaltung aufheben möchten. (Siehe Beispiel unten.) Einige Websites tun dies bereits effektiv, 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 einheitlich in allen Browsern definiert werden. Ich empfehle dir, vorerst bei "click" zu bleiben. Weitere Informationen finden Sie unter GitHub-Problem whatwg/html#3849.

Web-Audio

Bei der Web Audio API wird Autoplay seit Chrome 71 genutzt. Dabei gibt es einiges zu beachten. 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 Aufheben der Stummschaltung hinzufügen.

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

// Existing code unchanged.
window. {
  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 das 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 ermitteln möchten, ob der Browser eine Nutzerinteraktion zur Audiowiedergabe erfordert, prüfen Sie AudioContext.state, nachdem Sie ihn erstellt haben. Wenn das Spielen erlaubt ist, sollte sofort zu running gewechselt werden. Andernfalls ist es suspended. Wenn Sie auf das statechange-Ereignis warten, 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.