Skip to main content

Jak włączyć automatyczne odtwarzanie wideo w trybie niskiego zużycia energii w iOS i macOS

05/06/2023
|W Technologie, blog, Tech, Web Development, Programming
|Przez Rafał Leśniak

Wprowadzenie:

W dzisiejszym cyfrowym świecie zapewnienie płynnego, dostępnego i energooszczędnego odtwarzania wideo jest kluczowe. Jednak przeglądarka Safari — zwłaszcza gdy aktywny jest Tryb niskiego zużycia energii lub ustawienia oszczędzania danych — może blokować automatyczne odtwarzanie, aby ograniczyć zużycie energii. Dlatego właściwym podejściem jest projektowanie tak, by wideo odtwarzało się automatycznie, gdy jest to dozwolone, a gdy nie — zapewnienie estetycznego rozwiązania zastępczego.

Rzeczywiste wyzwanie w Safari:

Safari w wielu przypadkach pozwala na automatyczne odtwarzanie wyciszonych filmów osadzonych w treści, jednak na urządzeniach z iOS użytkownik lub system mogą je zablokować. W praktyce oznacza to, że nie można zagwarantować automatycznego odtwarzania na iPhonie — należy więc wykrywać, czy odtwarzanie się rozpoczęło, a jeśli nie, wyświetlić subtelny komunikat „dotknij, aby odtworzyć” lub animowany obraz zastępczy. Dzięki temu doświadczenie użytkownika pozostaje spójne nawet w trybie oszczędzania energii.

Solidne rozwiązanie: progresywne ulepszanie

Najpierw zaimplementuj standardowy element <video> z atrybutami muted, playsinline, autoplay i lekkim preloadem. Następnie spróbuj rozpocząć odtwarzanie za pomocą video.play(). Jeśli przeglądarka odrzuci obietnicę (np. w trybie niskiego zużycia energii), płynnie przełącz się na alternatywę — pokaż animowany obraz (GIF/WebP/APNG) lub widoczny przycisk „Odtwórz”. Takie podejście szanuje ustawienia użytkownika, a jednocześnie maksymalizuje zaangażowanie.

... (kod HTML, CSS i JS bez zmian — pozostaje taki sam, działa niezależnie od języka) ...

Dlaczego to działa (i czego unikać):

  • Progresywne ulepszanie: Najpierw próbujemy wyciszonego automatycznego odtwarzania wideo; gdy nie jest ono dozwolone, przełączamy się na animowany obraz lub wyraźny przycisk „Odtwórz”. Dzięki temu użytkownicy zawsze widzą ruch lub mogą uruchomić wideo jednym kliknięciem.
  • Zgodność ze standardami: Użycie atrybutów muted, playsinline, autoplay oraz lekkiego preload zapewnia zgodność z polityką przeglądarek dotyczącą automatycznego odtwarzania.
  • Unikaj trików: Nie próbuj „odtwarzać” wideo przez element <img> wskazujący na plik MP4 — obrazy nie renderują wideo. Zamiast tego użyj prawdziwego obrazu animowanego (GIF/WebP/APNG) jako wizualnej alternatywy.

Opcjonalnie: osadzone odtwarzacze (YouTube/Vimeo)

Jeśli korzystasz z iFrame’ów, możesz żądać wyciszonego automatycznego odtwarzania, jednak użytkownik lub tryb systemowy nadal mogą je zablokować. Dlatego zawsze pozostaw nakładkę z przyciskiem „Play” lub obraz podglądu (poster).

<!-- Przykład Vimeo -->
<iframe
  src="https://player.vimeo.com/video/12345?background=1&autoplay=1&muted=1&loop=1&playsinline=1"
  allow="autoplay; fullscreen; picture-in-picture"
  loading="lazy"
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

Korzyści i wpływ:

Dzięki temu podejściu zapewniasz spójne i przyjazne doświadczenie użytkownika zarówno na iOS, jak i na komputerach stacjonarnych. Zachowujesz zamysł projektowy, jednocześnie przestrzegając zasad przeglądarek i ograniczeń związanych z oszczędzaniem energii. Efekt — wysoki poziom zaangażowania nawet wtedy, gdy automatyczne odtwarzanie jest zablokowane.

Podsumowanie:

Automatyczne odtwarzanie na urządzeniach Apple należy traktować jako funkcję „jeśli możliwe”, a nie wymóg. Twórz więc rozwiązania z wyciszonym, osadzonym wideo, wykrywaj niepowodzenia metody play() i w razie potrzeby przełączaj się na animowany podgląd lub jedno kliknięcie, by uruchomić odtwarzanie. Takie podejście łączy wydajność, dostępność i siłę przekazu marki.

Twoje wsparcie jest mile widziane

Jeśli chcesz wesprzeć nowe projekty lub podziękować za dotychczasową pracę, będzie to bardzo docenione. Aby przekazać darowiznę, kliknij PayPal.me — resztą zajmie się bezpiecznie system PayPal. Dziękuje za wsparcie!