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 przez Chrome na Androida od wersji 53. Odtwarzanie elementu wideo rozpocznie się automatycznie, gdy stanie się on widoczny, jeśli ustawione są zarówno autoplay, jak i muted. Odtwarzanie wyciszonych filmów można rozpocząć programowo za pomocą play(). Wcześniej odtwarzanie na urządzeniach mobilnych musiało być inicjowane przez gest 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>

Możesz to sprawdzić, klikając ten przykład. Odtwarzanie filmu muted rozpoczyna się automatycznie w Chrome w wersji 53 lub nowszej.

Zrzut ekranu odtwarzacza wideo.

Dodatkowo odtwarzanie z wyciszonym dźwiękiem można teraz rozpocząć za pomocą metody play(). Wcześniej funkcja play() rozpoczynała odtwarzanie tylko wtedy, gdy była wywoływana przez działanie użytkownika, np. kliknięcie przycisku. Porównaj poniższe 2 wersje demonstracyjne na Androidzie – wypróbuj je w Chrome 53, a potem w starszej wersji:

Jeśli to możliwe, zalecamy używanie atrybutu autoplay, a metody play() tylko w razie potrzeby.

Wyciszenie filmu można cofnąć programowo w odpowiedzi na działanie użytkownika, np. click. Jeśli jednak spróbujesz cofnąć wyciszenie filmu programowo bez działania użytkownika, odtwarzanie zostanie wstrzymane.

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

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

Dlaczego wprowadzamy tę zmianę?

Autoodtwarzanie zostało wyłączone w poprzednich wersjach Chrome na Androida, ponieważ może być uciążliwe, zużywać dużo danych i wielu użytkowników go nie lubi.

Wyłączenie automatycznego odtwarzania spowodowało niezamierzony efekt, jakim było skłonienie deweloperów do korzystania z alternatywnych rozwiązań, takich jak animowane GIF-y oraz obejścia <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 zużycia pamięci. Filmy mogą mieć wyższą jakość niż animowane GIF-y i znacznie lepszą kompresję: średnio około 10 razy, a w najlepszym przypadku nawet 100 razy. Dekodowanie wideo w JavaScript jest możliwe, ale bardzo obciąża baterię.

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

Odtwarzanie klipu wideo.

Wyglądają podobnie, ale film ma rozmiar mniejszy niż 200 KB, a animowany GIF – ponad 900 KB.

Chrome i inni dostawcy przeglądarek bardzo dbają o przepustowość użytkowników. W przypadku wielu użytkowników w wielu kontekstach wysokie koszty danych są często większą barierą dostępu niż słabe połączenie. Ze względu na powszechność obejść nie można zablokować automatycznego odtwarzania z wyciszonym dźwiękiem, więc oferowanie dobrych interfejsów API i ustawień domyślnych jest najlepszym rozwiązaniem, jakie może zapewnić platforma.

Internet jest coraz bardziej zorientowany na media. Projektanci i programiści wciąż znajdują nowe i nieprzewidziane sposoby wykorzystania filmów. Chcą też, aby zachowywały się one w spójny sposób na różnych platformach, np. gdy używają filmów w tle jako elementu projektu. Wyciszone automatyczne odtwarzanie umożliwia korzystanie z takich funkcji 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 w wersji 53 i nowszych na Androidzie ma ustawienie, które umożliwia całkowite wyłączenie autoodtwarzania: 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ż wyciszone automatyczne odtwarzanie nie ma większego sensu w przypadku dźwięku.
  • Jeśli włączony jest tryb oszczędzania danych, autoodtwarzanie jest nieaktywne. 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, ramce iframe lub innym elemencie.
  • Pamiętaj, że aby skorzystać z nowego działania, musisz dodać muted oraz autoplay: porównaj simpl.info/video z simpl.info/video/muted.

Pomoc

  • Wyciszone automatyczne odtwarzanie jest obsługiwane przez Safari w systemie iOS 10 i nowszych.
  • Autoodtwarzanie, z dźwiękiem lub bez, jest już obsługiwane na Androidzie przez przeglądarki Firefox i UC Browser, które nie blokują żadnego rodzaju autoodtwarzania.

Więcej informacji