Poznaj Programowanie

Tagi HTML: video

Piotr Grochal 6 min. czytania

W erze dynamicznych stron internetowych tag <video> w HTML5 stał się kluczowym elementem do osadzania treści wideo bezpośrednio w kodzie, bez zależności od zewnętrznych wtyczek, takich jak Flash. Pozwala na natywne odtwarzanie filmów w przeglądarkach z pełną kontrolą nad formatami, stylami i zachowaniem.

Ten praktyczny poradnik dla programistów HTML/CSS/JavaScript omawia strukturę tagu, kluczowe atrybuty, obsługę wielu formatów, responsywne stylowanie, integrację z JavaScript oraz zaawansowane techniki, takie jak zapętlanie fragmentów czy wideo w tle. Wszystkie przykłady możesz skopiować i od razu przetestować.

Podstawowa składnia tagu <video>

Element <video> osadza odtwarzacz wideo z opcjonalnym interfejsem sterującym. Źródło pliku wskaż atrybutem src lub – zalecane – elementami potomnymi <source>. Zawsze dodaj treść zastępczą dla starszych przeglądarek.

Prosty przykład z pojedynczym plikiem

Bez <source> możesz osadzić jeden plik; określ typ MIME (type), by przeglądarka szybciej sprawdziła kompatybilność:

<video src="film.mp4" type="video/mp4" width="640" height="360">
Twoja przeglądarka nie obsługuje tagu &lt;video&gt;.
</video>

To wyświetli odtwarzacz tylko wtedy, gdy przeglądarka obsłuży format. W przeciwnym razie pokaże tekst błędu.

Lepszy przykład: wielokrotne źródła z <source>

Aby zapewnić zgodność między przeglądarkami, podaj kilka formatów (np. MP4 dla większości, WebM dla Chrome/Firefox). Przeglądarka wybierze pierwszy obsługiwany:

<video controls width="640" height="360">
<source src="film.webm" type="video/webm">
<source src="film.mp4" type="video/mp4">
Twoja przeglądarka nie obsługuje żadnego z podanych formatów wideo.
</video>

Najważniejsze zalety podejścia ze zdefiniowanymi źródłami to:

  • automatyczne przełączanie formatów,
  • szybsze sprawdzanie kompatybilności dzięki atrybutowi type,
  • czytelny fallback w postaci treści zastępczej.

Najważniejsze atrybuty tagu <video>

Tag <video> obsługuje bogaty zestaw atrybutów – wiele z nich to atrybuty logiczne (np. autoplay). Poniżej znajdziesz najczęściej używane:

Atrybut Opis Przykład użycia
controls Wyświetla panel sterowania (play, pause, głośność, pasek postępu). <video controls>
autoplay Automatyczne odtwarzanie po załadowaniu (ograniczone; zwykle wymaga muted). <video autoplay muted>
loop Zapętlanie wideo (odtwarza od początku po zakończeniu). <video loop>
muted Wyciszenie audio (wymagane dla autoplay w większości przeglądarek). <video muted>
preload Strategia ładowania: none (nic), metadata (tylko metadane), auto (cały plik). <video preload="metadata">
poster Obrazek wyświetlany przed odtwarzaniem (miniatura/placeholder). <video poster="plakat.jpg">
width/height Wymiary w pikselach; dla responsywności lepiej użyć CSS. <video style="width: 100%">

Przykład z atrybutami w akcji – autoplay + loop + muted sprawdzi się jako tło:

<video autoplay loop muted playsinline poster="preview.jpg">
<source src="tlo.webm" type="video/webm">
<source src="tlo.mp4" type="video/mp4">
</video>

Uwaga: playsinline zapobiega automatycznemu pełnoekranowi na iOS.

Responsywne wideo z CSS

Domyślnie <video> nie skaluje się responsywnie. Użyj kontenera z techniką intrinsic ratio (16:9 = 56.25%) i wypełnij go wideo:

.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* dopasowanie bez zniekształceń */
}

Użycie w HTML:

<div class="video-container">
<video controls autoplay muted loop>
<source src="film.mp4" type="video/mp4">
</video>
</div>

To rozwiązanie działa zarówno na urządzeniach mobilnych, jak i na komputerach stacjonarnych.

Wideo jako tło całej strony

Jeśli chcesz uzyskać pełnoekranowe tło:

video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: -1;
}

Dodaj delikatną nakładkę (np. przez ::after i półprzezroczysty background), aby poprawić czytelność tekstu na wideo.

Zaawansowane triki – fragmenty wideo i precyzyjne sterowanie

Aby odtwarzać tylko fragment zasobu, użyj Media Fragments: #t=[start][,end] w adresie źródła (sekundy lub HH:MM:SS):

<source src="film.webm#t=5,10" type="video/webm"> <!-- 5–10 sekund -->
<source src="film.mp4#t=00:01:05,00:02:00" type="video/mp4"> <!-- 1:05–2:00 -->

To świetne rozwiązanie do highlightów, teaserów lub podglądów lekcji.

Integracja z JavaScript

Steruj wideo w pełni programowo – od podglądu, po analitykę i interakcje:

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

<script>
const video = document.getElementById('mojeVideo');

video.addEventListener('loadedmetadata', () => {
video.currentTime = 10; // przeskocz do 10 s
video.play(); // odtwórz
});

video.addEventListener('ended', () => {
video.play(); // zapętl po zakończeniu
});
</script>

Pamiętaj: autoplay z dźwiękiem bywa blokowany – połącz autoplay z muted i/lub inicjuj odtwarzanie po interakcji użytkownika.

Obsługa formatów plików i kodeków

Najpopularniejsze formaty stosowane w sieci to:

  • WebM (VP9) – bardzo dobry do internetu (Chrome, Firefox), zazwyczaj mniejszy rozmiar plików;
  • MP4 (H.264) – najbardziej uniwersalny (obsługiwany przez wszystkie główne przeglądarki);
  • Ogg (Theora) – opcja preferowana w środowiskach open source.

Zawsze sprawdzaj aktualną kompatybilność na caniuse.com. Przykładowe polecenie konwersji w FFmpeg:

ffmpeg -i input.mov -c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k output.mp4

Porównanie: <video> vs iframe (YouTube/Vimeo)

Poniżej znajdziesz szybkie porównanie obu metod osadzania:

Metoda Zalety Wady
<video> Pełna kontrola, brak zależności zewnętrznych, działa offline. Wymaga własnego hostingu i transferu (bandwidth).
iframe Ekspresowe wdrożenie, statystyki YouTube, adaptacyjna jakość w HD. Wolniejsze ładowanie, ograniczone stylowanie, dodatkowe ciasteczka.

Przykład osadzenia klipu z YouTube:

<div class="video-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
</div>

Używaj <video> dla własnych treści i pełnej kontroli, a <iframe> dla materiałów hostowanych na platformach zewnętrznych.

Najczęstsze błędy i dobre praktyki

Poniżej lista problemów, na które warto zwrócić uwagę, oraz sprawdzone rozwiązania:

  • brak atrybutu type w <source> – powoduje zbędne pobieranie i wolniejszą detekcję wsparcia;
  • zbyt ciężkie pliki – kompresuj wideo (CRF w H.264/H.265), celuj w rozsądny bitrate i rozdzielczość;
  • nieprzemyślany preload – używaj metadata lub none dla lepszej wydajności i oszczędzania transferu;
  • brak testów autoplay – sprawdzaj zachowanie na iOS/Safari/Chrome; łącz autoplay z muted i playsinline;
  • pomijanie dostępności – dodaj sensowny aria-label, napisy (<track kind="subtitles">) i kontrastowe plakaty;
  • brak treści zastępczej/postera – umieszczaj czytelny komunikat fallback i poster dla lepszego UX.