Zasada autoodtwarzania w Chrome

Lepsze wrażenia użytkowników, ograniczenie zachęt do instalowania blokujących reklam i zmniejszenie zużycia danych

François Beaufort
François Beaufort
GitHub

W kwietniu 2018 r. zmieniły się zasady dotyczące automatycznego odtwarzania w Chrome. W tym artykule wyjaśnię, dlaczego i jak wpłyną one na odtwarzanie filmów z dźwiękiem. Uwaga na spoilery: użytkownicy je pokochają.

Liam Neeson: Znajdę cię i zatrzymam.
Sean Bean: Jeden nie jest po prostu autoodtwarzaniem filmów.
Memy internetowe otagowane jako „autoodtwarzanie” znalezione na Imgflip i Imgur.

Nowe zachowania

Jak zauważysz, przeglądarki stosują coraz bardziej rygorystyczne zasady dotyczące automatycznego odtwarzania, aby poprawić wrażenia użytkowników, zminimalizować zachęty do instalowania blokujących reklam i zredukować zużycie danych w droższych lub ograniczonych sieciach. Te zmiany mają na celu zapewnienie użytkownikom większej kontroli nad odtwarzaniem oraz korzyści wydawcom w przypadku uzasadnionego użycia.

Zasady automatycznego odtwarzania w Chrome są proste:

Indeks zaangażowania w media

Indeks zaangażowania w multimedia (MEI) mierzy skłonność użytkownika do korzystania z multimediów w witrynie. Metoda Chrome określa stosunek wizyt do liczby zdarzeń odtwarzania multimediów według źródła:

  • Czas odtwarzania treści (dźwięku lub obrazu) musi wynosić co najmniej 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ą być automatycznie odtwarzane tylko na komputerach.

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

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

Przełączniki dla deweloperów

Jako programista możesz lokalnie zmienić zasady dotyczące automatycznego odtwarzania w Chrome, aby 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ć swoją witrynę tak, jakby użytkownik był bardzo zainteresowany jej treściami, a odtwarzanie automatyczne było zawsze dozwolone.

  • Możesz też wyłączyć automatyczne odtwarzanie, wyłączając MEI, oraz określić, czy witryny z najwyższym ogólnym MEI mają domyślnie włączone automatyczne odtwarzanie dla nowych użytkowników. Zrób to za pomocą flag: chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies.

Delegowanie iframe

Zasady uprawnień pozwalają programistom na selektywne włączanie i wyłączanie funkcji przeglądarki oraz interfejsów API. Gdy źródło otrzyma uprawnienie do automatycznego odtwarzania, może je delegować do elementów iframe w innych domenach zgodnie z zasadami dotyczącymi uprawnień do automatycznego odtwarzania. Pamiętaj, że autoodtwarzanie jest domyślnie dozwolone w przypadku elementów 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 zasady dotyczące uprawnień do automatycznego odtwarzania są wyłączone, wywołania play() bez działania użytkownika będą odrzucać obietnicę za pomocą wyjątku NotAllowedError DOMException. Atrybut autoodtwarzania będzie też ignorowany.

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ż ich wynik zaangażowania w multimedia jest wysoki, automatyczne odtwarzanie jest dozwolone.

Przykład 2: GlobalNewsSite.com zawiera zarówno tekst, jak i treści wideo. Większość użytkowników odwiedza witrynę ze względu na tekst, a filmy oglądają tylko od czasu do czasu. 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ę przez stronę główną, a potem klika artykuły. Autoodtwarzanie na stronach artykułów z wiadomościami byłoby dozwolone ze względu na interakcję użytkownika z domeną. Należy jednak zadbać o to, aby użytkownicy nie byli zaskoczeni automatycznie odtwarzanymi treściami.

Przykład 4: MyMovieReviewBlog.com umieszcza element iframe ze zwiastunem filmu, aby uzupełnić opinię. Użytkownicy weszli w interakcję z domeną, aby dostać się do bloga, więc autoodtwarzanie jest dozwolone. Aby jednak treści mogły odtwarzać się automatycznie, blog musi wyraźnie przekazać to uprawnienie do elementu iframe.

Zasady Chrome Enterprise

Za pomocą zasad Chrome Enterprise można zmienić zachowanie automatycznego odtwarzania w przypadku takich zastosowań jak kioski czy systemy bez obsługi. Aby dowiedzieć się, jak skonfigurować zasady dotyczące autoodtwarzania, otwórz stronę pomocy Lista 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

Pamiętaj, że nie należy zakładać, że film będzie odtwarzany, i nie pokazuj przycisku pauzy, gdy film nie jest odtwarzany. Jest to tak ważne, że napiszę to jeszcze raz poniżej dla osób, które po prostu przewijają ten post.

Zawsze sprawdzaj obietnice zwracane przez funkcję play, aby sprawdzić, czy zostały odrzucone:

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 ciekawych sposobów na zaangażowanie użytkowników jest użycie wyciszonego autoodtwarzania i umożliwienie im odblokowania dźwięku. (patrz przykład poniżej). Niektóre witryny już to skutecznie robią, w tym Facebook, Instagram, Twitter i YouTube.

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

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

Zdarzenia, które uruchamiają aktywację użytkownika, muszą być zdefiniowane w sposób spójny w różnych przeglądarkach. Na razie zalecam korzystanie z usługi "click". Zobacz problem na GitHubie whatwg/html#3849.

Dźwięk internetowy

Od wersji 71 Chrome interfejs Web Audio API obsługuje automatyczne odtwarzanie. Jest kilka kwestii, które warto wiedzieć. Po pierwsze, przed rozpoczęciem odtwarzania dźwięku warto poczekać na reakcję użytkownika, aby poinformować go, że coś się dzieje. Pomyśl na przykład o przycisku „odtwórz” lub przełączniku „włącz/wyłącz”. W zależności od przebiegu aplikacji możesz też dodać przycisk „Wycisz”.

Jeśli funkcja AudioContext jest tworzona po załadowaniu strony, musisz wywołać funkcję resume() po tym, jak użytkownik wejdzie w interakcję ze stroną (np. kliknie przycisk). Jeśli funkcja AudioContext zostanie wywołana w przypadku dowolnego załączonego węzła, będzie kontynuowana po wykonaniu przez użytkownika gestu.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');
  });
});

Możesz też utworzyć AudioContext tylko wtedy, gdy użytkownik wejdzie na 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 natychmiast przejść do 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 małą prośbą o przechwycenie, która rozwiązuje problem z odtwarzaniem dźwięku w internecie w przypadku tych reguł zasad dotyczących automatycznego odtwarzania na stronie https://airhorner.com.