belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...
HTML >>>

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

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

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

Рассмотрим пример 5.3 добавления видеофайла на веб-страницу. Отображение соответствующей страницы показано на рис. 5.4.

<!DOCTYPE html>
<html>
<head>
	<!-- Незабываем задавать служебные элементы -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>Видеозаписи</title>
</head>
<body>
		
	<!-- Воспроизведет данное видео не во всех браузерах -->
	<p>
		<video src="dog_1.mp4" controls></video> &ndash; первый ролик.
	</p>
	
	<!-- Поэтому используются элементы 'source' -->
	<p>
		<video poster="dog_foto.png" controls>
		<source src="dog_1.ogg">
		<source src="dog_1.mp4">
		</video> &ndash; второй ролик с постером.
	</p>
</body>
</html>

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

Рис. 5.4. Отображение страницы с использованием элемента 'video' браузером

Контрольные вопросы и задания

  1. Для чего используется элемент 'video'? Опишите его атрибуты.

Словарь новых английских слов

preload [ˌpriːˈləʊd] – предварительная загрузка.
loop [luːp] – петля, делать петлю.
muted [ˈmjuːtɪd] – приглушенный.
controls [kənˈtrəʊlz] – панель управления.
poster [ˈpəʊstə] – афиша, плакат.
plug in [ˈplʌɡ ɪn] – подключать.
frame [freɪm] – рамка, оболочка, фрейм.
allow [əˈlaʊ] – позволять, разрешать.
advertising [ˈadvətʌɪzɪŋ] – реклама.
form [ˈfɔːm] – форма, бланк, фигура.
pointer [ˈpɔɪntə] – указатель, стрелка.
lock [lɒk] – запирать, замок, затвор.
popup [ˈpəpʌp] – всплывающее меню.
same [seɪm] – то же самое, такой же.
origin [ˈɔːrɪdʒɪn] – источник, начало.
top [tɒp] – верхний, высший.
navigation [navɪˈɡeɪʃ(ə)n] – навигация.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх