Для универсального воспроизведения в браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно.
Демо¶
Изображения и мультимедиаareaaudioimgfigcaptionfiguremaptrackvideoembediframeobjectparampicturesource
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
autoplay : Видео начинает воспроизводиться автоматически после загрузки страницы.
buffered : Атрибут для определения временных диапазонов буферизованных носителей. Этот атрибут содержит объект TimeRanges.
controls : Добавляет панель управления к видеоролику.
crossorigin : Этот атрибут указывает, следует ли использовать CORS для извлечения связанного изображения.
height : Задаёт высоту области для воспроизведения видеоролика.
loop : Повторяет воспроизведение видео с начала после его завершения.
muted : Логический атрибут, который определяет значение по умолчания для аудио дорожки, содержащуюся в видео. Если атрибут указан, то аудио дорожка воспроизводиться не будет. Значение атрибута по умолчанию – “ложь”, и это означает, что звук будет воспроизводиться, когда видео воспроизводится.
played : Атрибут TimeRanges, указывающий все диапазоны воспроизводимого видео.
poster : Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload : Используется для загрузки видео вместе с загрузкой веб-страницы.
src : Указывает путь к воспроизводимому видеоролику.
width : Задаёт ширину области для воспроизведения видеоролика.
Autoplay¶
При наличии этого атрибута видео начинает воспроизводиться автоматически после загрузки страницы. Атрибут autoplay отменяет действие preload.
В качестве значения указывается autoplay, также допустимо вообще не указывать никакое значение.
Значение по умолчанию
По умолчанию этот атрибут выключен.
Controls¶
Добавляет панель управления к видеоролику. Вид панели и её содержимое зависит от браузера и может в себя включать кнопку воспроизведения, паузы, перемотки, перехода в полноэкранный режим; ползунка для изменения уровня громкости и др.
В качестве значения указывается controls, также допустимо писать атрибут без значения.
Height¶
Атрибут height задаёт высоту области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в заданные рамки, но его пропорции при этом остаются прежними.
Любое целое положительное число в пикселях или процентах.
Исходная высота берётся из параметров видео. Если эти параметры не доступны, тогда height принимается равной высоте картинке, заданной атрибутом poster. В противном случае высота видео устанавливается 150 пикселей.
Loop¶
Зацикливает воспроизведение видео, оно повторяется каждый раз с начала после завершения.
В качестве значения указывается loop, также допустимо писать атрибут без значения.
Poster¶
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не вопроизводится. Само изображение может быть в любом доступном формате: GIF, PNG, JPEG. Если атрибут poster не указан, браузер постарается отобразить первый кадр видео.
В качестве значения принимается полный или относительный путь к графическому файлу.
Preload¶
Используется для загрузки видео вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay.
none : Не загружать видео.
metadata : Загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.).
auto : Загрузить видео целиком при загрузке страницы.
Src¶
В качестве значения принимается полный или относительный путь к файлу.
Width¶
Атрибут width задаёт ширину области для воспроизведения видеоролика. Само видео меняет свои размеры в большую или меньшую сторону, чтобы вписаться в указанную ширину, но его пропорции при этом не искажаются.
Исходная ширина берётся из параметров видео, если это значение не доступно, тогда width принимается равной ширине картинке, заданной атрибутом poster. Если этот атрибут не установлен, ширина устанавливается как 300 пикселей.
Спецификации¶
Первый пример воспроизводит видео, начиная воспроизведение, как только будет получено достаточное количество видео, чтобы позволить воспроизведение без паузы для загрузки еще. До начала воспроизведения видео на его месте отображается изображение “posterimage.jpg”.
Второй пример позволяет пользователю выбирать различные субтитры.
Пример 3¶
Пример нескольких источников
Поддержка браузерами¶
Can I Use video? Data on support for the video feature across the major browsers from caniuse.com.
Поддержка WebM видео-кодека:
Can I Use webm? Data on support for the webm feature across the major browsers from caniuse.com.
Поддержка Ogg/Theora видео-кодека:
Can I Use ogv? Data on support for the ogv feature across the major browsers from caniuse.com.
Поддержка MPEG-4/H.264 видео-кодека:
Can I Use mpeg4? Data on support for the mpeg4 feature across the major browsers from caniuse.com.
Поддержка HEVC/H.265 видео-кодека:
Can I Use hevc? Data on support for the hevc feature across the major browsers from caniuse.com.
Встраивает видео на страницу 📺
Одно видео в двух разных форматах и текст, который появится, если оба формата не поддерживаются браузером:
На случай, если браузер не поддерживает встроенные видео, можно вставить между тегами текст или картинку:
С помощью атрибутов мы можем настроить кнопки управления, зацикливание видео и другие параметры.
Параметры воспроизведения и элементы управления
💡 Если не указать атрибут controls, то браузер не будет показывать стандартные элементы управления видеоплеером. Создать свои элементы управления можно с помощью JavaScript.
💡 Используйте CSS-свойство object-position, чтобы настроить расположение видео внутри элемента, а также object-fit, чтобы настроить размер видео относительно элемента.
💡 Атрибут preload носит рекомендательный характер для браузера: будет ли видео предварительно загружено, зависит от настроек конкретного браузера.
💡 Высоту height и ширину width видеоплеера лучше задавать через CSS. По умолчанию эти параметры будут такими, как у видео, которое вы встраиваете.
Вот простой пример, где у видео есть обложка poster, которую покажут сразу, и текст на случай, если видео не загрузится.
Открыть демо в новой вкладке
А теперь добавим несколько форматов одного видео. Браузер попробует воспроизвести первый из поддерживаемых им форматов: сначала попробует проиграть MP4, потом OGG, затем AVI. Если встроенные видео вообще не поддерживаются, то появится соответствующее сообщение:
Советует
🛠 Не забывайте добавлять хотя бы два дублирующих видео в формате WebM и MP4. Суть в том, что WebM очень круто сжимает ролики, и если браузер поддерживает формат, то видео загрузится сильно быстрее и не расходует трафик. Ну а если вы используете старый браузер без поддержки WebM, то откроется обычный MP4 и сработает как обычно.