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: Nie można po prostu automatycznie odtwarzać 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. Chrome stosuje podejście polegające na obliczaniu stosunku liczby wizyt do liczby zdarzeń odtwarzania treści multimedialnych na danego dostawcę:

  • Czas odtwarzania treści (dźwięku lub obrazu) musi wynosić co najmniej 7 sekund.
  • Dźwięk musi być obecny i niewyciszony.
  • 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 przypadku multimediów, który jest najwyższy w przypadku witryn, w których multimedium jest regularnie odtwarzane. 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 z wewnętrznej strony about://media-engagement w Chrome.

Przełączniki dla deweloperów

Jako programista możesz lokalnie zmienić zachowanie zasad 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ł mocno zaangażowany w jej treści, 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 dotyczące uprawnień umożliwiają deweloperom 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 swoim laptopie, ogląda serial 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. Użytkownicy mają niski wynik zaangażowania w media, więc automatyczne odtwarzanie nie będzie dozwolone, jeśli użytkownik przejdzie bezpośrednio ze strony mediów 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. Automatyczne odtwarzanie na stronach artykułów będzie dozwolone, ponieważ użytkownik będzie wchodzić w interakcję 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 w celu uzupełnienia opinii. 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ć sposób działania 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 umożliwia określenie listy dozwolonych wzorców adresów URL, dla których autoodtwarzanie będzie zawsze włączone.

Sprawdzone metody dla programistów

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. W takim razie zalecam na razie pozostanie przy wersji "click". Zobacz problem na GitHubie whatwg/html#3849.

Web Audio

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 AudioContext zostanie utworzona po załadowaniu strony, będziesz musiał wywołać funkcję resume() w jakimś momencie po interakcji użytkownika ze stroną (np. po kliknięciu przez niego przycisku). Jeśli funkcja AudioContext zostanie wywołana w przypadku dowolnego załączonego węzła, zostanie wznowiona 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 sprawdzić, czy przeglądarka wymaga interakcji użytkownika, aby odtworzyć dźwięk, po utworzeniu pytania sprawdź, czy wyświetla się ikona AudioContext.state. 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.