/html/video:> Видео_

Элемент video

Синтаксис

HTML
<video src="..."> ... </video>
или
<video>
  ...
  <source src="...">
  ...
</video>

Описание

Элемент video (от англ. "video" ‒ «видео») вставляет видео файл в HTML-документ. С его помощью можно воспроизводить видео файлы, а так же устанавливать различные настройки воспроизведения этих файлов (повтор, автовоспроизведение, картинка по умолчанию). При этом необходимо помнить, что не все веб-браузеры могут воспроизводить видео с одним и тем же кодеком. Поэтому для обеспечения кроссбраузерности на страницу необходимо добавлять видео с различными версиями кодеков.

Примечание

  • Если браузер не поддерживает данный элемент, то вместо видео выводится всё содержимое элемента, кроме технических элементов (таких как track, source). По этому на подобный случай рекомендуется вкладывать в данный элемент текст с соответствующей надписью, а так же можно вместе с текстом вложить ссылку для скачивания представленного видео файла.
  • Данному элементу можно добавить субтитры с помощью элемента track.

Условия использования

На данный момент существует три видео формата поддерживаемых данным элементом ‒ это «MP4», «WebM» и «Ogg».


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Примечание: смотрите также форматы поддерживаемые браузерами.


Спецификация

Верс. Раздел
HTML
2.0 ---
3.2 ---
4.01 ---
5.0 4.7.6 The video element
5.1 4.7.10. The video element
XHTML
1.0 ---
1.1 ---

Атрибуты

autoplay
Задаёт автоматическое воспроизведение видео (сразу после полной загрузки страницы).
controls
Устанавливает «штатную» панель управления видео.
crossorigin
Определяет то как элемент обрабатывает crossorigin запросы.
height
Задаёт высоту области воспроизведения.
loop
Устанавливает автоповтор видео.
mediagroup
Группы медиа элементов вместе с неявной MediaController.
muted
Отключение звука видео.
poster
Устанавливает фоновое изображение для области воспроизведения.
preload
Указывает веб-браузеру, что видео файл необходимо загрузить вместе с документом.
src
Указывает расположение видео файла.
width
Задаёт ширину области воспроизведения.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Элемент video</title>
</head>
<body>
<h1>Пример использования элемента "video"</h1>
<video width="500" height="375" poster="/html/html-images/The_New_CLS.jpg" controls="controls">
<source src="/examples/multimedia/video/The_New_CLS.mp4" type="video/mp4">
<source src="/examples/multimedia/video/The_New_CLS.webm" type="video/webm">
<source src="/examples/multimedia/video/The_New_CLS.ogv" type="video/ogg">
<p>Ваш веб-браузер не поддерживает элемент "video".</p>
</video>
</body>
</html>
Элемент video