Wstawianie multimediów (Audio, Wideo)

1. Po co wstawiać multimedia na stronę?

Podnoszą atrakcyjność i angażują odbiorcę
Pomagają przekazać informacje (np. wideo-instrukcja/wywiad, podcast)
Możliwość nauki przez interakcję (np. lekcje audio, tutoriale wideo)

2. Znacznik `<video>` — wszystkie niezbędne opcje

Pozwala na osadzenie pliku wideo (np. MP4, WebM) bez użycia wtyczek typu Flash
Możesz ustawić kontrolki, wielkość, pętlę, miniaturę (poster) i autoodtwarzanie

Atrybut	Opis	Konfiguracja
`controls`	Pokazuje standardowe kontrolki	Obowiązkowe dla wygody użytkownika
`autoplay`	Automatyczne odtwarzanie wideo	Lepiej nie używać bez `muted`
`loop`	Wideo w pętli	Świetne do animacji
`poster`	Miniaturka przed startem	Podaj URL obrazka
`muted`	Wycisza domyślnie	Zmniejsza irytację użytkowników

Przykład:

    <video width="640" height="360" controls poster="miniatura.jpg">

      <source src="film.mp4" type="video/mp4">

      <source src="film.webm" type="video/webm">

      Twoja przeglądarka nie obsługuje wideo.

    </video>

3. Znacznik `<audio>` — kompatybilność dla wszystkich

Możesz wstawić dźwięk mp3, ogg, wav (<audio> + <source>)
Wyświetl standardowe kontrolki (play, pauza, głośność)
Dla kompatybilności podaj kilka formatów

Przykład audio:

    <audio controls loop>

      <source src="muzyka.ogg" type="audio/ogg">

      <source src="muzyka.mp3" type="audio/mpeg">

      Twoja przeglądarka nie obsługuje audio.

    </audio>

4. Interaktywny quiz!

Na co służy atrybut poster w <video>?

Pozwala ustawić miniaturę/przegląd przed odtwarzaniem wideo.

Jak zapewnić kompatybilność dla plików audio?

Użyj kilku formatów i kilku źródeł (<source>) w znaczniku <audio>.

Jak automatycznie odtwarzać audio po załadowaniu strony?

Dodaj atrybut autoplay do <audio>. Uwaga: często wymaga muted!

5. Częste błędy i dobre praktyki

Zawsze udostępniaj kontrolki (controls), nie zmuszaj do autoodtwarzania z dźwiękiem!
Zawsze opisuj multimedia (atrybut alt, tekst informacyjny dla osób z niepełnosprawnościami)
Dodawaj alternatywne formaty przy <source>
Testuj multimedia na różnych przeglądarkach

6. Banki darmowej muzyki i wideo

Pixabay Music – darmowe pliki audio
Mixkit – darmowe klipy wideo
YouTube Audio Library

FAQ i ciekawostki

Czy HTML5 obsługuje napisy w wideo?

Tak, dodaj tag <track> do <video> z plikiem .vtt (WebVTT).

Czy można wstawić muzykę z YouTube na własnej stronie?

Tak, poprzez wklejenie kodu embed z YouTube. Używaj tylko materiałów z licencją!

Wskazówka: Do konwersji formatów wideo używaj CloudConvert, do audio np. Online Audio Converter.

Ćwiczenie: Twoje wideo na stronie

Wstaw plik prezentacja.mp4 o szerokości 800px z kontrolkami.
Wstaw plik alarm.mp3 z autoodtwarzaniem i pętlą.
Obsłuż dwa formaty (intro.webm, intro.mp4) z komunikatem „Wideo wymaga aktualnej przeglądarki”.