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że być inicjowane pragmatycznie za pomocą opcji 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 zainicjować 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 programowo w odpowiedzi na gest użytkownika, np. click, ale jeśli spróbujesz wyciszyć film programowo 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ą znacznie gorsze od zoptymalizowanego wideo pod względem zużycia energii, wydajności, wymagań dotyczących przepustowości, kosztów 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 2 obrazy: pierwszy to film, a drugi to animowany GIF:

Odtwarzanie klipu wideo.

Wyglądają one podobnie, ale film ma rozmiar poniżej 200 KB, a animowany GIF – 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ę powszechność obejść, wyciszone automatyczne odtwarzanie nie może być blokowane, dlatego oferowanie dobrych interfejsów API i domyślnych ustawień to najlepsze, co może zrobić platforma.

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. Ta funkcja jest dostępna zarówno na urządzeniach mobilnych, jak i na komputerach.

Szczegóły

  • 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: automatyczne odtwarzanie jest nadal wyłączone w Chrome na Androidzie, ponieważ automatyczne odtwarzanie z wyciszonym dźwiękiem nie ma większego sensu w przypadku dźwięku.
  • Autoodtwarzanie nie jest dostępne, jeśli włączony jest Tryb oszczędzania danych. Jeśli tryb Oszczędzanie danych jest włączony, autoodtwarzanie jest wyłączone w ustawieniach multimediów.
  • Autoodtwarzanie z wyciszonym dźwiękiem 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 oraz 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, z dźwiękiem lub bez, jest już obsługiwane na Androidzie w Firefoksie i UC Browser: nie blokują one żadnego rodzaju autoodtwarzania.

Więcej informacji