HTML :: Использование видеороликов на странице
Тег <video> и его атрибуты
Для размещения на странице видеороликов в HTML 5 используется элемент «video», который формируется парным тегом <video> (от англ. video – видеозапись) и отображается браузером, как строчный элемент. Он используется аналогично элементу <audio>, но только для видеороликов. Кроме того, у него присутствуют дополнительные атрибуты:
- poster – пока видео не доступно или не воспроизводится, будет отображаться картинка, абсолютный или относительный путь к которой указывается в качестве значения атрибута; если атрибут не указан, то браузер попытается отобразить первый кадр видеоролика;
- width – задает ширину области для просмотра видеоролика;
- height – задает высоту области для просмотра видеоролика.
Тег <source> и его атрибуты
В данный момент браузерами поддерживается ограниченный набор кодеков, индивидуальный для каждого браузера. Поэтому, чтобы сделать произведение видеоролика максимально универсальным, необходимо кодировать видеофайлы разными кодеками и добавлять их в контейнер «video» при помощи элементов «source», указав в случае необходимости их атрибут type, который принимает значения в формате: type="MIME-тип; codecs='кодек'".
Рассмотрим пример №1 добавления видеоролика на веб-страницу.
<!DOCTYPE html> <html> <head> <!-- Незабываем задавать служебные элементы --> <meta charset="utf-8"> <base href="https://site.name/"> <title>Видеозаписи</title> </head> <body> <p> <video poster="html/html_images/textbook_images/dog_foto.jpg" controls> <!-- Атрибуты type опускаем, т.к. браузеры попытаются --> <!-- подобрать нужный кодек из доступного набора --> <source src="html_files/video/Саймон.ogg"> <source src="html_files/video/Саймон.mp4"> </video> <br> – ролик имеет постер и контрольную панель. </p> </body> </html>
Пример №1. Использование элемента «video»
Опять же, внешний вид контрольной панели может отличаться от браузера к браузеру, однако основной набор кнопок (например, воспроизведение/пауза и уровень громкости) будет присутстовать во всех браузерах.
Быстрый переход к другим страницам
- Использование аудиозаписей на странице
- Использование видеороликов на странице
- Вставка на страницу объектов при помощи тега <embed>
- Вернуться к оглавлению учебника