Оглавление Предыдущая лекция Следующая лекция
Введение в HTML5
4. Лекция: Введение в видео HTML5: версия для печати и PDA
В данной лекции описывается элемент <video> и некоторые связанные с ним API. Перечислены основные поддерживаемые видеоформаты. Автор рассказывает о наиболее важных способах, с помощью которых можно управлять видео через JavaScript и возможностях создания собственных элементов управления проигрывателем. Как элемент <video> сочетается с другими элементами web страницы. Оформление видео с помощью каскадных таблиц стилей (CSS3). Особое внимание уделяется совместимости новых свойств языка со старыми браузерами.
Брюс Лоусон, Патрик Х. Лауке · 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=turkish.ogv
  width=320
  height=240
  controls
  poster=turkish.jpg>
</video>

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

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

src

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

width и height

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

controls

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

poster

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

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

<video src=turkish.ogv
  width=320
  height=240
  controls
  poster=turkish.jpg>
  Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video>

Итак, без дальнейших церемоний, посмотрите видео показательного урока турецкого танца (http://people.opera.com/patrickl/articles/introduction-html5-video/basic/), реализованного с помощью только собственного элемента <video>.

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

autoplay

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

autobuffer

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

loop

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

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

В данный момент потребительские версии браузера Opera поддерживают только не требующий лицензии видео-кодек Ogg Theora, открытый формат сжатия видео некоммерческой организации Xiph.org (http://theora.org/).

Браузеры Firefox и Chrome также поддерживают кодек Theora. Однако браузер Safari не поддерживает, предпочитая вместо этого использовать собственную разработку для кодека H.264 (который браузер Chrome также поддерживает). Компания Microsoft также объявила о поддержке элемента <video>, используя при этом H.264. Как можно понять, все это создает некоторые проблемы, связанные с необходимостью представления видео в нескольких форматах для различных браузеров.

В попытке решить эту проблему компания Google недавно выпустила на безвозмездных условиях видео-кодек VP8 и формат контейнера WebM (http://www.webmproject.org/) с целью создать высококачественный, открытый видео-формат, доступный для различных браузеров и платформ. Это было объявлено публично на конференции 2010 Google I/O (http://code.google.com/events/io/2010/).

В день объявления компания Opera выпустила экспериментальную сборку, поддерживающую WebM. Эта возможность является теперь частью базовой функциональности браузера Opera 10.60 и всех будущих версий настольных браузеров (http://www.opera.com/browser/).

Вернемся к нашему примеру, мы кодируем видео дважды — один раз как 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>
  Download the <a href=video.ogg>Turkish dancing masterclass video</a>
</video>

Здесь мы имеем показательный урок турецкого танца с обоими источниками .ogv и .mp4 (http://people.opera.com/patrickl/articles/introduction-html5-video/multi-source/).

Тип файлов MP4 также может воспроизводиться плагином плеера Flash, так что это можно использовать в сочетании как запасной вариант для текущей версии Internet Explorer и более старых версий браузеров. Посмотрите отличную реализацию этой техники Кроком Кейменом в его статье Видео для всех! (http://camendesign.com/code/video_for_everybody), в которой он объединяет object и старый embed в части альтернативного контента элемента <video>.

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

В Web больше нет граждан второго сорта

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

Основное преимущество элемента HTML5 <video> состоит в том, что, наконец, видео является полноценным содержанием Web, а не отодвигается вглубь элемента object или непроверяемого элемента embed (хотя это теперь проверяется в HTML5). Давайте рассмотрим некоторые реальные преимущества.

Готовая доступность с клавиатуры

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

Поддержка клавиатуры для встроенного видео в настоящее время реализована не во всех браузерах … однако она уже прекрасно работает в браузере Opera 10.50+.

Элемент <video> хорошо сочетается с остальной страницей

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

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

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

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

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

Оформление <video> с помощью CSS

Теперь видео является частью множества технологий Открытой Web, поэтому мы можем использовать CSS для надежного стилевого оформления элемента. В качестве простой демонстрации, что можно делать, мы применим переходы CSS к видео с турецким танцем (http://people.opera.com/patrickl/articles/introduction-html5-video/transitions/), чтобы изменить его размеры, когда мы зависаем (:hover) или фокусируемся (:focus) на нем.

(Прочтите наше руководство по переходам CSS3 и 2D-преобразованиям (http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/)).

Объединение <video> и <canvas>

Когда браузер реализует размещение и воспроизведение видео, мы легко можем размещать и объединять другие элементы поверх него. В данном примере <canvas> накладывается поверх видео (http://people.opera.com/patrickl/articles/introduction-html5-video/video-canvas/). (Предупреждение: это видео содержит потенциально опасные для душевного здоровья изображения солидного сотрудника компании Opera и его детей, которым угрожает гигантский указатель мыши.)

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

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

Элементы <video> и <audio> (который будет рассмотрен в будущей статье) являются экземплярами новых элементов медиа из HTML5 DOM (http://www.w3.org/TR/html5/video.html#media-elements), которые предоставляют мощный API, позволяющий разработчикам управлять воспроизведением видео с помощью целого множества новых методов JavaScript и свойств. Давайте рассмотрим некоторые из наиболее подходящих для создания простого индивидуального средства управления:

play() и pause()

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

volume

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

muted

Независимо от volume, звук в видео можно заглушить.

currentTime

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

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

loadeddata

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

play и pause

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

timeupdate

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

ended

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

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

Посмотрите пример со сценарием собственных элементов управления видео в HTML5 в действии (http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/). Сценарий достаточно многословен, и требует небольшой чистки перед использованием в производственной среде, но будем надеяться, что он помог проиллюстрировать некоторые новые возможности, которые открывает видео в HTML5. Разработчики Web с небольшими знаниями JavaScript теперь легко могут создавать специальные элементы управления видео, которые отлично дополняют их сайты, не требуя для этого создания заказных видео-плееров Flash.

Дополнительное чтение

  1. Все, что нужно знать об аудио и видео в HTML5 (http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2) – и это действительно все!
  2. Спецификация элемента <video> (http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video)
  3. Как элемент <video> реализован в браузере Opera (http://my.opera.com/core/blog/2009/12/31/re-introducing-video)
  4. Доступное видео в HTML5, использующее титры на основе JavaScript (http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/)
© INTUIT.ru