Мы уже говорили на предыдущем уроке, что для того, чтобы заменить тег и легче включить звуковой контент на веб-странице. HTML5 ввел тег <audio> <object>
Как и в случае со звуком, этот тег <object> также часто использовался для добавления интерактивных видеороликов на наши веб-страницы (а также для содержимого Flash и других, иногда сложных и тяжелых компонентов). Наряду с тэгом <audio>, появление HTML5, поэтому, почти естественно, ввело еще один тэг очень похожего назначения, предназначенный именно для воспроизведения фильмов и клипов: тэг <video>, предмет этого урока.
Мы также начнем с простого примера использования:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video> Также в этом случае, как видно по тегу <audio>, есть атрибут controls, присутствие которого указывает на необходимость отображения пользовательских элементов управления для управления воспроизведением видео. Вместе с controls атрибутами width и height позволяют указать размер видео.
Мы можем добавить к тегу два других атрибута <video>, autoplay и loop: первый вызывает автоматическое выполнение видео, а второй заставляет его автоматически воспроизводиться в непрерывном цикле. Оба эти атрибута часто используются путем пропуска атрибута controls, например, для создания анимированных обоев или неинтерактивных видео в непрерывном цикле.
Аналогично тому, что мы видели для тега <audio>, в тег <video> можно вставить один или несколько элементов типа <source>, используемых для указания файла, который мы хотим воспроизвести. В предыдущем примере мы указали воспроизводить файл video.mp4 через атрибут src, а также предусматриваем явное указание типа file ( type="video/mp4").
Использование нескольких тегов <source> позволяет нам указать, какие файлы следует воспроизводить в случае проблем с браузером. Рассмотрим, например, следующий код:
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Браузер не поддерживает тег видео </video>
В этом случае браузер сначала попытается воспроизвести файл, указанный в первом теге <source>. Если (и только если) по какой-либо причине файл не может быть воспроизведен, браузер попытается воспроизвести второй файл и т. Д. Для всех <source> следующих тегов . Наконец, для обеспечения обратной совместимости с предыдущими версиями HTML вы можете указать строку (или другой код HTML), которая будет отображаться, если браузер не поддерживает тег <video>.