Kurs HTML

Wzbogacanie stron o dźwięk i obraz

Współczesne strony internetowe to nie tylko tekst i statyczne obrazki. HTML5 wprowadził natywne wsparcie dla osadzania i kontrolowania treści multimedialnych, takich jak audio i wideo, bezpośrednio w przeglądarce, bez konieczności stosowania zewnętrznych wtyczek (jak dawniej Adobe Flash).

Dzięki temu możemy łatwo wzbogacać nasze strony o podcasty, muzykę, filmy instruktażowe, prezentacje wideo i wiele innych dynamicznych treści.

Podstawowe znaczniki multimedialne

HTML5 dostarcza dwóch głównych znaczników do obsługi multimediów:

• <audio>: Służy do osadzania treści dźwiękowych.
• <video>: Służy do osadzania treści wideo (które mogą również zawierać ścieżkę dźwiękową).

Oba te znaczniki działają w podobny sposób, oferując szereg atrybutów do kontrolowania odtwarzania, wyglądu i zachowania odtwarzacza.

Prosty przykład osadzenia audio:

<audio controls src="muzyka.mp3">
  Twoja przeglądarka nie obsługuje elementu audio.
</audio>Kopiuj

W tym przykładzie:

• <audio> to główny znacznik.
• controls to atrybut logiczny, który włącza domyślne kontrolki odtwarzacza (play, pauza, głośność, pasek postępu).
• src wskazuje ścieżkę do pliku dźwiękowego (w tym przypadku "muzyka.mp3").
• Tekst pomiędzy <audio> a </audio> jest wyświetlany tylko wtedy, gdy przeglądarka użytkownika nie obsługuje znacznika <audio> (co jest obecnie bardzo rzadkie).

Prosty przykład osadzenia wideo:

<video controls width="640" height="360" src="film.mp4">
  Twoja przeglądarka nie obsługuje elementu video.
</video>Kopiuj

Podobnie jak w przypadku audio:

• <video> to główny znacznik.
• controls włącza kontrolki.
• width i height określają wymiary odtwarzacza wideo.
• src wskazuje ścieżkę do pliku wideo.
• Tekst zastępczy jest wyświetlany w starszych przeglądarkach.

Wyzwania związane z multimediami

Choć osadzanie multimediów stało się znacznie prostsze, nadal istnieją pewne wyzwania:

• Formaty plików i kompatybilność: Różne przeglądarki historycznie obsługiwały różne formaty audio i wideo (kodeki). Chociaż sytuacja się poprawiła (formaty jak MP3, AAC dla audio oraz H.264/MP4 dla wideo są szeroko wspierane), nadal dobrą praktyką jest dostarczanie multimediów w kilku formatach, aby zapewnić maksymalną kompatybilność.
• Rozmiar plików: Pliki audio i wideo mogą być bardzo duże, co wpływa na czas ładowania strony i zużycie transferu danych, szczególnie na urządzeniach mobilnych. Ważna jest optymalizacja i kompresja plików.
• Dostępność: Należy zapewnić alternatywy dla osób, które nie mogą odtworzyć lub zrozumieć treści multimedialnych (np. transkrypcje dla audio, napisy dla wideo).
• Autoodtwarzanie (Autoplay): Automatyczne odtwarzanie multimediów (szczególnie z dźwiękiem) jest często irytujące dla użytkowników i wiele przeglądarek je blokuje lub ogranicza.

Co dalej w tym rozdziale?

W kolejnych lekcjach tego rozdziału szczegółowo omówimy:

• Znacznik <audio> i jego atrybuty.
• Znacznik <video> i jego atrybuty (w tym dodawanie obrazka "poster").
• Kontrolowanie odtwarzania (controls, autoplay, loop, muted).
• Dostarczanie wielu formatów źródłowych za pomocą znacznika <source>.
• Dodawanie napisów i ścieżek tekstowych za pomocą znacznika <track> dla poprawy dostępności.
• Osadzanie treści z innych witryn (np. filmy z YouTube) za pomocą znacznika <iframe>.

Zadanie praktyczne (bez rozwiązania - do przemyślenia)

Zastanów się, jakie rodzaje treści multimedialnych (audio lub wideo) mogłyby wzbogacić stronę internetową, którą tworzysz lub chciałbyś stworzyć. Gdzie byś je umieścił i w jakim celu?