Dokumentacja HTML z przykładami: Znacznik video

Q: Jak dodać wideo w HTML?

Użyj . Atrybut controls pokazuje przycisk odtwarzania, oś czasu i głośność przeglądarki. Bez niego wideo pokazuje pierwszą klatkę (lub poster) i użytkownik nie może go uruchomić.

Q: Jak dodać miniaturę do wideo?

Użyj atrybutu poster z adresem URL obrazka: . Obrazek jest widoczny, dopóki wideo nie zacznie się odtwarzać.

Q: Jak dodać napisy do wideo w HTML?

Dodaj wewnątrz elementu video. Plik jest w formacie WebVTT, a przeglądarka pokazuje w kontrolkach przycisk napisów.

Q: Jak zrobić responsywne wideo?

Ustaw w CSS width: 100% i height: auto (albo max-width: 100%). Wideo skaluje się razem z kontenerem i zachowuje proporcje.

Jak dodać wideo

Wskaż elementowi <video> plik wideo i dodaj controls, żeby czytelnik mógł go odtworzyć:

<video src="movie.mp4" controls width="640"></video>

controls pokazuje wbudowany odtwarzacz przeglądarki: odtwarzanie i pauzę, oś czasu, głośność i pełny ekran. Bez niego wideo po prostu stoi w miejscu. Ten podgląd nie może wczytywać plików wideo, więc przykłady na tej stronie zasilają element małą animacją na canvasie rysowaną przez skrypt; atrybuty działają dokładnie tak samo jak z plikiem:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Ponieważ źródłem jest strumień na żywo, a nie plik, osi czasu nie da się tu przeciągać i nie ma stałej długości. Z prawdziwym plikiem .mp4 ten sam odtwarzacz ma pełny pasek przewijania.

Atrybuty video

Atrybut	Co robi
`controls`	Pokazuje kontrolki odtwarzacza przeglądarki
`autoplay`	Zaczyna odtwarzanie, gdy tylko może (w praktyce tylko z `muted`)
`muted`	Startuje z wyłączonym dźwiękiem
`loop`	Po zakończeniu zaczyna od początku
`playsinline`	Na iPhonie odtwarza na stronie zamiast przełączać na pełny ekran
`poster="thumb.jpg"`	Obrazek widoczny przed odtworzeniem wideo
`preload`	`none`, `metadata` (tylko rozmiar i długość) lub `auto` (przeglądarka decyduje, ile pobrać)
`width`, `height`	Rozmiar w pikselach; ustawienie obu rezerwuje miejsce przed wczytaniem wideo

Autoplay, muted i loop

Przeglądarki blokują wideo, które startuje samo z dźwiękiem. Wyciszone wideo może odtworzyć się automatycznie i tak właśnie działają filmy w tle i krótkie zapętlone klipy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

Te cztery atrybuty działają w zestawie: autoplay, żeby wystartować, muted, żeby przeglądarka na to pozwoliła, loop dla klipu i playsinline, żeby iPhone nie otwierał go na pełnym ekranie. Automatycznie odtwarzane wideo z dźwiękiem jest nie tylko blokowane, ale też przeszkadza użytkownikom czytników ekranu, których mowa ginie w hałasie. Jeśli klip gra dłużej niż pięć sekund, daj możliwość zatrzymania go.

Obrazek poster i preload

poster pokazuje obrazek przed odtworzeniem wideo, jak miniaturę. Tutaj wideo nie ma żadnego źródła, więc poster to wszystko, co widać:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

Z preload="none" przeglądarka nic nie pobiera, dopóki czytelnik nie naciśnie odtwarzania, a poster sprawia, że miejsce nie wygląda na puste. Użyj preload="metadata", gdy czas trwania ma być widoczny przed odtworzeniem. Bez postera większość przeglądarek pokazuje pierwszą klatkę, gdy już ją wczyta.

Formaty i pliki zapasowe z source

Zamiast src możesz podać kilka plików w elementach <source>. Przeglądarka odtwarza pierwszy, który obsługuje:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

MP4 z obrazem H.264 odtwarza się w każdej obecnej przeglądarce, więc to bezpieczny wybór, gdy masz tylko jeden plik. Atrybut type pozwala przeglądarce pominąć formaty, których nie umie odtworzyć, bez ich pobierania. Tekst na końcu pojawia się tylko w przeglądarkach, które w ogóle nie obsługują <video>.

Napisy z track

<track kind="captions"> wczytuje plik WebVTT, czyli zwykły plik tekstowy z wierszami opisanymi czasem. Przeglądarka dodaje do kontrolek przycisk napisów i rysuje tekst na wideo:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

Napisy pomagają osobom głuchym i niedosłyszącym, osobom oglądającym bez dźwięku i każdemu, kto śledzi wideo w drugim języku. Dodaj default do ścieżki, żeby pokazać ją bez klikania. Plik z napisami z innej domeny wymaga nagłówków CORS i atrybutu crossorigin na elemencie video.

Stylowanie i sterowanie w JavaScripcie

Wideo to element zastępowany, jak obrazek: width: 100% z height: auto czyni je responsywnym, a object-fit decyduje, jak wypełnia pole o innym kształcie. JavaScript ma do dyspozycji play(), pause(), currentTime, volume oraz zdarzenia takie jak play, pause i ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() zwraca obietnicę (promise), która zostaje odrzucona, gdy przeglądarka zablokuje odtwarzanie (na przykład autoplay bez wyciszenia), więc kod produkcyjny powinien ją obsłużyć przez catch. Własne kontrolki są opcjonalne; wbudowane controls obsługują klawiaturę i są przetłumaczone, a własne przyciski muszą to odtworzyć. Filmy z YouTube lub Vimeo osadzasz zamiast tego przez ich odtwarzacz w iframe.

Częste błędy

Autoplay bez muted. Przeglądarka go zablokuje. Dodaj muted i playsinline.
Brak controls. Jeśli nie zbudujesz własnych, czytelnik nie ma jak uruchomić wideo.
Brak width i height. Strona skacze, gdy wideo się wczytuje. Ustaw oba, potem skaluj w CSS.
Ogromne pliki. Kompresuj wideo pod sieć i używaj preload="none" lub "metadata" dla filmów niżej na stronie.
Brak napisów w wideo z mową. Dodaj <track kind="captions">.

Najczęściej zadawane pytania

Jak dodać wideo w HTML?

Użyj <video src="movie.mp4" controls width="640"></video>. Atrybut controls pokazuje przycisk odtwarzania, oś czasu i głośność przeglądarki. Bez niego wideo pokazuje pierwszą klatkę (lub poster) i użytkownik nie może go uruchomić.

Dlaczego autoplay nie działa w moim wideo?

Przeglądarki blokują automatyczne odtwarzanie z dźwiękiem. Dodaj muted obok autoplay oraz playsinline, żeby iPhone odtwarzał wideo na stronie, a nie na pełnym ekranie: <video autoplay muted loop playsinline>.

Jakiego formatu wideo używać w sieci?

MP4 z obrazem H.264 odtwarza się w każdej obecnej przeglądarce, więc to bezpieczny domyślny wybór. Możesz najpierw podać mniejszy plik WebM w <source> i pozwolić przeglądarce wybrać pierwszy obsługiwany format.

Jak dodać miniaturę do wideo?

Użyj atrybutu poster z adresem URL obrazka: <video poster="thumb.jpg" controls>. Obrazek jest widoczny, dopóki wideo nie zacznie się odtwarzać.

Jak dodać napisy do wideo w HTML?

Dodaj <track kind="captions" src="captions.vtt" srclang="pl" label="Polski"> wewnątrz elementu video. Plik jest w formacie WebVTT, a przeglądarka pokazuje w kontrolkach przycisk napisów.

Jak zrobić responsywne wideo?

Ustaw w CSS width: 100% i height: auto (albo max-width: 100%). Wideo skaluje się razem z kontenerem i zachowuje proporcje.

Powiązane zagadnienia