Zasada autoodtwarzania w Chrome

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

François Beaufort
François Beaufort
GitHub

Zasady autoodtwarzania w Chrome zmieniły się w kwietniu 2018 r. Chcę wyjaśnić, dlaczego i jak wpływa to na odtwarzanie filmów z dźwiękiem. Uwaga spojler: użytkownikom się spodoba.

Liam Neeson: Znajdę cię i zatrzymam cię.
Sean Bean: Jeden nie jest po prostu autoodtwarzaniem filmów.
Internetowe memy oznaczone tagiem „autoodtwarzanie” znalezione na Imgflip i Imgur.

Nowe zachowania

Jak być może zauważyłeś, przeglądarki internetowe przechodzą na bardziej rygorystyczne zasady autoodtwarzania. Pozwoli to zwiększyć wygodę użytkowników, zminimalizować zachęty do instalowania blokad reklam oraz ograniczyć zużycie danych w kosztownych lub ograniczonych sieciach. Te zmiany mają zapewnić użytkownikom większą kontrolę nad odtwarzaniem i zapewnić wydawcom korzyści w sposób zgodny z prawem.

Zasady autoodtwarzania w Chrome są proste:

Indeks zaangażowania w media

Wskaźnik zaangażowania mediów (Media Engagement Index, MEI) mierzy skłonność użytkownika do korzystania z mediów w witrynie. Metoda Chrome określa stosunek liczby wizyt do istotnych zdarzeń odtwarzania multimediów według źródła:

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

Na tej podstawie Chrome oblicza wynik zaangażowania w media, który jest najwyższy w witrynach, na których regularnie odtwarzane są multimedia. Gdy jest wystarczająco wysoki, multimedia mogą automatycznie odtwarzać się tylko na komputerach.

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

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

Przejście dewelopera

Jako deweloper możesz zmienić działanie zasad autoodtwarzania w Chrome lokalnie, by przetestować swoją 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 poleceń: chrome.exe --autoplay-policy=no-user-gesture-required. Dzięki temu możesz przetestować witrynę tak, jakby użytkownicy byli zaangażowani w jej działanie. Autoodtwarzanie odtwarzania będzie zawsze dozwolone.

  • Możesz też wyłączyć autoodtwarzanie, wyłączając MEI i sprawdzając, czy witryny o najwyższym ogólnym wskaźniku MEI domyślnie mają włączone autoodtwarzanie w przypadku nowych użytkowników. Użyj flag: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Przekazywanie elementu iframe

Zasady uprawnień pozwalają programistom 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ć je do elementów iframe z innych domen za pomocą zasad uprawnień do autoodtwarzania. Pamiętaj, że autoodtwarzanie jest domyślnie dozwolone w elementach iframe z tej samej domeny.

<!-- 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ń do autoodtwarzania jest wyłączona, wywołania play() bez gestu użytkownika odrzucają obietnicę za pomocą wyjątku NotAllowedError DOM. Atrybut autoodtwarzania również zostanie zignorowany.

Przykłady

Przykład 1: za każdym razem, gdy użytkownik odwiedza stronę VideoSubscriptionSite.com na laptopie, ogląda program telewizyjny lub film. Ponieważ wynik zaangażowania w media jest wysoki, autoodtwarzanie jest dozwolone.

Przykład 2: GlobalNewsSite.com zawiera zarówno tekst, jak i treści wideo. Większość użytkowników odwiedza witrynę w poszukiwaniu treści tekstowych i niekiedy ogląda filmy. Wynik zaangażowania w mediach jest niski, więc autoodtwarzanie nie będzie dozwolone, jeśli użytkownik przejdzie bezpośrednio ze strony w mediach społecznościowych lub wyszukiwarki.

Przykład 3: LocalNewsSite.com zawiera zarówno tekst, jak i treści wideo. Większość użytkowników wchodzi na stronę ze strony głównej, a następnie klika artykuły z wiadomościami. Autoodtwarzanie na stronach artykułów z wiadomościami byłoby dozwolone ze względu na interakcję użytkownika z domeną. Zadbaj jednak o to, by automatycznie odtwarzane treści nie były zaskakujące.

Przykład 4: MyMovieReviewBlog.com umieszcza element iframe ze zwiastunem filmu, aby przesłać opinię. Autoodtwarzanie jest dozwolone, jeśli użytkownicy wchodzą w interakcję z domeną, aby wejść na bloga. Blog musi jednak jawnie przekazać te uprawnienia elementowi iframe, aby treść mogła być autoodtwarzana.

Zasady Chrome Enterprise

Za pomocą zasad Chrome Enterprise możesz zmienić działanie autoodtwarzania w przypadkach takich jak kioski lub systemy nienadzorowane. Informacje o tym, jak skonfigurować zasady firmowe związane z autoodtwarzaniem, znajdziesz na stronie pomocy dotyczącej listy zasad:

  • Zasada AutoplayAllowed określa, czy autoodtwarzanie jest dozwolone.
  • Zasada AutoplayAllowlist pozwala określić listę dozwolonych wzorców adresów URL, w przypadku których autoodtwarzanie będzie zawsze włączone.

Sprawdzone metody dla programistów stron internetowych

Elementy audio/wideo

Jedna rzecz, o której należy pamiętać: nie zakładaj, że film będzie odtwarzany ani nie wyświetlaj przycisku pauzy, jeśli w rzeczywistości nie odtwarza się film. To tak ważne, że wpiszę go jeszcze raz dla tych, którzy po prostu przeglądają tego posta.

Aby sprawdzić, czy wartość Promise została odrzucona przez funkcję odtwarzania, wyświetl zawsze:

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

Jednym z fajnych sposobów na zaangażowanie użytkowników jest wykorzystanie autoodtwarzania z wyciszonym dźwiękiem i pozwalanie im samodzielnie wyłączyć wyciszenie. Zobacz przykład poniżej. Już robią to niektóre strony, m.in. Facebook, Instagram, Twitter i YouTube.

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

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

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

Audio internetowe

Interfejs Web Audio API jest objęty autoodtwarzaniem od Chrome 71. Warto wiedzieć o niej kilka rzeczy. Po pierwsze, warto poczekać na interakcję użytkownika z rozpoczęciem odtwarzania dźwięku, aby wiedzieć, że coś się dzieje. Może to być na przykład przycisk „odtwórz” lub przełącznik „włącz/wyłącz”. W zależności od sposobu działania aplikacji możesz też dodać przycisk „Wyłącz wyciszenie”.

Jeśli utworzysz AudioContext podczas wczytywania strony, musisz wywołać metodę resume() w pewnym momencie po interakcji użytkownika ze stroną (np. po kliknięciu przycisku). Z kolei żądanie AudioContext zostanie wznowione po wykonaniu gestu użytkownika, jeśli w dowolnym podłączonym węźle zostanie wywołany 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 określić, czy do odtwarzania dźwięku przeglądarka wymaga interakcji użytkownika, sprawdź AudioContext.state po utworzeniu. Jeśli odtwarzanie jest dozwolone, powinno się natychmiast przełączyć na running. W przeciwnym razie ma ona wartość suspended. Jeśli nasłuchujesz zdarzenia statechange, możesz wykrywać zmiany asynchronicznie.

Aby zobaczyć przykład, wyświetl małe żądanie Pull Request, które poprawia funkcję odtwarzania dźwięku z internetu w regułach zasad autoodtwarzania w przypadku https://airhorner.com.