Wyciszone autoodtwarzanie na urządzeniach mobilnych – pożegnaj się z utworami na płótnie i animowanymi GIF-ami.

Sam Dutton

Chrome na Androida w wersji 53 i nowszych obsługuje autoodtwarzanie filmów z wyciszeniem dźwięku. Odtwarzanie elementu wideo rozpocznie się automatycznie, gdy pojawi się on w widoku, jeśli ustawione są opcje autoplay i muted. Odtwarzanie wyciszonych filmów można rozpocząć za pomocą play(). Wcześniej odtwarzanie na urządzeniach mobilnych musiało być inicjowane przez użytkownika, niezależnie od stanu wyciszenia.

<video playsinline autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

Aby zobaczyć, jak to działa, otwórz ten przykład. Odtwarzanie filmu muted rozpoczyna się automatycznie w Chrome 53 lub nowszej wersji.

Zrzut ekranu z odtwarzacza wideo

Dodatkowo odtwarzanie z wyciszonym dźwiękiem można teraz rozpocząć za pomocą metody play(). Wcześniej play() inicjowało odtwarzanie tylko wtedy, gdy użytkownik wykonał jakąś czynność, np. kliknął przycisk. Porównaj te 2 demonstracje na Androidzie – najpierw w Chrome 53, a potem w starszej wersji:

Zalecamy używanie atrybutu autoplay, a metody play() tylko w razie potrzeby.

Można wyciszyć film za pomocą kodu w reakcji na gest użytkownika, np. click, ale jeśli spróbujesz wyciszyć film za pomocą kodu bez użycia gestu, odtwarzanie zostanie wstrzymane.

Zmiana muted autoplay umożliwi też użycie play() z elementem video, który nie został utworzony w DOM, np. do obsługi odtwarzania WebGL.

Metoda play() zwraca obietnicę, której można użyć do sprawdzenia, czy włączone jest automatyczne odtwarzanie z wyciszonym dźwiękiem. Przykład takiej strony znajdziesz na stronie simpl.info/video/scripted.

Dlaczego wprowadzamy tę zmianę?

Automatyczne odtwarzanie było wyłączone w poprzednich wersjach Chrome na Androida, ponieważ może być uciążliwe, pochłaniać dużo danych i nie podobać się wielu użytkownikom.

Wyłączenie automatycznego odtwarzania miało niezamierzony skutek w postaci zmuszenia deweloperów do korzystania z alternatyw, takich jak animowane GIF-y, a także do stosowania <canvas> i <img>. Te techniki są dużo gorsze niż zoptymalizowane filmy wideo pod względem zużycia energii, wydajności, wymagań związanych z przepustowością, kosztami danych i wykorzystania pamięci. Filmy mogą zapewniać wyższą jakość niż animowane GIF-y, a także znacznie lepszą kompresję: około 10 razy w przypadku średniej jakości i do 100 razy w przypadku najlepszej jakości. Dekodowanie wideo w JavaScript jest możliwe, ale bardzo obciąża baterię.

Porównaj te elementy – pierwszy to film, a drugi animowany GIF:

Odtwarzanie klipu wideo.

Wyglądają one podobnie, ale film ma rozmiar poniżej 200 KB, a animowany GIF ma ponad 900 KB.

Chrome i inni dostawcy przeglądarek są bardzo ostrożni, jeśli chodzi o przepustowość użytkownika. W wielu przypadkach wysoki koszt danych jest dla wielu użytkowników większym problemem niż słabe połączenie z internetem. Biorąc pod uwagę powszechne obejście problemu, nie można zablokować wyciszonego autoodtwarzania, dlatego najlepszym rozwiązaniem jest zaoferowanie dobrych interfejsów API i wartości domyślnych.

Internet coraz bardziej koncentruje się na mediach. Projektanci i programiści stale znajdują nowe i nieprzewidziane sposoby korzystania z filmów. Chcą też, aby na różnych platformach działały one w podobny sposób, np. gdy używają filmów tła jako elementu projektu. Wyciszone autoodtwarzanie włącza takie funkcje na urządzeniach mobilnych i komputerach.

Najdrobniejsze punkty

  • Z punktu widzenia ułatwień dostępu automatyczne odtwarzanie może być szczególnie problematyczne. Chrome 53 i nowsze wersje na Androida zawierają ustawienie, które pozwala całkowicie wyłączyć autoodtwarzanie. W ustawieniach multimediów wybierz Autoodtwarzanie.
  • Ta zmiana nie ma wpływu na element audio: autoodtwarzanie jest nadal wyłączone w Chrome na urządzeniach z Androidem, ponieważ autoodtwarzanie z dźwiękiem nie ma sensu w przypadku odtwarzania dźwięku.
  • W przypadku włączonego trybu oszczędzania danych autoodtwarzanie nie jest dostępne. Jeśli tryb Oszczędzanie danych jest włączony, autoodtwarzanie jest wyłączone w ustawieniach multimediów.
  • Autoodtwarzanie z wyciszeniem będzie działać w przypadku każdego widocznego elementu wideo w dowolnym widocznym dokumencie, iframe lub innym.
  • Pamiętaj, że aby skorzystać z nowego zachowania, musisz dodać muted i autoplay: porównaj simpl.info/video z simpl.info/video/muted.

Pomoc

  • Automatyczne odtwarzanie z wyciszonym dźwiękiem jest obsługiwane w Safari w systemie iOS 10 i nowszych.
  • Autoodtwarzanie (wyciszone i wyłączone) jest już obsługiwane w przeglądarkach na Androida w Firefoksie i UC Browser: nie blokują one żadnego rodzaju autoodtwarzania.

Więcej informacji