Zasada autoodtwarzania w Chrome

Większa wygoda użytkowników, mniejsze zachęty do instalowania blokad reklam i zmniejszone zużycie danych

François Beaufort

GitHub

Uwaga: zasady dotyczące autoodtwarzania wprowadzone w Chrome 66 dotyczące elementów audio i wideo skutecznie blokują około połowy niechcianych autoodtwarzania multimediów w Chrome. W przypadku interfejsu Web Audio API w Chrome 71 wprowadziliśmy zasadę autoodtwarzania. Dotyczy to gier internetowych, niektórych aplikacji WebRTC oraz innych stron internetowych korzystających z funkcji audio. Więcej informacji znajdziesz poniżej w sekcji Web Audio API.

W kwietniu 2018 r. zmieniły się zasady dotyczące autoodtwarzania w Chrome. Teraz powiem Ci, dlaczego i jak wpływa to na odtwarzanie filmów z dźwiękiem. Uwaga spoiler: użytkownikom to się spodoba!

Internetowe memy oznaczone tagiem „autoodtwarzanie” znalezione na stronach Imgflip i Imgur.

Nowe zachowania

Jak być może zauważysz, przeglądarki internetowe zmierzają w kierunku bardziej rygorystycznych zasad autoodtwarzania, aby poprawić wrażenia użytkowników, zminimalizować zachęty do instalowania blokad reklam i ograniczyć zużycie danych w przypadku kosztownych lub z ograniczeniami sieci. Zmiany te mają zapewnić użytkownikom większą kontrolę nad odtwarzaniem i pomóc wydawcom w uzasadnionych przypadkach użycia.

Zasady autoodtwarzania w Chrome są proste:

• Wyciszone autoodtwarzanie jest zawsze dozwolone.
• Autoodtwarzanie z dźwiękiem jest dozwolone, jeśli:
  • Użytkownik wszedł w interakcję z domeną (kliknął, dotknął itd.).
  • Na komputerach limit indeksu zaangażowania w media został przekroczony, co oznacza, że użytkownik wcześniej odtworzył film z dźwiękiem.
  • użytkownik dodał witrynę do ekranu głównego na urządzeniu mobilnym lub zainstalował PWA na komputerze;
• Górne klatki mogą przekazywać uprawnienia do autoodtwarzania do elementów iframe, aby umożliwić autoodtwarzanie z dźwiękiem.

Indeks zaangażowania w media

Wskaźnik zaangażowania mediów (MEI) mierzy skłonność użytkowników do korzystania z multimediów w witrynie. W Chrome stosunek liczby wizyt do liczby istotnych zdarzeń odtwarzania multimediów według źródła:

• Słuchanie multimediów (audio/wideo) musi być dłuższe niż 7 sekund.
• Dźwięk musi być dostępny i wyłączony.
• Karta z filmem jest aktywna.
• Rozmiar filmu (w pikselach) musi być większy niż 200 x 140.

Na tej podstawie Chrome oblicza wskaźnik zaangażowania w mediach, który jest najwyższy w witrynach, w których regularnie odtwarzane są treści multimedialne. Gdy jest dostatecznie wysoki, multimedia mogą się odtwarzać automatycznie tylko na komputerach.

Numer MEI użytkownika jest dostępny na wewnętrznej stronie about://media-engagement.

Zrzut ekranu przedstawiający wewnętrzną stronę about://media-engagement w Chrome.

Przełączniki dewelopera

Jako programista możesz zmienić działanie zasad autoodtwarzania w Chrome lokalnie, aby przetestować witrynę pod kątem różnych poziomów zaangażowania użytkowników.

• Możesz całkowicie wyłączyć zasadę autoodtwarzania, używając flagi wiersza polecenia: chrome.exe --autoplay-policy=no-user-gesture-required. Umożliwia to testowanie witryny pod kątem dużego zaangażowania użytkowników, a autoodtwarzanie jest zawsze dozwolone.

• Możesz też wyłączyć MEI i upewnić się, że autoodtwarzanie nigdy nie będzie dozwolone, i określić, czy witryny o najwyższym ogólnym wskaźniku MEI będą domyślnie odtwarzane w przypadku nowych użytkowników. Zrób to z flagami: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Przekazywanie dostępu do elementu iframe

Zasada uprawnień pozwala deweloperom na selektywne włączanie i wyłączanie funkcji przeglądarki oraz interfejsów API. Gdy źródło otrzyma uprawnienia do autoodtwarzania, może przekazać to uprawnienie do elementów iframe z innych domen za pomocą zasady uprawnień dotyczących autoodtwarzania. Pamiętaj, że autoodtwarzanie jest domyślnie dozwolone w elementach iframe z tego samego źródła.

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

Gdy zasada uprawnień dla autoodtwarzania jest wyłączona, wywołania play() bez gestu użytkownika odrzucają obietnicę za pomocą wyjątku DOMEx NotAllowedError. Atrybut autoodtwarzania również będzie ignorowany.

Ostrzeżenie: w przypadku starszych artykułów nieprawidłowo zalecamy używanie atrybutu gesture=media, który nie jest obsługiwany.

Przykłady

Przykład 1: za każdym razem, gdy użytkownik odwiedza VideoSubscriptionSite.com na laptopie, ogląda program telewizyjny lub film. Ponieważ ich wskaźnik zaangażowania w mediach jest wysoki, dopuszczalne jest autoodtwarzanie.

Przykład 2: GlobalNewsSite.com zawiera zarówno tekst, jak i film. Większość użytkowników przegląda witrynę tylko w formie tekstowej i ogląda filmy rzadko. Wynik zaangażowania użytkowników w mediach jest niski, więc autoodtwarzanie nie będzie dozwolone, jeśli użytkownik przejdzie bezpośrednio ze strony mediów społecznościowych lub z wyszukiwarki.

Przykład 3: LocalNewsSite.com zawiera zarówno tekst, jak i film. Większość użytkowników wchodzi na stronę przez stronę główną i klika artykuły. Autoodtwarzanie na stronach z wiadomościami byłoby dozwolone ze względu na interakcję użytkownika z domeną. Trzeba jednak dbać o to, żeby użytkownicy nie byli zaskoczeni autoodtwarzaniem treści.

Przykład 4: MyMovieReviewBlog.com umieszcza element iframe ze zwiastunem filmu, który zawiera recenzję. Aby wejść na bloga, użytkownicy wchodzili w interakcje z domeną, więc autoodtwarzanie jest dozwolone. Blog musi jednak wyraźnie przekazać to uprawnienie do elementu iframe, by treść mogła się autoodtwarzać.

Zasady Chrome Enterprise

Działanie autoodtwarzania można zmienić za pomocą zasad korporacyjnych Chrome w przypadkach użycia takich jak kioski lub systemy porzucone. Sprawdź na stronie pomocy Lista zasad, jak ustawić zasady firmowe związane z autoodtwarzaniem:

• Zasada AutoplayAllowed określa, czy autoodtwarzanie jest dozwolone.
• Zasada AutoplayAllowlist umożliwia określenie listy dozwolonych wzorców adresów URL, w których autoodtwarzanie ma być zawsze włączone.

Sprawdzone metody dla programistów stron internetowych

Elementy audio/wideo

Pamiętaj o tym: nigdy nie zakładaj, że film będzie się odtwarzał, ani nie wyświetlaj przycisku pauzy, gdy film nie jest odtwarzany. Jest tak ważne, że napiszę to jeszcze raz poniżej, by ułatwić czytanie tego posta.

Ważne: nie zakładaj, że film zacznie się odtwarzać. Nie wyświetlaj też przycisku pauzy, gdy film nie jest odtwarzany.

Aby sprawdzić, czy została odrzucona, zawsze sprawdzaj wartość elementu Promise zwracaną przez funkcję odtwarzania:

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

Uwaga: nie odtwarzaj reklam pełnoekranowych bez pokazywania elementów sterujących odtwarzaniem multimediów, ponieważ mogą one nie odtwarzać się automatycznie, a użytkownicy nie będą mogli rozpocząć odtwarzania.

Dobrym sposobem na zwiększenie zaangażowania użytkowników jest włączenie wyciszonego autoodtwarzania i pozostawienie im wyłączenia wyciszenia. Zobacz przykład poniżej. Niektóre strony internetowe, np. Facebook, Instagram, Twitter i YouTube, już robią to skutecznie.

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

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

Zdarzenia, które aktywują aktywację użytkownika, nadal muszą być spójnie zdefiniowane w różnych przeglądarkach. Tymczasem zalecamy korzystanie z usługi "click". Zapoznaj się z problemem z GitHubem whatwg/html#3849.

Audio w witrynach

Interfejs Web Audio API jest objęty funkcją autoodtwarzania od wersji Chrome 71. Jest kilka przydatnych informacji na jego temat. Po pierwsze warto poczekać z rozpoczęciem odtwarzania dźwięku na jakiś czas na interakcję, aby użytkownik wiedział, co się dzieje. Pomyśl np. o przycisku odtwarzania lub przełączniku „wł./wył.”. W zależności od działania aplikacji możesz też dodać przycisk wyłączenia wyciszenia.

Uwaga: jeśli zdarzenie AudioContext zostanie utworzone, zanim dokument otrzyma gest użytkownika, zostanie utworzony w stanie „zawieszone”. Po wykonaniu gestu użytkownika trzeba będzie wywołać metodę resume().

Jeśli utworzysz AudioContext podczas wczytywania strony, musisz wywołać resume() jakiś czas po interakcji użytkownika ze stroną (np. po kliknięciu przycisku). Zamiast tego AudioContext zostanie wznowiona po wykonaniu gestu użytkownika, jeśli w dowolnym podłączonym węźle zostanie wywołana właściwość start().

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

AudioContext możesz też utworzyć tylko wtedy, gdy użytkownik wejdzie w interakcję ze stroną.

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

Aby sprawdzić, czy do odtwarzania dźwięku przeglądarka wymaga interakcji użytkownika, po jego utworzeniu sprawdź AudioContext.state. Jeśli odtwarzanie jest dozwolone, powinno natychmiast się przełączyć na running. W przeciwnym razie będzie to suspended. Jeśli nasłuchujesz zdarzenia statechange, możesz wykrywać zmiany asynchronicznie.

Aby zobaczyć przykład, zapoznaj się z niewielkim żądaniem pobierania, które poprawia odtwarzanie dźwięku z internetu w przypadku tych reguł zasad autoodtwarzania dla https://airhorner.com.

Uwaga: podsumowanie funkcji autoodtwarzania w Chrome znajdziesz na stronie Chromium.