Давайте пока что постараемся позабыть о трудностях и насладиться простотой элемента <video>. У этого элемента несколько атрибутов, предназначенных для установки свойств и конфигурации по умолчанию. Атрибуты width и height, как и у любого другого элемента HTML, объявляют размеры элемента <video> или окна проигрывателя. Размер самого видео автоматически подгоняется под эти значения, однако они не предназначены для растягивания картинки, поэтому их используют для ограничения области видеосодержимого и сохранения единообразия дизайна. Атрибут src, как говорилось ранее, позволяет указать источник видео. Этот атрибут можно заменить элементом <source> и его собственным атрибутом src и объявить несколько источников для видео в разных форматах (как в следующем примере).
Листинг 5.2. Работающий в разных браузерах видеопроигрыватель с элементами управления по умолчанию
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Видeопроигрывaтeль</title>
</head>
<body>
<section id="player">
<video id="media" width="720" height="400" controls>
<source src="http://minkbooks.com/content/trailer.mp4">
<source src="http://minkbooks.com/content/trailer.ogg"> </video>
</section>
</body>
</html>
В листинге 5.2 мы расширили определение элемента <video>, и теперь между его тегами находятся два элемента <source>. Они определяют разные источники видео, для того чтобы браузер мог сделать правильный выбор. Браузер считывает теги <source> и, основываясь на поддерживаемых форматах (MP4 или OGG), принимает решение, какой из файлов следует воспроизвести.
Создайте новый пустой HTML-файл с именем video. html (или любым другим), скопируйте в него код из листинга 5.2 и откройте в разных браузерах, чтобы проверить функционирование элемента <video>.
Добавить комментарий