HTML5: добавление видеоконтента — элемент video
Благодаря элементам video и audio, видео- и аудиоконтент наконец-то становится пассажиром первого класса в Сети. А это означает следующее:
1. Добавлять видео- и аудиоконтент в веб-документы так же просто, как добавлять текст, гиперссылки и изображения.
2. Видео и аудио можно использовать вместе с другими базовыми веб-технологиями: например, можно применять SVG-фильтры и создавать CSS для видеоконтента.
Этих целей можно достичь с помощью элементов video и audiо, так как они позволяют встраивать видео- и аудиоконтент прямо в веб-документы без использования плагинов. А благодаря общему интерфейсу этих элементов HTMLMediaElement видео- и аудиоконтент можно программно обрабатывать с помощью скриптов DОМ точно так же, как и другой веб-контент первого класса.
Встраивание видео
Следующий пример показывает, как добавить в HTML-документ видео и элементы управления воспроизведением.
Атрибут src в этом примере выполняет ту же роль, что и одноименный атрибут элемента img: он содержит URL встраиваемого видеофайла.
Назначение атрибута controls очевидно: он заставляет браузер отобразить элементы управления, с помощью которых пользователи могут запустить или приостановить воспроизведение, изменить громкость, перейти к произвольному месту видеофайла, а также открыть видео в новом окне или использовать полноэкранный режим.
Одним словом, атрибут controls используется для того, чтобы добавить точно такие же элементы управления воспроизведением, как у обычного встраиваемого проигрывателя. Разница в том, что в случае элемента video браузер сам генерирует элементы управления и напрямую взаимодействует с видеоконтентом, не перепоручая этого плагину.
Поддержка альтернативных видеоформатов
Если вы достаточно наблюдательны, то могли заметить, что в предыдущем примере используется видеофайл video.fjo с незнакомым расширением. И действительно, такого формата на самом деле не существует. Предполагается, что вместо .fjo имя файла должно заканчиваться расширением, соответствующим такому видеоформату, который поддерживается всеми современными браузерами.
Проблема в том, что в настоящее время не существует ни одного такого формата: Firefox поддерживает файлы Ogg Vorbis, которые кодируются с помощью Theora, a Safari, похоже, в скором времени остановится на формате MPEG4, который кодируется с помощью Н.264. Попытки производителей прийти к соглашению и выбрать стандартный видеоформат продолжаются, однако до окончательного разрешения этой проблемы еще довольно далеко.
Чтобы сделать видео доступным для большинства пользователей, потребуется кодировать файл в нескольких форматах; при этом вместо того, чтобы использовать атрибут src для элемента video, можно добавлять элементы source в качестве его.
Браузер будет просматривать элементы source до тех пор, пока не найдет видеофайл в том формате, который он может воспроизвести.
Для браузеров, не поддерживающих элемент video
Теперь рассмотрим еще один вопрос: как добавить видеоконтент для устаревших браузеров, в которых нет поддержки элемента video. Решить эту проблему можно, например, добавив элемент object, встраивающий видео с помощью плагина.
Пользователи, в браузерах которых не установлен (или отключен) соответствующий плагин, не смогут просмотреть содержимое, добавленное с помощью элемента object.
- ↑ Веб-дизайн
- ← HTML5: Nav-элемент и его возможности
- → HTML5: элемент canvas / CanvasRenderingContext2D