Исполняемые доки HTML: Видео в HTML

Q: Как вставить видео в HTML?

Используйте . Атрибут controls показывает кнопку воспроизведения, шкалу времени и громкость браузера. Без него видео показывает первый кадр (или постер), и пользователь не может его запустить.

Q: Почему не работает autoplay у видео?

Браузеры блокируют автовоспроизведение со звуком. Добавьте muted рядом с autoplay, а также playsinline, чтобы iPhone воспроизводил видео на странице, а не на весь экран: .

Q: Как добавить обложку к видео?

Используйте атрибут poster с URL картинки: . Картинка показывается, пока видео не начнет воспроизводиться.

Q: Как добавить субтитры к видео в HTML?

Добавьте внутрь video . Файл использует формат WebVTT, а браузер показывает кнопку субтитров в своих элементах управления.

Q: Как сделать видео адаптивным?

Задайте в CSS width: 100% и height: auto (или max-width: 100%). Видео масштабируется вместе с контейнером и сохраняет пропорции.

Как вставить видео

Укажите элементу <video> видеофайл и добавьте controls, чтобы читатель мог его запустить:

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

controls показывает встроенный плеер браузера: воспроизведение и пауза, шкала времени, громкость и полноэкранный режим. Без него видео просто стоит на месте. Это превью не может загружать видеофайлы, поэтому примеры на этой странице подают в элемент небольшую анимацию на canvas, которую рисует скрипт; атрибуты работают точно так же, как с файлом:

<!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>

Источник здесь это живой поток, а не файл, поэтому шкалу времени нельзя перетаскивать, и фиксированной длины нет. С настоящим .mp4 тот же плеер получает полноценную шкалу перемотки.

Атрибуты video

Атрибут	Что делает
`controls`	Показывает элементы управления плеера браузера
`autoplay`	Начинает воспроизведение, как только сможет (на практике только с `muted`)
`muted`	Запускает видео без звука
`loop`	Начинает сначала, когда видео заканчивается
`playsinline`	Воспроизводит на странице на iPhone, а не переключается в полноэкранный режим
`poster="thumb.jpg"`	Картинка, которая показывается до начала воспроизведения
`preload`	`none`, `metadata` (только размер и длительность) или `auto` (браузер сам решает, сколько скачать)
`width`, `height`	Размер в пикселях; если задать оба, место резервируется до загрузки видео

Autoplay, muted и loop

Браузеры блокируют видео, которые запускаются сами со звуком. Беззвучное видео может воспроизводиться автоматически, и так работают фоновые видео и короткие зацикленные ролики:

<!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>

Четыре атрибута работают вместе: autoplay для запуска, muted, чтобы браузер это разрешил, loop для ролика и playsinline, чтобы iPhone не открывал его на весь экран. Автовоспроизведение видео со звуком не только блокируется, но и мешает пользователям программ чтения с экрана, чью речь оно заглушает. Если ролик длится дольше пяти секунд, дайте возможность поставить его на паузу.

Постер и preload

poster показывает картинку до начала воспроизведения, как обложку. Здесь у видео вообще нет источника, поэтому видно только постер:

<!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>

С preload="none" браузер ничего не скачивает, пока читатель не нажмет воспроизведение, а постер не дает месту выглядеть пустым. Используйте preload="metadata", если хотите показать длительность до воспроизведения. Без постера большинство браузеров показывают первый кадр, когда загрузят его.

Форматы и запасные варианты через source

Вместо src можно перечислить несколько файлов в элементах <source>. Браузер воспроизводит первый поддерживаемый:

<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 с видео H.264 воспроизводится во всех современных браузерах, поэтому это надежный выбор, когда файл один. Атрибут type позволяет браузеру пропускать форматы, которые он не умеет воспроизводить, не скачивая их. Текст в конце показывается только в браузерах, которые вообще не поддерживают <video>.

Субтитры через track

<track kind="captions"> загружает файл WebVTT, обычный текстовый файл со строками и временными метками. Браузер добавляет в элементы управления кнопку субтитров и выводит текст поверх видео:

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.

Субтитры помогают глухим и слабослышащим зрителям, людям, которые смотрят без звука, и всем, кто смотрит видео на неродном языке. Добавьте дорожке default, чтобы она показывалась без клика. Файлу субтитров с другого домена нужны заголовки CORS и crossorigin у видео.

Оформление и управление из JavaScript

Видео это замещаемый элемент, как картинка: width: 100% с height: auto делает его адаптивным, а object-fit решает, как оно заполняет блок другой формы. JavaScript получает play(), pause(), currentTime, volume и события вроде play, pause и 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() возвращает промис, который отклоняется, когда браузер блокирует воспроизведение (например, автовоспроизведение со звуком), поэтому в рабочем коде его нужно обрабатывать через catch. Делать собственные элементы управления необязательно; встроенные controls доступны с клавиатуры и переведены, а собственным кнопкам придется это воспроизвести. Видео с YouTube или Vimeo встраивают через их плеер в iframe.

Частые ошибки

Autoplay без muted. Браузер его блокирует. Добавьте muted и playsinline.
Забытый controls. Если вы не сделали свои элементы управления, читателю нечем запустить видео.
Нет width и height. Страница прыгает, когда загружается видео. Задайте оба, а затем масштабируйте через CSS.
Огромные файлы. Сжимайте видео для веба и используйте preload="none" или "metadata" для видео ниже на странице.
Нет субтитров у видео с речью. Добавьте <track kind="captions">.

Часто задаваемые вопросы

Как вставить видео в HTML?

Используйте <video src="movie.mp4" controls width="640"></video>. Атрибут controls показывает кнопку воспроизведения, шкалу времени и громкость браузера. Без него видео показывает первый кадр (или постер), и пользователь не может его запустить.

Почему не работает autoplay у видео?

Браузеры блокируют автовоспроизведение со звуком. Добавьте muted рядом с autoplay, а также playsinline, чтобы iPhone воспроизводил видео на странице, а не на весь экран: <video autoplay muted loop playsinline>.

Какой формат видео использовать для веба?

MP4 с видео H.264 воспроизводится во всех современных браузерах, поэтому это надежный выбор по умолчанию. Можно первым указать через <source> более легкий файл WebM, и браузер выберет первый поддерживаемый формат.

Как добавить обложку к видео?

Используйте атрибут poster с URL картинки: <video poster="thumb.jpg" controls>. Картинка показывается, пока видео не начнет воспроизводиться.

Как добавить субтитры к видео в HTML?

Добавьте внутрь video <track kind="captions" src="captions.vtt" srclang="en" label="English">. Файл использует формат WebVTT, а браузер показывает кнопку субтитров в своих элементах управления.

Как сделать видео адаптивным?

Задайте в CSS width: 100% и height: auto (или max-width: 100%). Видео масштабируется вместе с контейнером и сохраняет пропорции.

Связанные концепции