Вы наверняка заметили в теге <video> один атрибут, который появился как в листинге 5.1, так и в листинге 5.2. Атрибут controls — один из нескольких специфических атрибутов, доступных для данного элемента. Он отображает элементы управления видео, предоставляемые самим браузером. Каждый браузер активирует собственный интерфейс, при помощи которого пользователь может начать воспроизведение видео, приостановить его, перейти к определенному кадру и т. п.
Помимо controls можно использовать также следующие атрибуты:
— autoplay. Когда этот атрибут присутствует, браузер автоматически запускает воспроизведение видео, как только это становится возможным;
— loop. Если этот атрибут присутствует, браузер начинает воспроизведение видео с начала, как только ролик достигает конца;
— poster. Этот атрибут позволяет указать URL-адрес изображения, которое будет отображаться на экране, пока воспроизведение видео не запущено;
— preload. Этот атрибут может принимать три значения: none, metadata и auto. Первое указывает, что видео не должно кэшироваться и обычно используется для минимизации расходования трафика. Второе значение, metadata, рекомендует браузеру загрузить определенную информацию о ресурсе, например ширину и высоту картинки, продолжительность, первый кадр. Третье значение, auto, устанавливается по умолчанию и заставляет браузер загружать файл целиком, как только это становится возможным.
Листинг 5.3. Использование атрибутов тега <video>
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Видеопроигрыватель</title>
</head>
<body>
<section id="player">
<video id="media" width="720" height="400" preload controls loop poster="http://minkbooks.com/content/poster.jpg"> <source src="http://minkbooks.com/content/trailer.mp4"> <source src="http://minkbooks.com/content/trailer.ogg">
</video>
</section>
</body>
</html>
В листинге 5.3 мы заполнили элемент <video> атрибутами. Из-за того что поведение элемента в разных браузерах может различаться, некоторые атрибуты будут по умолчанию включены или выключены, а часть в зависимости от обстоятельств вообще не будет работать. Для того чтобы получить полный контроль над элементом <video> и воспроизводимым видеороликом, необходимо запрограммировать собственный видеопроигрыватель на JavaScript, пользуясь возможностями новых методов, свойств и событий, появившихся в спецификации HTML5.
Добавить комментарий