HTML :: Тег <video>
В HTML тег <video> (от англ. video – видеозапись) используется для добавления, воспроизведения и управления видеозаписями на веб-странице. Кроме того, его можно использовать и для воспроизведения потокового мультимедиа, используя интерфейс MediaStream.
Если между открывающим и закрывающим тегами элемента <video> содержится обычный текст, то он отображается в браузерах, которые не поддерживают этот элемент.
В данный момент браузерами поддерживается ограниченный набор кодеков, индивидуальный для каждого браузера. Поэтому, чтобы сделать произведение видеоролика максимально универсальным, необходимо кодировать видеофайлы разными кодеками и добавлять их в контейнер <video> при помощи элементов <source>.
Синтаксис
<video>
...
</video>
Закрывающий тег: обязателен.
Атрибуты
- autoplay – запись начинает проигрываться сразу же после загрузки страницы, при этом атрибут отменяет действие атрибута preload. Атрибут по умолчанию выключен и значений не принимает, т.е. является логическим.
- controls – добавляет стандартную панель управления, вид которой зависит от браузера; обычно это стандартные кнопки воспроизведения, паузы, перемотки и т.д. Атрибут по умолчанию выключен и значений не принимает.
- height – задает высоту видеоплеера в пикселях.
- loop – зацикливает видеозапись, заставляя проигрываться ее снова после завершения. Атрибут по умолчанию выключен и значений не принимает.
- muted – видеозапись после загрузки запускается с отключенным звуком, т.е. пользователь должен будет сам установить желаемый уровень громкости. Атрибут по умолчанию выключен и значений не принимает.
- poster – пока видео не доступно или не воспроизводится, будет отображаться картинка, абсолютный или относительный путь к которой указывается в качестве значения атрибута. Если атрибут не указан, то браузер попытается отобразить первый кадр видеоролика.
-
preload – служит для загрузки видеофайла во время загрузки страницы, принимает три значения:
- "none" – загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение (используется по умолчанию);
- "auto" – браузер сам может принимать решение о предварительной загрузке файла, при этом аудиофайл может быть загружен целиком во время загрузки страницы;
- "metadata" – загружать только служебную информацию, например, длительность записи.
- src – указывает путь к видеофайлу, который нужно воспроизвести. В качестве значения атрибута могут использоваться как абсолютные, так и относительные адреса (подробнее здесь).
- width – задает ширину видеоплеера в пикселях.
- Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/media.html#the-video-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/video
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="https://site.name/"> <title>Пример №1</title> </head> <body> <p> <video poster="html/html_images/textbook_images/dog_foto.jpg" controls> <source src="html_files/video/Саймон.ogg"> <source src="html_files/video/Саймон.mp4"> <track kind="subtitles" src="html_files/video/sub.en.vtt" srclang="en" label="English" > <track kind="subtitles" src="html_files/video/sub.ru.vtt" srclang="ru" label="Русский" default > Элемент video не поддерживается вашим браузером. </video> </p> <p> Содержимое файла sub.ru.vtt в формате субтитров VTT </p> <p> WEBVTT FILE 00:00.000 --> 00:08.490<br> Саймон смотрит в окно.<br><br> 00:08.500 --> 00:14.700<br> Саймон услышал друга.<br><br> 00:14.900 --> 00:44.000<br> Саймон общается с ним. </p> </body> </html>
Пример №1