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

Sam Dutton

Wyciszone autoodtwarzanie filmów jest obsługiwane w Chrome na Androida od wersji 53. Jeśli ustawiono zarówno autoplay, jak i muted, odtwarzanie rozpocznie się automatycznie w przypadku elementu wideo, który pojawi się na ekranie. Odtwarzanie wyciszonych filmów można pragmatycznie zainicjować za pomocą play(). Wcześniej odtwarzanie na urządzeniu mobilnym musiało być inicjowane gestem użytkownika, niezależnie od stanu wyciszenia.

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

Możesz zobaczyć, jak to działa, odwiedzając ten przykład. Odtwarzanie filmu muted rozpoczyna się automatycznie w Chrome 53 lub nowszej wersji.

Zrzut ekranu odtwarzacza.

Wyciszone odtwarzanie można teraz zainicjować za pomocą metody play(). Wcześniej play() inicjował odtwarzanie tylko wtedy, gdy wykonuje je gest użytkownika, np. kliknięcie przycisku. Porównaj te 2 wersje demonstracyjne na Androida – wypróbuj je w Chrome 53, a potem w starszej wersji:

Zalecamy, aby w miarę możliwości używać atrybutu autoplay, a metody play() – tylko wtedy, gdy to konieczne.

Możesz wyłączyć wyciszenie filmu w odpowiedzi na gest użytkownika, np. click. Jeśli jednak spróbujesz wyłączyć wyciszenie filmu automatycznie (bez gestu użytkownika), odtwarzanie zostanie wstrzymane.

Zmiana muted autoplay umożliwi też korzystanie z elementu play() z elementem video, który nie został utworzony w DOM, np. do sterowania odtwarzaniem WebGL.

Metoda play() zwraca też obietnicę, która może służyć do sprawdzenia, czy wyciszone odtwarzanie automatyczne jest włączone. Przykład znajdziesz na stronie simpl.info/video/scripted.

Dlaczego wprowadzamy tę zmianę?

Autoodtwarzanie było wyłączone w poprzednich wersjach Chrome na Androida, ponieważ może być uciążliwe i niepotrzebne, a wielu użytkowników tego nie lubi.

Wyłączenie autoodtwarzania w niezamierzony sposób skierowało deweloperów do rozwiązań alternatywnych, takich jak animowane GIF-y, a także możliwości ataków na <canvas> i <img>. Te techniki są znacznie gorsze od zoptymalizowanego wideo pod względem zużycia energii, wydajności, wymagań związanych z przepustowością, kosztów danych i wykorzystania pamięci. Filmy zapewniają wyższą jakość niż animowane GIF-y i mają znacznie lepszą kompresję: średnio około 10 razy, a maksymalnie 100 razy. Dekodowanie filmów w języku JavaScript jest możliwe, ale znacznie zużywa baterię.

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

Trwa odtwarzanie klipu.

Wyglądają one bardzo podobnie, ale rozmiar filmu nie przekracza 200 KB, a animowany GIF ma ponad 900 KB.

Chrome i inni dostawcy przeglądarek bardzo ostrożnie podchodzą do przepustowości łącza przez użytkowników. W wielu kontekstach dla wielu użytkowników wysoki koszt danych jest przeszkodą w dostępie niż słaba jakość połączenia. Ze względu na powszechność rozwiązań tymczasowych wyciszone autoodtwarzanie nie można zablokować, więc najlepszym rozwiązaniem będzie oferowanie dobrych interfejsów API i ustawień domyślnych.

Internet coraz bardziej skupia się na mediach. Projektanci i deweloperzy wciąż znajdują nowe i nieprzewidziane sposoby korzystania z filmów. Chcą też zachować spójność na różnych platformach, np. wykorzystując film w tle jako element projektu. Wyciszone autoodtwarzanie umożliwia korzystanie z takich funkcji zarówno na urządzeniach mobilnych, jak i na komputerach.

Drobniejsze punkty

  • Z punktu widzenia ułatwień dostępu autoodtwarzanie może być szczególnie problematyczne. W Chrome w wersji 53 lub nowszej na urządzeniach z Androidem znajduje się ustawienie umożliwiające całkowite wyłączenie autoodtwarzania: w Ustawieniach multimediów wybierz Autoodtwarzanie.
  • Ta zmiana nie ma wpływu na element audio: autoodtwarzanie jest nadal wyłączone w Chrome na Androidzie, bo z wyciszonym dźwiękiem nie ma sensu w przypadku dźwięku.
  • Autoodtwarzanie nie jest odtwarzane przy włączonym trybie oszczędzania danych. Jeśli włączony jest tryb Oszczędzanie danych, autoodtwarzanie jest wyłączone w ustawieniach multimediów.
  • Autoodtwarzanie bez dźwięku będzie działać w przypadku wszystkich widocznych elementów wideo w dowolnym widocznym dokumencie, elemencie iframe oraz innym miejscu.
  • Pamiętaj, że aby skorzystać z nowego sposobu działania, musisz dodać zarówno muted, jak i autoplay: porównaj simpl.info/video z simpl.info/video/muted.

Pomoc

  • Wyciszone autoodtwarzanie jest obsługiwane w Safari na urządzeniach z systemem iOS 10 i nowszym.
  • Autoodtwarzanie, niezależnie od tego, czy jest wyciszone, jest już obsługiwane na Androidzie przez przeglądarki Firefox i UC Browser: nie blokuje on żadnego rodzaju autoodtwarzania.

Więcej informacji