Примечание: данный функционал недоступен в Internet Explorer 8 и более ранних версиях. Элемент <video> - это незаменимый инструмент для интеграции видеоконтента на веб-страницах. Однако стоит помнить, что браузеры не всегда «понимают» все существующие форматы видео. Чтобы избежать разочарования пользователей и гарантировать корректную работу, важно предоставлять файлы сразу в нескольких форматах. Для этой цели внутри тега <video> размещаются элементы <source>. В качестве полезного бонуса: любой текст, который вы разместите непосредственно внутри тега <video>, станет видимым для пользователя только в том случае, если его браузер не поддерживает сам элемент видео или используемый формат файла. Это отличное решение для обеспечения доступности! Примечание: Атрибуты controls, autoplay и loop имеют булев тип. Это значит, что им не обязательно присваивать значения: если атрибут указан - функция активна, если отсутствует - выключена. Доступные атрибуты:- autoplay:
- Активирует автоматическое воспроизведение видео сразу после полной загрузки файла. Логический атрибут
autoplay можно определить любым из следующих способов:video autoplay video autoplay="autoplay" video autoplay="" - controls:
- Показывает стандартный набор элементов управления плеером: кнопки запуска и паузы, шкалу перемотки, регулятор громкости, режим полноэкранного просмотра, а также субтитры (при их наличии). Значения для логического атрибута
controls задаются так:video controls video controls="controls" video controls="" - height:
- Задаёт высоту окна видеоплеера в пикселях (например:
height="200"). - loop:
- Включает бесконечное повторение ролика: после завершения воспроизведения видео будет автоматически начинаться заново. Варианты указания логического атрибута
loop:video loop video loop="loop" video loop="" - muted:
- Позволяет отключить звук по умолчанию, заставляя видео воспроизводиться без звука. Пользователь сможет включить его самостоятельно при необходимости. Возможные варианты записи атрибута
muted:video muted video muted="muted" video muted="" Примечание: атрибут muted не работает в Internet Explorer 9 и более ранних версиях. - poster:
- Ссылка на изображение (картинку), которое будет отображаться вместо видео до начала воспроизведения или во время загрузки. Если этот атрибут отсутствует, браузер по умолчанию покажет первый кадр видеоролика.
- preload:
- Определяет поведение браузера при загрузке данных, если не указан атрибут
autoplay. Важно: при совместном использовании с autoplay, значение preload игнорируется. Доступны три варианта поведения:- auto - загрузка видеофайла начнётся сразу после загрузки страницы;
- metadata - браузер соберёт метаданные: размер файла, первый кадр, список воспроизведения и длительность;
- none - загрузка произойдёт только после нажатия кнопки «Воспроизведение».
Примечание: атрибут preload не поддерживается браузером Internet Explorer. - src:
- Указывает путь к видеофайлу (может быть относительным или абсолютным).
- width:
- Задаёт ширину окна видеоплеера в пикселях (например:
width="200").
Кроме того, тег <video> поддерживает и другие стандартные HTML-атрибуты. Пример использования:<video width="400" height="257" controls="controls" poster="video/duel.jpg"> <source src="movie.ogg" type="video/ogg"> Ваш браузер не поддерживает тег video. </video>
|