<video>

Odtwarzacz wideo osadzony bezpośrednio na stronie.

Wyświetlanie: inline (element zastępowany)
Znacznik zamykający: Wymagany
Dozwolona zawartość: Elementy <source> i <track>, a po nich treść zastępcza

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<video controls width="300" height="200" preload="none" poster="/collections/covers/od-czego-zaczac-nauke-programowania.webp">
  <source src="/media/lekcja-1.webm" type="video/webm">
  <source src="/media/lekcja-1.mp4" type="video/mp4">
  <track kind="captions" src="/media/lekcja-1-pl.vtt" srclang="pl" label="Polski" default>
  <a href="/media/lekcja-1.mp4">Pobierz lekcję w MP4</a>
</video>

Podgląd

Plik wideo i napisy zostały pominięte w podglądzie, dlatego widzisz tylko okładkę i kontrolki.

Definicja i zastosowanie

Element <video> wyświetla film z pliku bez żadnych zewnętrznych wtyczek. Źródło podajesz w atrybucie src albo w kilku elementach <source> z różnymi formatami, a napisy dodajesz elementami <track>.

Atrybut controls pokazuje wbudowany pasek odtwarzania, a poster obraz widoczny przed startem filmu. Warto podać też width i height, żeby przeglądarka zarezerwowała miejsce na odtwarzacz, zanim film się wczyta.

Automatyczne odtwarzanie zwykle działa tylko w wyciszeniu, dlatego krótkie animacje w tle zapisuje się jako autoplay muted loop playsinline. Filmów z serwisów takich jak YouTube nie osadzisz przez <video>, do nich służy <iframe> z kodem udostępnianym przez serwis.

Składnia

<video src="film.mp4" controls width="…" height="…"></video>

Atrybuty

src
URL
Adres pliku wideo. Gdy chcesz podać kilka formatów, zamiast src użyj elementów <source> wewnątrz <video>.
controls
atrybut logiczny
Pokazuje wbudowane kontrolki: odtwarzanie, oś czasu, głośność, pełny ekran. Bez nich użytkownik nie ma jak sterować filmem, chyba że zbudujesz własne przyciski.
poster
URL obrazu
Obraz wyświetlany, zanim film się uruchomi. Bez niego odtwarzacz pokazuje pierwszą klatkę filmu albo pusty prostokąt, dopóki ta klatka się nie wczyta.
width / height
liczba pikseli
Wymiary odtwarzacza. Film zostanie dopasowany do tego obszaru z zachowaniem proporcji, a przy innych proporcjach pojawią się puste pasy.
autoplay
atrybut logiczny
Uruchamia film zaraz po wczytaniu. Przeglądarki zwykle pozwalają na to tylko wtedy, gdy film jest wyciszony atrybutem muted.
muted
atrybut logiczny
Uruchamia film z wyłączonym dźwiękiem. W praktyce niezbędny przy autoplay.
loop
atrybut logiczny
Po dojściu do końca film zaczyna się od początku.
playsinline
atrybut logiczny
Na iPhonie odtwarza film w miejscu na stronie, zamiast automatycznie przechodzić na pełny ekran. Ważny dla krótkich animacji w tle.
preload
none | metadata | auto
Ile danych pobrać z wyprzedzeniem. Na stronie z wieloma filmami ustaw none albo metadata, żeby nie marnować transferu.

Atrybut	Wartości	Opis
src	URL	Adres pliku wideo. Gdy chcesz podać kilka formatów, zamiast `src` użyj elementów `<source>` wewnątrz `<video>`.
controls	atrybut logiczny	Pokazuje wbudowane kontrolki: odtwarzanie, oś czasu, głośność, pełny ekran. Bez nich użytkownik nie ma jak sterować filmem, chyba że zbudujesz własne przyciski.
poster	URL obrazu	Obraz wyświetlany, zanim film się uruchomi. Bez niego odtwarzacz pokazuje pierwszą klatkę filmu albo pusty prostokąt, dopóki ta klatka się nie wczyta.
width / height	liczba pikseli	Wymiary odtwarzacza. Film zostanie dopasowany do tego obszaru z zachowaniem proporcji, a przy innych proporcjach pojawią się puste pasy.
autoplay	atrybut logiczny	Uruchamia film zaraz po wczytaniu. Przeglądarki zwykle pozwalają na to tylko wtedy, gdy film jest wyciszony atrybutem `muted`.
muted	atrybut logiczny	Uruchamia film z wyłączonym dźwiękiem. W praktyce niezbędny przy `autoplay`.
loop	atrybut logiczny	Po dojściu do końca film zaczyna się od początku.
playsinline	atrybut logiczny	Na iPhonie odtwarza film w miejscu na stronie, zamiast automatycznie przechodzić na pełny ekran. Ważny dla krótkich animacji w tle.
preload	none \| metadata \| auto	Ile danych pobrać z wyprzedzeniem. Na stronie z wieloma filmami ustaw `none` albo `metadata`, żeby nie marnować transferu.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

controls

atrybut logiczny

Pokazuje wbudowane kontrolki: odtwarzanie, oś czasu, głośność, pełny ekran. Bez nich użytkownik nie ma jak sterować filmem, chyba że zbudujesz własne przyciski.

HTML

<video src="/media/lekcja-2.mp4" controls width="240" height="160" preload="none" poster="/collections/covers/programowanie-dla-dzieci.webp"></video>

Podgląd

Plik wideo został pominięty w podglądzie.

poster

URL obrazu

Obraz wyświetlany, zanim film się uruchomi. Bez niego odtwarzacz pokazuje pierwszą klatkę filmu albo pusty prostokąt, dopóki ta klatka się nie wczyta.

HTML

<video src="/media/gra-w-kodowanie.mp4" controls width="240" height="160" preload="none" poster="/collections/covers/gry-do-nauki-programowania.webp"></video>

Podgląd

Plik wideo został pominięty w podglądzie, widoczna jest sama okładka.

Więcej przykładów

Krótka animacja w tle

HTML

<video autoplay muted loop playsinline width="300" height="200" poster="/collections/covers/vibe-coding.webp">
  <source src="/media/tlo-animacja.webm" type="video/webm">
  <source src="/media/tlo-animacja.mp4" type="video/mp4">
</video>

Podgląd

Plik wideo został pominięty w podglądzie, dlatego widać tylko okładkę. Na prawdziwej stronie animacja zapętli się bez dźwięku.

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Dodaj napisy przez <track kind="captions">. Wiele osób ogląda filmy bez dźwięku, a dla osób niesłyszących napisy są jedynym sposobem odbioru.
Nie wrzucaj na serwer ogromnych plików prosto z kamery. Skompresuj film i rozważ lżejszy format, na przykład WebM, z MP4 jako wersją zapasową.
Do filmów z YouTube czy Vimeo użyj <iframe> z kodem osadzania od serwisu, a nie <video>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs