Тег <video>
Синтаксис
<video>
<source src="...">
</video>
или
<video src="...">...</video>
Описание
Тег <video> (от англ. video — видео) используется для добавления видео контента на страницу.
Путь к видеофайлу задаётся с помощью атрибута src или вложенного тега <source>. Контейнер <video> может содержать в себе сразу несколько тегов <source>, каждый из которых задает вариации одного и того же видео с различными версиями кодеков. Кодек — файл-формула, которая определяет, каким образом можно «упаковать» видеоконтент и, соответственно, воспроизвести видео.
Внимание!
Для правильного воспроизведения видеофайлов необходимо задавать несколько форматов одновременно, так как не все браузеры поддерживают видеофайлы всех форматов.
Тег <video> может содержать субтитры (тег <track>).
На данный момент существует 3 формата видео: MP4/MPEG-4, OGG и WebM.
MP4/MPEG-4 — самый популярный видео формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Расширение файла MP4 используется в основном для мультимедийного формата файла MPEG-4. Формат MPEG-4 – это стандарт, разработанный группой экспертов Moving Picture Experts Group (MPEG), как определено в MPEG-4, содержит MPEG-4 закодированный видео и аудио контент в кодировке Advanced Audio Coding (AAC). Обычно используется расширение файла MP4.
WebM — открытый формат мультимедиа, представленный компанией Google. Хранит видео, сжатое при помощи технологии VP8 и аудио, сжатое с помощью компрессии Ogg Vorbis. Часто всего применяется для онлайн-отправки видео с помощью HTML5.
OGG — открытый стандарт формата мультимедиа-контейнера, являющийся основным файловым и потоковым форматом для мультимедиа-кодеков фонда Xiph.Org, а также название проекта, занимающегося разработкой этого формата и кодеков для него. Как и все технологии, разрабатываемые под эгидой Xiph.Org, формат Ogg является открытым и свободным стандартом, не имеющим патентных или лицензионных ограничений.
|
Формат |
Тип |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| MP4 | video/mp4 | Да | Да | Да | Да | Да |
| WebM | video/webm | Да | Да | Да | Нет | Да |
| Ogg | video/ogg | Да | Да | Да | Нет | Да |
Атрибуты, которые можно использовать в теге <video>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.
Атрибуты
| Атрибут | Значение | Описание |
| autoplay | autoplay |
Указывает, что видео запустится автоматически, как только оно будет готово |
| controls | controls | Отображает встроенные элементы управления мультимедийных файлов (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости) |
| height | px | Устанавливает высоту видеопроигрывателя |
| loop | loop | Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения |
| muted | muted | Указывает, что видео будет воспроизводиться беззвучно |
| poster | URL-адрес | Задает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения |
| preload | auto metadata none |
Указывает, как видео должно загружаться при загрузке страницы. Атрибут игнорируется, если установлен атрибут autoplay |
| src | URL-адрес | Указывает URL-адрес видео файла |
| width | px | Устанавливает ширину видеопроигрывателя |
Пример
HTML-код:
<video controls>
<source src="/video/flower.mp4" type="video/mp4">
</video>
Отображение в браузере:
Параметры CSS по умолчанию
Нет.
Поддержка браузера
|
Элемент |
Chrome |
Opera |
Firefox |
Safari |
Microsoft Edge |
| <video> | Да | Да | Да | Да | Да |