Тег <video> HTML видео на сайт

Рейтинг: 5 из 5, голосов 2
+++++

Тег <video> HTML используется для вставки на сайт воспроизводимого видео. Обычно содержит вложенные элементы <source> для указания нескольких вариантов источника видео-файла.

Этот тег был введен в HTML5.

Синтаксис

<video>вложенные теги / альтернативный текст</video>

Вложенные теги. Вы можете указывать источник видео с помощью тегов <source>.

Альтернативный текст. Вы можете указать внутри тега <video> альтернативный текст. Он будет выведен, если ваш браузер не поддерживает тег.

Примеры использования <video> в HTML коде

<!DOCTYPE html>
<html>
<head>
<title>Вставка видео на сайт</title>
</head>
<body>
<video width="1280" height="720" autoplay controls loop>
<source src="/video/my_video.mp4" type="video/mp4">
<source src="/video/my_video.ogg" type="video/ogg">
Воспроизведение видео-файла не поддерживается браузером
</video>
</body>
</html>

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

Тег Google Chrome Internet Explorer Mozilla FireFox Safari Opera
<video> Да 9+ Да Да Да
Поддержка форматов
MP4 Да Да Да Да Да
WebM Да Нет Да Нет Да
Ogg Да Нет Да Нет Да

Атрибуты

Атрибут Значения Описание
autoplay не указывается / autoplay

Если указан, видео будет воспроизведено, как только будет загружено.

controls не указывается / controls

Если указан, будут выведены кнопки управления плеером (play, pause и т.д.).

height число

Устанавливает высоту видео.

loop не указывается / loop

Если указан, видео будет циклически воспроизводиться до закрытия страницы (после завершения, воспроизведение начнется сначала).

muted не указывается / muted

Если указан, видео будет воспроизведено без звука.

poster URL

Адрес картинки - превью. Превью выводится на месте видеоплеера пока воспроизведение видео не началось.

preload

auto
metadata
none

Определяет особенности загрузки видео элемента.
auto - загружать видео полностью при загрузке страницы.
metadata - при загрузке страницы загружается только техническая информация (метаданные, например, продолжительность видео).
none - не загружать видео при загрузке страницы.

Если указан атрибут autoplay, атрибут preload будет проигнорирован.

src URL

Адрес видео-файла.

width число

Устанавливает ширину видео.

Оцените, насколько полезна эта статья
+++++
Эти материалы могут быть вам полезны
Тег <audio> HTML аудио, музыкаТег <source> HTML источник ресурса
Оставьте комментарий

Отправляя форму, я даю согласие на обработку персональных данных.