Dev & Type: Как вставить видео на веб-страницу

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

Как вставлялось видео на веб-страницу раньше

<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>.

Как вставляется видео на веб-страницу сейчас с помощью HTML5

<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

Отметим, что в примере мы воспользовались более свободным синтаксисом HTML5 — не требуется использовать кавычки вокруг значений атрибутов, и можно использовать простые логические атрибуты, такие как autoplay, в виде одиночных слов. При желании можно, конечно, использовать синтаксис XHTML controls="controls" и кавычки вокруг значений атрибутов.

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

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

Атрибут autoplay дает браузеру указание, начинать воспроизведение видео автоматически.

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

Атрибут loop приводит к циклическому повторению воспроизведения видео.

Кодеки:

не требующий лицензии видео-кодек Ogg Theora: Opera, Firefox, Chrome;
кодек H.264: Safari, Chrome, IE;
видео-кодек VP8 и формат контейнера WebM: доступен для различных браузеров и платформ.

Мы кодируем видео дважды — один раз как Theora и второй как H.264 — добавляем к видео альтернативные элементы <source> с подходящими атрибутами type и позволяем браузеру загрузить тот формат, который он может отобразить. Отметим, что в этом случае мы не используем атрибут src в самом элементе <video>:

<video width=320 height=240 controls poster=image.jpg>
  <source src=myVideo.webm type=video/ogg>
  <source src=myVideo.mp4 type=video/mp4>
  Download the <a href=myVideo.webm>webm</a> or <a href=myVideo.ogg>mp4</a>

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

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

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

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

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

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

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

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

Когда браузер реализует размещение и воспроизведение видео, мы легко можем размещать и объединять другие элементы поверх него. В данном примере <canvas> накладывается поверх видео.

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

play() - будет всегда начинать воспроизведение видео с текущей позиции воспроизведения;
pause() - делает паузу (если вы хотите остановить воспроизведение и "перемотать" в начало видео, то нужно будет сделать паузу с помощью pause() и программным путем самостоятельно изменить текущую позицию воспроизведения);
volume - можно использовать для считывания или задания громкости аудио дорожки видео, может принимать значения типа float в диапазоне от 0.0 (тишина) до 1.0 (самый громкий);
muted - независимо от volume, звук в видео можно заглушить;
currentTime - возвращает текущую позицию воспроизведения в секундах, также выраженную как float (задание этого атрибута будет — если возможно — перемещать позицию воспроизведения в указанную позицию времени);
loadeddata - браузер загрузил достаточно видео данных, чтобы начать воспроизведение в текущей позиции;
play и pause - если мы управляем видео из JavaScript, мы можем следить за этими значениями, чтобы убедиться, что вызов метода play() или pause() завершился успешно;
timeupdate - текущая позиция воспроизведения изменилась, потому что видео воспроизводится, сценарий изменил его программным путем, или пользователь решил переместиться в другую позицию видео;
ended - достигли конца видео, и элемент <video> не задан для циклического воспроизведения или обратного воспроизведения.

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

--