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

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. Spojler alert: użytkownikom to na pewno spodobają się!

Liam Neeson: Znajdę cię i zatrzymam cię.
Sean Bean: Jeden nie jest po prostu autoodtwarzaniem filmów.
Memy internetowe z tagiem „autoodtwarzanie” znalezione w 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ę:

  • 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. w którym regularnie odtwarzane są multimedia. Przy dostatecznie wysokiej wartości mogą automatycznie odtwarzać treści tylko na komputerach.

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

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

Przejście dewelopera

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

Delegowanie iframe

Zasada uprawnień umożliwia programistom selektywne włączanie i wyłączanie funkcje i interfejsy API przeglądarki. Gdy źródło otrzyma autoodtwarzanie uprawnienia, może przekazać je elementom iframe z innych domen za pomocą tagu uprawnieniami do autoodtwarzania. 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 zasada uprawnień do autoodtwarzania jest wyłączona, wywołania funkcji play() bez gest użytkownika odrzuci obietnicę z wyjątkiem DOMWyjątek NotAllowedError. oraz atrybut autoodtwarzania również zostanie zignorowany.

Przykłady

Przykład 1: za każdym razem, gdy użytkownik odwiedzi stronę VideoSubscriptionSite.com na swojej oglądają film lub program telewizyjny na laptopie. Wynik zaangażowania w media 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. 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. Autoodtwarzanie na stronach artykułów z wiadomościami byłoby dozwolone ze względu na użytkownika interakcji z domeną. Należy jednak zadbać o to, aby użytkownicy nie są zaskoczeniem odtwarzaniem treści automatycznie.

Przykład 4: MyMovieReviewBlog.com umieszcza element iframe ze zwiastunem filmu w celu z recenzją. 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

Można zmienić działanie autoodtwarzania za pomocą zasad Chrome Enterprise do zastosowań takich jak kioski lub systemy nienadzorowane. Zapoznaj się z Zasadami Wyświetl listę pomocy, aby dowiedzieć się, jak skonfigurować grupę związaną z autoodtwarzaniem zasady:

  • Zasada AutoplayAllowed określa, czy jest dozwolone lub niedozwolone.
  • Zasada AutoplayAllowlist umożliwia: określ listę dozwolonych wzorców adresów URL, w przypadku których autoodtwarzanie będzie zawsze włączone.

Sprawdzone metody dla programistów

Elementy audio/wideo

Rzeczy, o których trzeba pamiętać: nie zakładaj, że film zostanie odtworzony. Nie pokazuj przycisku wstrzymania, gdy film się nie odtwarza. Jest to tak ważne, że napiszę to jeszcze raz poniżej dla osób, które po prostu przewijają ten post.

Aby sprawdzić, czy funkcja Promise zwracana przez funkcję odtwarzania zostało 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. Zobacz 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 aktywują użytkownika, muszą być spójnie zdefiniowane w przeglądarki. W takim razie zalecam na razie pozostanie przy wersji "click". Zobacz Problem z GitHubem Whatwg/html#3849.

Audio internetowe

Od wersji 71 Chrome interfejs Web Audio API jest obsługiwany przez automatyczne odtwarzanie. Jest kilka kwestii, które warto wiedzieć. Po pierwsze, warto poczekać interakcji użytkownika przed rozpoczęciem odtwarzania dźwięku. ż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, zostanie wznowiona po wykonaniu przez użytkownika odpowiedniego gestu.

// 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ę 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 dozwolone jest odtwarzanie, natychmiast przełącz na running. W przeciwnym razie będzie to suspended. Jeśli słuchasz do 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.