Видео в HTML

Видео HTML

Элемент <video> используется для показа видео на веб-странице.

Элемент HTML <video>

Чтобы показать видео в HTML, используйте элемент <video> с одним или несколькими элементами <source> для видеофайлов.

Пример

Видео с элементами управления и двумя форматами источника.

Видео 320x240 с атрибутом controls и двумя файлами-источниками (movie.mp4 и movie.ogg), а также резервный текст для браузеров, не поддерживающих тег video.

> Вывод: полная HTML-страница

Prompt

Видео 320x240 с атрибутом controls и двумя файлами-источниками (movie.mp4 и movie.ogg), а также резервный текст для браузеров, не поддерживающих тег video.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовое видео</title>
</head>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег video.
</video>

</body>
</html>

Как Это Работает

Атрибут controls добавляет элементы управления видео, такие как воспроизведение, пауза и громкость. Рекомендуется всегда задавать width и height, иначе страница может мигать во время загрузки видео. Элемент <source> позволяет предложить несколько видеофайлов; браузер использует первый распознанный формат. Текст между <video> и </video> отображается только в браузерах, не поддерживающих этот элемент.

Автовоспроизведение <video> HTML

Чтобы видео запускалось автоматически, используйте атрибут autoplay.

Примечание: Браузеры на базе Chromium обычно блокируют автовоспроизведение, но автовоспроизведение без звука всегда разрешено. Добавьте muted после autoplay, чтобы видео запускалось автоматически (но без звука).

Автовоспроизведение

Видео, которое запускается автоматически.

Видео 320x240, которое начинает воспроизводиться автоматически с помощью атрибута autoplay, с источниками mp4 и ogg и резервным текстом.

> Вывод: полная HTML-страница

Prompt

Видео 320x240, которое начинает воспроизводиться автоматически с помощью атрибута autoplay, с источниками mp4 и ogg и резервным текстом.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Автовоспроизведение видео</title>
</head>
<body>

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег video.
</video>

</body>
</html>

Автовоспроизведение без звука

Видео с автовоспроизведением без звука, чтобы работать в браузерах Chromium.

Видео 320x240, которое автоматически воспроизводится без звука (атрибуты autoplay и muted), с источниками mp4 и ogg и резервным текстом, чтобы оно могло запускаться автоматически в браузерах на Chromium.

> Вывод: полная HTML-страница

Prompt

Видео 320x240, которое автоматически воспроизводится без звука (атрибуты autoplay и muted), с источниками mp4 и ogg и резервным текстом, чтобы оно могло запускаться автоматически в браузерах на Chromium.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Автовоспроизведение видео без звука</title>
</head>
<body>

<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Ваш браузер не поддерживает тег video.
</video>

</body>
</html>

Поддержка Браузеров

Элемент <video> поддерживается всеми современными браузерами (начиная с Chrome 4, Edge 9, Firefox 3.5, Safari 4 и Opera 10.5).

Форматы Видео HTML

HTML поддерживает три видеоформата: MP4, WebM и Ogg. MP4 и WebM работают во всех основных браузерах; Ogg работает везде, кроме Safari.

Видео HTML - Типы Медиа

Типы медиа для поддерживаемых форматов: MP4 — это video/mp4, WebM — это video/webm, а Ogg — это video/ogg.

Видео HTML - Методы, Свойства и События

HTML DOM определяет методы, свойства и события для элемента <video>. Они позволяют загружать, воспроизводить и приостанавливать видео, задавать длительность и громкость, а также реагировать на такие события, как запуск или приостановка видео.

Использование JavaScript

Кнопки, которые воспроизводят, приостанавливают и изменяют размер видео с помощью JavaScript.

Страница, управляющая видео с помощью JavaScript: кнопки для воспроизведения/паузы видео и изменения его размера — больше, меньше или обратно до нормального, с использованием методов и свойств DOM video.

> Вывод: полная HTML-страница

Prompt

Страница, управляющая видео с помощью JavaScript: кнопки для воспроизведения/паузы видео и изменения его размера — больше, меньше или обратно до нормального, с использованием методов и свойств DOM video.

Вывод: полная HTML-страница

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Видео с JavaScript</title>
</head>
<body>

<div style="text-align:center">
  <button onclick="playPause()">Play/Pause</button>
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br><br>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Ваш браузер не поддерживает HTML video.
  </video>
</div>

<script>
var myVideo = document.getElementById("video1");

function playPause() {
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}

function makeBig() {
  myVideo.width = 560;
}

function makeSmall() {
  myVideo.width = 320;
}

function makeNormal() {
  myVideo.width = 420;
}
</script>

</body>
</html>

Теги Видео HTML

Связанные с видео теги: <video> (определяет видео), <source> (определяет несколько медиаресурсов для <video> и <audio>) и <track> (определяет текстовые дорожки в медиаплеерах).