HTML тег <video> дает возможность добавлять видео файлы на страницу. Для правильного воспроизведения видеофайлов необходимо задавать несколько форматов одновременно, так как не все браузеры поддерживают видео файлы всех форматов.
Путь к файлу задаётся с помощью атрибута src или вложенного элемента <source>. Элемент <video> может содержать в себе сразу несколько элементов <source>, каждый из которых задает вариации одного и того же видео с различными версиями кодеков.
Также тег <video> может содержать текст, который будет отображен в случае, если браузер не поддерживает формат видео файла.
На данный момент существует 3 формата видео: MP4/MPEG-4, OGG и WebM +. Для сжатия видеоданных и их восстановления используются специальные программы, видеокодеки. Кодек - это файл-формула, определяющая способ “упаковки” видеоконтента и его воспроизведения.
Для видео файла формата MPEG-4 используются видео кодек Н.264 и аудио кодек ААС. Для использования кодеков необходимо получить лицензию.
Для видео файла Ogg используются видео кодек Theora и аудио кодек Vorbis с открытым кодом.
Для видео файлов в формате WebM + используются видео кодек VP8 и аудио кодек Vorbis. Для их использования не требуется лицензии.
Синтаксис
HTML тег <video> парный, содержимое записывается между открывающим (<video>) и закрывающим (</video> ) тегами.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
</video>
<p>Некоторая информация о видео</p>
</body>
</html>Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Некоторая информация о видео</p>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| autoplay | autoplay | Указывает, что видео запустится автоматически, как только оно будет готово. |
| controls | controls | Отображает встроенные элементы управления мультимедийных файлов (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости). |
| height | pixels | Устанавливает высоту видеопроигрывателя. |
| loop | loop | Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения. |
| muted | muted | Указывает, что видео будет воспроизводиться беззвучно. Атрибут не поддерживается в IE9 и более ранних версиях. |
| poster | URL | Задает изображение, которое отображается в то время пока видео загружается, или пока пользователь не нажмет кнопку воспроизведения. |
| preload | auto metadata none |
Указывает, как видео должно загружаться при загрузке страницы. Атрибут игнорируется, если установлен атрибут autoplay. |
| src | URL | Указывает URL адрес видео файла. |
| width | pixels | Устанавливает ширину видеопроигрывателя. |
Тег <video> поддерживает также глобальные атрибуты и атрибуты событий.
Поддержка браузера
|
|
|
|
|---|---|---|---|
| 4+ | 3.5+ | 4+ | 10.5+ |
Практикуйте свои знания
