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

Версия для печати

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

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

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

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

• Зачем нам нужен элемент <video>?
• Анатомия тега <video>
• Кодеки — ложка дёгтя в бочке мёда
• Больше нет второсортных жителей в Веб
  • Проблемы управления с помощью клавиатуры
  • <video> хорошо взаимодействует с остальной частью страницы
    • Оформление видео с помощью CSS
    • Объединение элементов video и canvas
• Создание собственных элементов управления видео

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

До сегодняшнего дня если вы хотели вставить видео на страницу, вам пришлось бы разрываться между несколькими вариантами разметки. Ниже помещен пример, взятый непосредственно с сайта 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=turkish.ogv
  width=320
  height=240
  controls
  poster=turkish.jpg>
</video>

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

Предназначение атрибутов элемента <video>, использованных в нашем примере, очевидно:

src

Источник видео, URL видео файла.

width и height

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

controls

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

poster

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

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

<video src=turkish.ogv
  width=320
  height=240
  controls
  poster=turkish.jpg>
  Скачать <a href=video.ogg>Мастер класс турецкого танца</a>
</video>

Итак, можете проверить, как работает видео в HTML5 в нашем примере с турецкими танцами.

Существует и другие атрибуты, о которых мы ещё не упомянули:

autoplay

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

autobuffer

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

loop

loop — атрубут типа boolean, позволяющий воспроизводить видео циклически. (В настоящее время не реализован в Opera 10.50 beta)

Кодеки — ложка дёгтя в бочке мёда

Opera поддерживает видео-кодек Ogg Theora: Theora — бесплатный и открытый видео-формат от Xiph.org Foundation, он может использоваться для распространения фильмов и видео онлайн и на дисковых носителях без лицензионных ограничений.

Firefox и Chrome также поддерживают кодек Theora. Однако, Safari его не поддерживает, предпочитая кодек H.264 (который также поддерживает и Chrome). Поэтому нам придётся конвертировать видео дважды, сначала в формат кодека Theora, а затем и в H.264, добавляя дополнительные элементы <source> с соответствующим атрибутом type к видео на веб-странице, тем самым позволяя веб-браузерам загружать тот формат, который они могут воспроизвести. Заметьте, что в таком случае мы не снабжаем атрибутом src сам элемент <video>:

<video width=320 height=240 controls poster=turkish.jpg>
<source src=turkish.ogv type=video/ogg>
<source src=turkish.mp4 type=video/mp4>
  Скачать <a href=video.ogg>мастер класс турецкого танца</a>
</video>

Пример с использованием двух источников видео — .ogv и .mp4, который должен работать во всех браузерах, поддерживающих HTML5 видео, независимо от поддерживаемого кодека.

На момент написания этой статьи (февраль 2010-го) представители Microsoft не сделали официального заявления о том, какой видео-кодек они будут поддерживать (если вообще будут). Однако, тип файла MP4 может быть также воспроизведен с помощью плагина Flash, так что они могут использоваться совместно в качестве обратной связи для Internet Explorer и старых версий других браузеров. Ознакомьтесь с реализацией этого метода в статье Kroc Camen "Видео для всех!", в которой он добивается объединения элементов object и embed с новым <video> элементом.

Конечно, если браузеры, не поддерживающие элемент <video>, попробуют использовать плагины Quicktime или Flash, на самом деле мы вернемся к тому, с чего начали и не получим никакого преимущества от новых возможностей и усовершенствований, которые мы описали чуть выше. "В чём тогда смысл?", — спросите вы. А мы можем ответить, что это переходное решение, пока поддержка нового видео  элемента не появится в большинстве браузеров.

Больше нет второсортных жителей в Веб

Таким образом, мы увидели, что разметка для нового HTML5-элемента <video> во много раз более ясная и понятная по сравнению тем, как мы сейчас вставляем видео на веб-страницы с помощью Flash. Но вне зависимости от того, насколько ужасен старый способ вставки видео, в большинстве случаев он работает, ведь так? Так почему бы нам не продолжить использовать традиционный способ?

Главное преимущество элемента <video> заключается именно в том, что он —полноценный житель в Веб, по сравнению с жителем окраин object или не проходящим валидацию элементом embed (хотя сейчас он её проходит в HTML5).

Проблемы управления с помощью клавиатуры

Одна из больших нерешенных проблем использования Flash — недоступность управления воспроизведением с клавиатуры. За исключением Internet Explorer на Windows не существует способа взаимодействовать с Flash-роликом посредством клавиатуры. И даже если пользователи каким-то образом могут переместить фокус на Flash-ролик, не существует простого способа вернуться обратно на страницу (если только это не предусмотрено в самом Flash-ролике с помощью программирования на ActionScript). В отличие от этого, браузер полностью отвечает за элемент <video>, он может управлять воспроизведением видео и включать кнопки управления в стек табуляции.

Поддержка клавиатуры в HTML5 видео в настоящее время не реализована во всех браузерах... однако, она уже работает в бета-релизе Opera 10.50.

<video> хорошо взаимодействует с остальной частью страницы

Проще говоря, всякий раз когда вы включаете плагин на веб-страницы, вы выделяете определенную область для отрисовки, которую браузер передает в управление этому плагину. По мере того как браузер загружает плагин, отведенная ему область остается чёрным прямоугольником — браузер никак не обрабатывает и не интерпретирует что-либо происходящее в этой области.

Обычно в этом нет никакой проблемы, но они могут возникнуть, когда ваша разметка перекрывает область с плагином. Например, представим себе сайт, который содержит Flash-ролики, а также выпадающее меню, реализованное средствами JavaScript и/или CSS, которое должно раскрываться поверх Flash-ролика. По умолчанию, область плагина размещается поверх веб-страницы, а это означает, что это меню странным образом раскроется позади ролика. Такой же неприятный эффект проявляется и в случае, когда на страницах присутствуют "модальные" окна — любые Flash-ролики вставляются поверх остальных элементов страницы. Именно поэтому многие скрипты, использующие "модальные" окна, сначала отключают все объекты (плагины) на странице, и только потом запускаются сами, а после закрытия модального окна, отключенные объекты восстанавливаются.

В случае некоторых плагинов Flash разработчики могут исправить такую проблему с наложением Flash-содержимого поверх остальных элементов на странице добавлением атрибута wmode='opaque' в элементе <object> и эквивалентным тегом <param name='wmode' value='opaque'> внутри элемента <embed>. Однако, это становится причиной того, что плагин становится полностью недоступным пользователям со скринридерами и поэтому его использования лучше избегать.

Проблемы и странности также возникают, если вы осуществляете изменения в разметке динамически. Если размеры области плагина изменяются, это иногда может привести к непредвиденным эффектам — видео, воспроизводимое плагином может не измениться в размерах, а вместо этого быть обрезанным.

Благодаря тому, что элемент <video> является родным в среде браузера, именно браузер заботится о его отрисовке. В связи с этим элемент <video> работает также как и любой другой элемент на веб-странице. Его можно позиционировать, применять свойство float, перекрывать или динамически изменять его размеры без каких-либо дополнительных хаков. Даже возможно достичь такого интересного эффекта, как полупрозрачное видео, просто назначив ему необходимое значение свойства opacity с помощью CSS.  

Оформление видео с помощью CSS

Уже сейчас элемент video является частью ряда открытых веб-технологий, и мы можем использовать CSS, чтобы легко оформить видео. В качестве простой демонстрации того, что можно достичь уже сегодня, мы применим переходные эффекты CSS к нашему видео с турецкими танцами, для изменения его размеров при срабатывании событий :hover или :focus. (Читайте руководство по переходным эффектам в CSS3 и 2D-трансформациям.)

Объединение элементов video и canvas

Так как браузер сам заботится о выводе и отрисовке видео, мы можем легко перекрыть видео другими элементами и скомбинировать его с другими элементами на странице. В этом примере элемент <canvas> накладывается поверх видео (Эффект виден только во время воспроизведения).

Обратите внимание на то, что <canvas> перекрывает видео не полностью. Мы сделали канву на 40 пикселей короче, чем высота видео, для того чтобы случайно не перекрыть панель с элементами управления видео. Доступ с клавиатуры к элементам управления должен работать вне зависимости от того, перекрыты ли элементы управления или нет, однако поддержка управления с клавиатуры поддерживается в настоящее время не во всех браузерах.

Создание собственных элементов управления видео

Элементы <video> и <audio> являются экземплярами новых медиа-элементов HTML5 DOM, которые предоставляют мощный API,  позволяя разработчикам управлять воспроизведением видео с помощью целого ряда новых методов и свойств JavaScript. Давайте взглянем на некоторые наиболее интересные из них, позволяющие создать собственный простой контроллер:

play() и pause()

Совершенно очевидно, эти методы начинают и останавливают воспроизведение видео. play() начнёт показ видео с текущей позиции воспроизведения. Когда фильм впервые загружен, этой позицией будет первый кадр ролика. Обратите внимание, что нет метода stop() — если вы хотите остановить воспроизведение и "перемотать" на начало ролика, вы должны использовать pause() и самостоятельно программно изменить текущую позицию воспроизведения.

volume

Этот атрибут может использоваться, чтобы получить или установить уровень громкости аудио-трека в видео — значение типа float от 0.0 (тихо) до 1.0 (громко).

muted

Независимо от уровня громкости позволяет отключить звук в видео.

currentTime

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

Кроме того медиа-элементы поддерживают ряд событий в рамках своей модели обработки событий, которые мы можем перехватить или назначить. В нашем примере мы ознакомимся только с некоторыми из них:

loadeddata

Возникает, когда браузер загрузил достаточный объем видео данных для начала воспроизведения с текущей позиции.

play и pause

Возникают, когда воспроизведение было начато или приостановлено. Если мы управляем видео с помощью JavaScript, нам понадобиться "прослушать" эти события, чтобы гарантировать, что вызов методов play() и pause() действительно был успешным.

timeupdate

Возникает при изменении текущей позиции воспроизведения. Причиной этого может служить то, что видео воспроизводится, скрипт изменил позицию программно или пользователь решил перескочить в другую позицию видео.

ended

Достигнут конец видео-трека и у элемента <video> не установлен режим циклического воспроизведения или воспроизведения в обратном направлении (не обсуждаемые в этой статье).

Теперь у нас есть все основные строительные блоки, необходимые для создания простого контроллера. Прежде чем мы начнём, хочу вас предостеречь: когда мы создаём свой собственный контроллер на JavaScript, мы очевидно хотим подавить все собственные средства управления браузера по управлению воспроизведением видео. Однако, мы можем оставить их в качестве запасного варианта, в случае если пользователь отключил JavaScript в своем браузере. По этой причине мы сохраним атрибуты управления видео в нашей HTML-разметке и программно удалим их во время выполнения нашего скрипта. В качестве альтернативы мы также можем установить значение атрибутов на false — оба подхода действуют одинаково. Так как наш собственный контроллер основан на написанных нами функциях, мы создадим разметку самого контроллера в JavaScript.

Ознакомьтесь с нашим примером программирования собственных элементов управления видео в HTML5. Скрипт большой по объему, и было бы полезно немного "очистить" его до использования на сайте, но надеюсь, это поможет проиллюстрировать некоторые из новых мощных возможностей, которые нам открывает видео в HTML5. Даже с базовыми знаниями JavaScript веб-разработчик теперь легко может создавать собственные средства управления воспроизведением видео, которые прекрасно дополнят дизайн сайта без необходимости создания специальных Flash-плееров.