Obsługa formatów i fallbacków

Tworząc stronę internetową z wideo lub dźwiękiem, musimy wziąć pod uwagę różnorodność przeglądarek i ich możliwości. Nie wszystkie formaty multimedialne są wspierane przez każdą przeglądarkę – dlatego warto zrozumieć, jak zapewnić kompatybilność i jak działa mechanizm fallbacku (czyli alternatywnego rozwiązania, gdy coś nie działa).

Dlaczego nie każdy format działa wszędzie?

Każda przeglądarka (Chrome, Firefox, Safari, Edge itd.) obsługuje różne zestawy kodeków audio i wideo. Nawet jeśli dwa pliki mają rozszerzenie .mp4, mogą się różnić wewnętrznie (np. używanym kodekiem wideo H.264 albo dźwiękowym AAC).

Dlatego nie należy polegać tylko na jednym formacie. Aby zapewnić, że Twoje multimedia będą działały w jak największej liczbie przeglądarek i urządzeń, powinieneś podać kilka alternatywnych wersji pliku – każdą w osobnym tagu <source>.

Jak działa mechanizm fallbacku?

Tagi <video> i <audio> sprawdzają dostępność formatów od góry do dołu – wybierają pierwszy format, który przeglądarka potrafi odtworzyć. Jeśli żaden nie działa, wyświetlana jest zawartość pomiędzy otwierającym i zamykającym tagiem – tzw. fallback tekstowy.

Przykład – wideo z kilkoma formatami

<video controls width="640" height="360">
  <source src="film.mp4" type="video/mp4">
  <source src="film.webm" type="video/webm">
  <source src="film.ogg" type="video/ogg">
  Twoja przeglądarka nie obsługuje wideo HTML5. 
  <a href="film.mp4">Pobierz plik wideo</a>.
</video>

Efekt działania:

(Jeśli przeglądarka obsługuje .mp4 – użyje go. Jeśli nie – sprawdzi .webm, potem .ogg. Jeśli żaden nie działa – pokaże link do pobrania.)

Przykład – audio z fallbackiem

<audio controls>
  <source src="muzyka.ogg" type="audio/ogg">
  <source src="muzyka.mp3" type="audio/mpeg">
  <source src="muzyka.wav" type="audio/wav">
  Twoja przeglądarka nie obsługuje odtwarzania dźwięku.
  <a href="muzyka.mp3">Pobierz plik audio</a>.
</audio>

Efekt działania:

(Podobnie – przeglądarka wybierze pierwszy wspierany plik. Jeśli żaden nie działa, użytkownik zobaczy link do pobrania.)

Gdzie znaleźć informacje o wspieranych formatach?

Dobre źródło to strona Can I use, gdzie możesz sprawdzić obsługę poszczególnych formatów multimedialnych:

.mp4 (H.264, AAC) – bardzo dobrze wspierany (prawie wszystkie przeglądarki),
.webm (VP8/VP9) – świetny w Chrome, Firefox, Edge, ale nie zawsze w Safari,
.ogg (Theora, Vorbis) – działa w wielu przeglądarkach, ale nie wszystkich.

Dlatego najlepiej przygotować wersję MP4 jako główną, a WebM i OGG jako alternatywy.

Fallback do alternatywnego działania – np. link lub tekst

Niektóre starsze przeglądarki lub ograniczone urządzenia mogą w ogóle nie obsługiwać wideo lub audio. Wtedy dobrze, by użytkownik miał wybór – np. pobrać plik, przeczytać transkrypcję albo przejść do wersji tekstowej materiału.

Przykład prostego fallbacku:

<video controls>
  <source src="film.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje odtwarzania wideo.
  <a href="film.mp4">Kliknij tutaj, aby pobrać materiał wideo</a>.
</video>

Taki tekst wyświetli się tylko wtedy, gdy żaden z formatów nie zadziała – to ostatnia linia obrony dla użytkownika.

Ćwiczenie w JSFiddle – przetestuj fallbacki

Otwórz JSFiddle i wklej poniższy kod. Następnie usuń lub zmień kolejność źródeł, by sprawdzić, który zostanie użyty. Możesz też dodać nieistniejący plik i zobaczyć, co się stanie.

👉 Otwórz JSFiddle i przetestuj fallbacki

<video controls width="600">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="film-nieistniejacy.webm" type="video/webm">
  Twoja przeglądarka nie obsługuje wideo HTML5.
  <a href="https://www.w3schools.com/html/mov_bbb.mp4">Pobierz wideo</a>.
</video>

Dzięki temu zrozumiesz, jak działają fallbacki i dlaczego warto je stosować.

Previous Temat

Back to Zagadnienie

Next Quiz