Wstawianie multimediów (Audio, Wideo)

1. Znacznik `<video>` — wideo na stronie

Znacznik <video> pozwala osadzić film bezpośrednio w HTML5, bez dodatkowych wtyczek (np. Flash).[web:264] W praktyce zawsze używa się go z atrybutem controls, aby użytkownik mógł włączać, pauzować i przewijać wideo.[web:268]

Najważniejsze atrybuty `<video>`

Atrybut	Opis	Typowe użycie
`src`	Ścieżka do pliku wideo, jeśli nie używamy wewnątrz `<source>`.	`<video src="film.mp4">`
`controls`	Wyświetla standardowe kontrolki odtwarzacza (play, pauza, głośność, pasek postępu).[web:268]	`<video controls>`
`autoplay`	Automatycznie uruchamia film po załadowaniu strony (często wymaga również `muted`).[web:267][web:270]	`<video autoplay muted>`
`loop`	Po dojściu do końca film zaczyna się od początku.[web:267]	Animowane tło, intro w pętli.
`muted`	Domyślnie wycisza dźwięk filmu; często wymagane z `autoplay`.[web:270]	„Ciche” tło wideo na stronie głównej.
`poster`	Adres obrazka wyświetlanego przed startem odtwarzania.	Miniaturka filmu (np. kadr z prezentacji).
`preload`	Określa, ile danych wideo ma być wstępnie wczytane: `none`, `metadata`, `auto`.	Optymalizacja czasu ładowania strony.

Przykład osadzania jednego filmu

<video width="640" height="360" controls poster="miniatura.jpg">
  <source src="film.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje znacznika wideo.
</video>
  

2. Znacznik `<audio>` — dźwięk w HTML5

Znacznik <audio> służy do osadzania plików dźwiękowych (np. MP3, OGG, WAV) bez zewnętrznych odtwarzaczy.[web:271] Tak jak w przypadku wideo, atrybut controls pokazuje standardowe przyciski odtwarzania.

Najważniejsze atrybuty `<audio>`

Atrybut	Opis	Przykład
`controls`	Pokazuje przyciski sterowania dźwiękiem.	`<audio controls>`
`autoplay`	Uruchamia dźwięk automatycznie po załadowaniu strony (często z `muted` lub po interakcji).	`<audio autoplay>`
`loop`	Powtarza utwór w pętli.	Tło muzyczne, sygnał alarmu.
`muted`	Domyślnie wycisza dźwięk.	`<audio muted>`
`preload`	Określa, czy dźwięk ma być wstępnie wczytywany.	`<audio preload="metadata">`

Formaty i kompatybilność — znacznik `<source>`

Różne przeglądarki obsługują różne kodeki, dlatego często podaje się kilka formatów wideo/audio wewnątrz <source>.[web:269] Przeglądarka odtwarza pierwszy obsługiwany format, a jeśli żaden nie działa, pokaże tekst zastępczy.

Popularne formaty:

Wideo: MP4 (H.264 + AAC – najczęściej wspierany), WebM, OGV.[web:264][web:267]
Audio: MP3 (powszechny), Ogg Vorbis, WAV.[web:271]

Przykład audio z alternatywnymi źródłami

<audio controls loop>
  <source src="piosenka.ogg" type="audio/ogg">
  <source src="piosenka.mp3" type="audio/mpeg">
  Twoja przeglądarka nie obsługuje odtwarzania audio.
</audio>
  

3. Napisy i dostępność (ponadpodstawowe)

Dla dostępności (WCAG) warto dodać napisy do filmu, korzystając ze znacznika <track> wewnątrz <video>.[web:264] Napisy zapisuje się w plikach .vtt (WebVTT), zawierających tekst zsynchronizowany z czasem.

Przykład wideo z napisami

<video controls width="640" height="360">
  <source src="lekcja.mp4" type="video/mp4">
  <track src="napisy_pl.vtt" kind="subtitles" srclang="pl" label="Polski">
  Twoja przeglądarka nie obsługuje znacznika wideo.
</video>
  

dźwięk w filmie → napisy dla osób niesłyszących,
język obcy → napisy tłumaczące treść,
łatwiejsze śledzenie treści w hałaśliwym otoczeniu.

4. Ćwiczenia praktyczne

Ćwiczenie 1: Podstawowe wstawianie wideo (wymaganie podstawowe)

Napisz kod HTML, który wstawi na stronę plik wideo prezentacja.mp4:

szerokość 800 pikseli,
standardowe kontrolki odtwarzania,
tekst „Twoja przeglądarka nie obsługuje wideo” jako fallback.

<video width="800" controls>
  <source src="prezentacja.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje wideo.
</video>
    

Ćwiczenie 2: Odtwarzacz audio z konfiguracją (ponadpodstawowe)

Napisz kod HTML dla pliku audio alarm.mp3, który:

ma włączone kontrolki,
uruchamia się automatycznie po załadowaniu strony,
powtarza się w pętli.

<audio controls autoplay loop>
  <source src="alarm.mp3" type="audio/mpeg">
  Twoja przeglądarka nie obsługuje odtwarzania audio.
</audio>
    

Ćwiczenie 3: Intro w dwóch formatach

Napisz pełny kod HTML dla wideo intro, z obsługą dwóch formatów: intro.webm i intro.mp4. Wideo ma:

odtwarzać się w pętli,
być wyciszone i gotowe do automatycznego odtwarzania,
w razie braku wsparcia wyświetlić komunikat: „Wideo wymaga aktualnej przeglądarki”.

<video loop muted autoplay controls width="640" height="360">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  Wideo wymaga aktualnej przeglądarki.
</video>
    

5. Checklista umiejętności (INF.03)

Umiesz wstawić na stronę wideo z użyciem <video> i atrybutu controls.[web:264][web:268]
Umiesz osadzić dźwięk przy pomocy <audio> oraz kilku formatów <source>.[web:269][web:271]
Rozumiesz działanie atrybutów autoplay, loop, muted, poster oraz preload.[web:264][web:270]
Potrafisz przygotować prosty odtwarzacz z napisami przy użyciu <track>.[web:264]
Stosujesz elementy multimedialne na stronie zgodnie z wymaganiami kwalifikacji INF.03.[web:206][web:272]

1. Znacznik <video> — wideo na stronie

Najważniejsze atrybuty <video>