Verbesserte Nutzererfahrung, minimierte Anreize zur Installation von Werbeblockern und reduzierter Datenverbrauch
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 Achtung: Die 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 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: der Media Engagement Index des Nutzers Der Grenzwert wurde überschritten, d. h., der Nutzer hat sich zuvor das Video angesehen. mit Ton.
- Der Nutzer hat die Website auf seinem Mobilgerät oder seinem Startbildschirm zu seinem Startbildschirm hinzugefügt. Sie haben die PWA auf dem Computer installiert.
- Top-Frames können die Berechtigung für die automatische Wiedergabe an ihre iFrames delegieren, Autoplay mit Ton zulassen.
Index für das Medieninteresse
Der Media Engagement Index (MEI) misst die Konsumneigung einer Person. Medien auf einer Website. Der Ansatz von Chrome basiert auf dem Verhältnis von Besuchen zu wichtigen Medien. Wiedergabeereignisse pro Ursprung:
- 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.
Daraus berechnet Chrome den Wert für das Medien-Engagement, der auf Websites am höchsten ist. auf denen regelmäßig Medien abgespielt werden. Wenn er hoch genug ist, werden die Medien Autoplay nur auf Computern.
Die MEI eines Nutzers ist auf der internen about://media-engagement-Seite verfügbar.
about://media-engagement in Chrome.
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 eure Website und die Autoplay-Funktion immer erlaubt.Sie können auch festlegen, dass Autoplay niemals zulässig ist, indem Sie MEI deaktivieren und ob Websites mit dem höchsten MEI-Wert standardmäßig Autoplay für neue Nutzer zu gewinnen. 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 für einen Ursprung Autoplay aktiviert ist kann es diese Berechtigung an ursprungsübergreifende iFrames mit dem Berechtigungsrichtlinie für Autoplay 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 Autoplay deaktiviert ist, werden play()-Aufrufe ohne
Nutzergeste lehnt das Versprechen mit einer DOMException NotAllowedError ab. Das Attribut „autoplay“ wird ebenfalls ignoriert.
Beispiele
Beispiel 1:Ein Nutzer ruft VideoSubscriptionSite.com auf seinem
eine Serie oder einen Film ansieht. Da ihr Media-Engagement-Wert
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.
Nutzer Der Media-Engagement-Wert ist niedrig, Autoplay wäre also nicht erlaubt, wenn ein Nutzer
navigiert direkt von einer Social-Media-Seite oder Suche aus.
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
Artikel. Auf den Seiten mit Nachrichtenartikeln ist die automatische Wiedergabe aufgrund der Nutzerinteraktion mit der Domain zulässig. Es muss jedoch sichergestellt werden,
von automatisch wiedergegebenen Inhalten nicht überrascht.
Beispiel 4: MyMovieReviewBlog.com fügt einen Iframe mit einem Filmtrailer zu einer Rezension ein. Nutzer interagierten mit der Domain, um zum Blog zu gelangen.
Autoplay ist zulässig. Der Blog muss dieses 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 zu ändern. für Anwendungsfälle wie Kioske oder unbeaufsichtigte Systeme. 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. Es ist so, wichtig, dass ich sie unten noch einmal für diejenigen schreibe, die einfach überfliegen Sie den Beitrag.
Sie sollten sich immer das Promise, das von der Wiedergabefunktion zurückgegeben wird, ansehen, sie wurde abgelehnt:
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, wie 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
Browser. Ich empfehle dir, vorerst bei "click" zu bleiben. Weitere Informationen finden Sie unter
GitHub-Problem whatwg/html#3849.
Web-Audio
Die Web Audio API wird seit Chrome 71 durch Autoplay abgedeckt. Dabei gibt es einiges zu beachten. Zunächst sollten Sie warten, eine Nutzerinteraktion vor dem Start der Audiowiedergabe vor dem Start der Audiowiedergabe, wenn etwas passiert. Denken Sie an ein „Spiel“ oder „An/Aus“ wechseln. 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() aufrufen.
zu einem bestimmten Zeitpunkt, nachdem der Nutzer mit der Seite interagiert hat (z.B. nachdem ein Nutzer auf
eine Schaltfläche). Alternativ wird AudioContext fortgesetzt, nachdem ein Nutzer
Touch-Geste, 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 dem
Seite.
document.querySelector('button').addEventListener('click', function() {
var context = new AudioContext();
// Setup all nodes
// ...
});
Um festzustellen, ob der Browser eine Nutzerinteraktion zur Audiowiedergabe erfordert, aktivieren Sie
AudioContext.state, nachdem Sie es erstellt haben. 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.