Fallbacki dla starszych przeglądarek

Fallbacki dla starszych przeglądarek

HTML5 wprowadził wiele nowych funkcji, w tym możliwość osadzania wideo i dźwięku bez użycia zewnętrznych wtyczek. Jednak nie wszystkie przeglądarki – szczególnie starsze – w pełni wspierają nowe znaczniki i formaty plików. Dlatego warto zadbać o fallbacki, czyli alternatywne rozwiązania, które pozwolą użytkownikowi nadal uzyskać dostęp do treści.

Fallbacki nie tylko poprawiają kompatybilność, ale też pokazują, że dbasz o użytkowników z różnych środowisk. W tej lekcji pokażę Ci, jak je stosować.

1. Fallbacki w <video> – kilka formatów + tekst alternatywny

Nie wszystkie przeglądarki obsługują każdy format wideo. Najpopularniejszy .mp4 działa prawie wszędzie, ale warto dodać też .webm i .ogg.

<video controls>
  <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 film tutaj</a>.
</video>

Efekt działania: jeśli przeglądarka nie obsłuży żadnego formatu, pojawi się link do pobrania filmu.

2. Fallbacki w <audio>

Podobnie jak przy wideo – dodaj kilka formatów pliku audio, a na końcu tekst z linkiem:

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

Dzięki temu: nawet jeśli dźwięk się nie odtworzy – użytkownik nadal może go pobrać.

3. Fallback dla iframe

Iframe zazwyczaj działa we wszystkich przeglądarkach, ale na wypadek, gdyby został zablokowany (np. przez wtyczkę lub ograniczenia bezpieczeństwa), warto dodać link do zewnętrznej strony:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  allowfullscreen>
  <p>Nie możesz odtworzyć filmu? 
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Kliknij tutaj, by obejrzeć na YouTube</a>.
  </p>
</iframe>

Efekt działania: jeśli iframe nie załaduje się – użytkownik zobaczy link do filmu.

4. Komentarze warunkowe dla starych wersji Internet Explorera (IE)

To starsza technika, dziś rzadko używana, ale warto o niej wspomnieć. IE 8 i starsze nie wspierają wielu elementów HTML5, np. <video>. Można dodać komunikat specjalnie dla nich:

<!--[if lt IE 9]>
  <p>Twoja przeglądarka nie obsługuje nowoczesnych multimediów. 
  Proszę zaktualizuj ją lub pobierz film <a href="film.mp4">tutaj</a>.</p>
<![endif]-->

Uwaga: technika działa tylko w starszych wersjach IE – dziś praktycznie już nieużywana, ale może przydać się w specyficznych projektach.

5. Dostępność – zadbaj o wszystkich użytkowników

Poza samą funkcjonalnością warto dodać opisy, tytuły, transkrypcje – np. dla użytkowników korzystających z czytników ekranowych lub z ograniczonymi możliwościami odtwarzania.

<h5>Podcast: Historia internetu</h5>
<audio controls>
  <source src="historia.mp3" type="audio/mpeg">
</audio>
<p>Transkrypcja: W tym odcinku opowiadamy o początkach internetu, od ARPANET po WWW...</p>

Ćwiczenie – przygotuj własny zestaw fallbacków

W JSFiddle stwórz sekcję, która zawiera:

• wideo z trzema formatami,
• audio z fallbackiem tekstowym,
• iframe z linkiem alternatywnym,
• komunikat warunkowy dla starych przeglądarek.

👉 Przetestuj w JSFiddle

<video controls>
  <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.
  <a href="film.mp4">Pobierz film</a>.
</video>

<audio controls>
  <source src="muzyka.mp3" type="audio/mpeg">
  Twoja przeglądarka nie obsługuje audio.
  <a href="muzyka.mp3">Pobierz nagranie</a>.
</audio>

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen>
  <p>Nie możesz odtworzyć filmu? 
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Obejrzyj na YouTube</a>.
  </p>
</iframe>

<!--[if lt IE 9]>
  <p>Twoja przeglądarka jest przestarzała. Pobierz materiał <a href="film.mp4">tutaj</a>.</p>
<![endif]-->