Вставка видеороликов на html-страницу
http://belarusweb.net
Основы создания сайтов

Использование видеороликов на странице.
Теги <video> и <source>

Тег <video> и его атрибуты

Для размещения на странице видеороликов в HTML 5 используется элемент 'video', который формируется парным тегом <video> и отображается браузером, как строчный элемент. Он используется аналогично элементу <audio>, но только для видеороликов. Кроме того, у него присутствуют дополнительные атрибуты:

  • poster – пока видео не доступно или не воспроизводится, будет отображаться картинка, абсолютный или относительный путь к которой указывается в качестве значения атрибута; если атрибут не указан, то браузер попытается отобразить первый кадр видеоролика;
  • width – задает ширину области для просмотра видеоролика;
  • height – задает высоту области для просмотра видеоролика.

Тег <source> и его атрибуты

В данный момент браузерами поддерживается ограниченный набор кодеков, индивидуальный для каждого браузера. Поэтому, чтобы сделать произведение видеоролика максимально универсальным, необходимо кодировать видеофайлы разными кодеками и добавлять их в контейнер 'video' при помощи элементов 'source', указав в случае необходимости их атрибут type, который принимает значения в формате: type="MIME-тип; codecs='кодек'".

Рассмотрим пример 5.2 добавления видеоролика на веб-страницу (для просмотра примера в браузере используйте значок 'Планета').

<!DOCTYPE html>
<html>
<head>
	<!--  Незабываем задавать служебные элементы  -->
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/">
	<title>Видеозаписи</title>
</head>
<body>
		
<p>
	<video poster="html/html_images/textbook_images/dog_foto.jpg" controls>
		<!-- Атрибуты type опускаем, т.к. браузеры попытаются -->
		<!-- подобрать нужный кодек из доступного набора -->
		<source src="belarusweb_files/video/Саймон.ogg">
		<source src="belarusweb_files/video/Саймон.mp4">
	</video> <br>
	&ndash; ролик имеет постер и контрольную панель.
</p>
	
</body>
</html>

Пример 5.2. Использование элемента 'video'  

Опять же, внешний вид контрольной панели может отличаться от браузера к браузеру, однако основной набор кнопок (например, воспроизведение/пауза и уровень громкости) будет присутстовать во всех браузерах.