Введение в видео HTML5

Брюс Лоусон, Патрик Х. Лауке · 11 февраля 2010 г.

Введение

Много лет тому назад в галактике, которая кажется находящейся очень далеко отсюда, мультимедиа в Web была ограничена мелодиями MIDI и анимированными изображениями GIF. По мере того как пропускающая способность сети увеличивалась, и технологии сжатия улучшались, музыка MP3 вытеснила MIDI, и стало делать успехи реальное видео. Всевозможные проприетарные плееры боролись за победу — Real Player, Windows Media Player, и т.д. — пока в 2005 г. не появился победитель: Adobe Flash. Это было обусловлено в большой степени вездесущностью его плагина и того факта, что он был выбран механизмом доставки для YouTube; Flash стал фактическим стандартом доставки видео в Web.

Одним из наиболее интересных новых свойств HTML5 является появление элемента <video>, который позволяет разработчикам включать видео непосредственно в свои страницы, без использования каких-либо решений на основе плагина. Компания Opera предложила стандартный элемент <video> как часть HTML5 в 2007 г., и он сделал свой официальный дебют в браузере Opera версии 10.50.

Эта статья знакомит с элементом <video> и некоторыми из связанных с ним API. Мы увидим, почему так важна собственная поддержка видео в браузерах, предоставим обзор разметки элемента, и опишем наиболее важные способы, с помощью которых можно управлять видео через JavaScript.

Зачем нужен элемент <video>?

До сих пор, если нужно было включить в Web-страницу видео, требовалось создавать достаточно сложную разметку. Вот пример, взятый прямо с сайта YouTube:

<object width="425" height="344">
  <param name="movie"
    value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param>
  <param name="allowFullScreen"
    value="true"></param>
  <param name="allowscriptaccess"
    value="always"></param>
  <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
    type="application/x-shockwave-flash" allowscriptaccess="always"
    allowfullscreen="true" width="425"
    height="344"></embed>
</object>

Прежде всего, имеется элемент <object> — общий контейнер для "чужих объектов" — чтобы включить фильм Flash. Чтобы обойти несовместимость браузеров, мы включили также элемент <embed> как запасной контент и дубликат большинства параметров <object>. Получившийся код достаточно громоздкий и не очень легко читается, и имеет другие проблемы — контент плагина не очень хорошо сочетается с другими технологиями на странице и имеет неустранимые проблемы доступности (о чем будет сказано позже).

Анатомия элемента <video>

По сравнению со сложной конструкцией, необходимой для включения Flash на страницу, основная разметка необходимая для <video> в HTML5 удивительно проста:

<video src=myVideo.ogv
  width=320
  height=240
  controls
  poster=image.jpg>
</video>

Отметим, что в примере мы воспользовались более свободным синтаксисом HTML5 — не требуется использовать кавычки вокруг значений атрибутов, и можно использовать простые логические атрибуты, такие как autoplay, в виде одиночных слов. При желании можно, конечно, использовать синтаксис XHTML controls="controls" и кавычки вокруг значений атрибутов. Очевидно, имеет смысл выбрать стиль кодирования, который лучше всего вам подходит, и придерживаться его для согласованности и облегчения обслуживания. В HTML5 требуется использовать синтаксис XHTML (и требуется также подавать свои страницы как код XML с правильным типом MIME, который в настоящее время не работает в Internet Explorer).

Атрибуты элемента <video>, использованные в примере кода, вполне понятны:

src

Источник элемента, задающий URL видео-файла.

width и height

Как и для элементов img, можно явно задавать размеры видео изображения — иначе элемент будет по умолчанию использовать просто собственную ширину и высоту видео файла. Если задать одно из значений, то браузер задаст размер неопределенной размерности, чтобы сохранить пропорции изображения видео.

controls

Если этот логический атрибут присутствует, браузер будет отображать свои собственные элементы управления для воспроизведения и громкости. Если он отсутствует, пользователь будет видеть только первый кадр (или определенное изображение poster ) и не сможет воспроизвести видео, если только воспроизведение фильма не включается где-то в коде JavaScript или не создаются собственные индивидуальные элементы управления, как мы покажем позже в этой статье.

poster

Атрибут указывает на изображение, которое браузер будет использовать во время загрузки видео, или пока пользователь не начнет воспроизведение видео. Если он отсутствует, вместо него будет использоваться первый кадр видео.

Для браузеров Web, которые в данный момент не поддерживают <video>, можно включить альтернативный контент — по крайней мере, он мог бы содержать некоторый текст и ссылку на видео файл, чтобы пользователь мог загрузить и воспроизвести его в приложении медиаплеера:

<video src=myVideo.ogv
  width=320
  height=240
  controls
  poster=image.jpg>
  Download the <a href=myVideo.webm>webm</a> or <a href=myVideo.mp4>MP4</a> format

Существуют и другие атрибуты, которые не были использованы в примерах. Это:

autoplay

Этот атрибут дает браузеру указание, начинать воспроизведение видео автоматически. Используйте его с осторожностью, так как это может быть крайне неприятно, если не просто проблематично, особенно для пользователей, использующих такие вспомогательные технологии, как считыватели экрана, или имеющих недостаточно быстрые соединения (такие как мобильные устройства).

autobuffer

Если вы совершенно уверены, что пользователь захочет активировать видео (например, он специально перешел на страницу, и это единственная причина для посещения страницы), но вы не хотите использовать autoplay, можно задать логический атрибут autobuffer. Он говорит браузеру, чтобы загрузка медиа начиналась немедленно, предполагая, что пользователь будет воспроизводить видео. (Эта часть спецификации пока еще в стадии изменения; и поэтому не реализована в браузере Opera).

loop

Атрибут loop является еще одним логическим атрибутом. Как можно было бы догадаться, он приводит к циклическому повторению воспроизведения видео. (В настоящее время это не реализовано в браузере Opera)