<video> w HTML to specjalny element służący do osadzania i odtwarzania materiału wideo bezpośrednio na stronie internetowej, bez konieczności korzystania z zewnętrznych odtwarzaczy czy wtyczek. Dzięki niemu użytkownicy mogą oglądać filmy, tutoriale, animacje czy prezentacje bez opuszczania serwisu.
Budowa i podstawowe użycie
Element <video> otacza całość treści wideo, a źródła plików określa się za pomocą wewnętrznych tagów <source>. Dla zapewnienia kompatybilności z różnymi przeglądarkami, warto podawać kilka formatów plików wideo.
Przykład podstawowy –
<video controls width="640" height="360">
<source src="film.mp4" type="video/mp4">
<source src="film.webm" type="video/webm">
Twoja przeglądarka nie obsługuje tagu wideo.
</video>
W powyższym przykładzie:
- controls – wyświetla domyślne przyciski odtwarzacza (odtwarzanie, pauza, głośność, pełny ekran);
- width i height – określają rozmiar odtwarzacza;
<source src="..." type="...">– pozwala wskazać różne formaty plików, by zapewnić odtwarzanie w większości przeglądarek;- Tekst między otwierającym a zamykającym tagiem
<video>pojawia się tylko w przeglądarkach, które nie obsługują tego elementu.
Obsługiwane formaty wideo
W HTML najczęściej stosuje się trzy formaty:
- MP4 (
video/mp4) – szeroko wspierany, domyślny wybór, - WebM (
video/webm) – otwarty format idealny do nowoczesnych przeglądarek, - Ogg (
video/ogg) – mniej popularny, ale oferujący alternatywę dla niektórych środowisk.
| Przeglądarka | Mp4 | Webm | Ogg |
|---|---|---|---|
| Edge | Tak | Tak | Tak |
| Chrome | Tak | Tak | Tak |
| Firefox | Tak | Tak | Tak |
| Safari | Tak | Tak | Nie |
| Opera | Tak | Tak | Tak |
Atrybuty i możliwości <video>
- autoplay – automatycznie rozpoczyna odtwarzanie po załadowaniu;
- loop – wideo odtwarza się w pętli;
- muted – wideo odtwarza się bez dźwięku (często wymagane przy autoplay);
- poster – adres do obrazu wyświetlanego zanim użytkownik odtworzy film;
- preload – kontroluje, kiedy przeglądarka ładuje dane wideo (np.
auto,metadata,none); - controlsList – pozwala ukryć wybrane elementy sterujące domyślnego odtwarzacza (obsługa zależna od przeglądarki).
Przykład z dodatkowymi atrybutami –
<video autoplay loop muted poster="miniaturka.jpg" width="640" height="360" controls>
<source src="intro.mp4" type="video/mp4">
<source src="intro.webm" type="video/webm">
Przepraszamy, Twoja przeglądarka nie obsługuje odtwarzania wideo.
</video>
Przykłady zastosowań
Materiały edukacyjne i szkolenia
Wideo jest powszechnie używane na platformach e-learningowych do prezentacji wykładów, instrukcji i kursów online.
<video controls>
<source src="lekcja1.mp4" type="video/mp4">
</video>
Prezentacje produktów
Sklepy internetowe osadzają filmy demonstrujące cechy lub działanie produktu.
<video controls>
<source src="prezentacja-produktu.mp4" type="video/mp4">
</video>
Tło na stronie (autoodtwarzanie, bez dźwięku)
Szczególnie na stronach promocyjnych, landing page czy stronach korporacyjnych.
<video autoplay loop muted>
<source src="tlo.mp4" type="video/mp4">
</video>
Promocje i reklamy
Wideo może przyciągnąć uwagę użytkownika i zwiększyć zaangażowanie.
Dodatkowe wskazówki
- Zaleca się dostosowanie wielkości wideo do responsywności strony.
- Gdy to możliwe, należy dołączyć napisy (
<track kind="subtitles" ...>) dla dostępności. - Jeśli zależy nam na pełnej kompatybilności, przygotuj kilka formatów plików i opcję fallback.
Napisy i dostępność
Można dodać napisy za pomocą tagu <track>:
<video controls>
<source src="film.mp4" type="video/mp4">
<track src="napisy.vtt" kind="subtitles" srclang="pl" label="Polski">
</video>
Podsumowanie
Element <video> jest nowoczesnym sposobem na bezpośrednie udostępnianie treści wideo na stronach WWW. Umiejętne wykorzystanie różnych atrybutów, formatów plików i kompatybilnych źródeł umożliwia tworzenie atrakcyjnych, interaktywnych i dostępnych materiałów multimedialnych.
