/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, data-*, dir, draggable, dropzone, 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>
<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