Видео HTML5

HTML5 Rocks

Введение

Видеотег – это одна из самых популярных функций HTML5. Часто видеотег представляют как альтернативу технологии Flash на веб-сайтах, но это далеко не все, что он может. Он вошел в число тегов HTML совсем недавно, но его возможности и поддержка различными браузерами расширяются с поразительной скоростью. Как вы увидите в этом руководстве, основное преимущество видеотега – его естественная интеграция с другими уровнями веб-программирования, такими как CSS и JavaScript, а также с другими тегами HTML.

В этом руководстве раскрывается суть видеотега и демонстрируются различные примеры его интеграции с другими функциями HTML5, такими как <canvas>.

1. Разметка

Для демонстрации HTML-видео на сайте достаточно следующих линий:

<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

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

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

<video src="movie.webm"></video>

А пока сосредоточимся на предыдущем, более распространенном сейчас варианте. Самый важный момент – правильно указать MIME-тип для обработки видеофайлов сервером в заголовке Content-Type. В противном случае видео может работать некорректно, даже если используется локальная копия с вашего сайта. В Apache httpd.conf достаточно добавить следующие строки:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Если ваше приложение работает на платформе Google App Engine, нужно добавить в файл app.yaml примерно следующий код (отдельно для каждого формата):

- url: /(.*\.ogv)
  static_files: videos_folder/\1
  mime_type: video/ogg
  upload: videos_folder/(.*\.ogv)

Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах source атрибут type. В этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения. Другими словами, он не будет загружать форматы, которые не сможет воспроизвести, а значит, сайт будет работать быстрее.

2. Видеоформаты

Видеоформат можно представить как ZIP-файл, содержащий закодированный видео- и аудиопоток. В Интернете актуальны форматы WEBM, MP4 и OGV:

  • MP4 = H.264 + AAC
  • OGG/OGV = Theora + Vorbis
  • WEBM = VP8 + Vorbis

Видеотег развивается удивительно быстро. Всего год назад он поддерживался только браузером Safari и только в стабильной версии. Теперь видео HTML5 поддерживают все современные браузеры, включая IE9. Что касается кодеков, разработчики Firefox, Chrome и Opera договорились включить поддержку WEBM в качестве общего видеоформата, используя проект WebM. Internet Explorer также будет его поддерживать, если кодек установлен на компьютере (мы надеемся, что в будущем это требование будет отменено).

Примечание. На момент составления руководства браузер Safari не поддерживал формат WEBM.

В этом примере видно, что браузер может воспроизвести один или два из трех указанных нами форматов (если отображаются все три, считайте, что вам повезло):

На момент составления руководства (август 2010 г.) наиболее безопасная комбинация форматов, гарантирующая воспроизведение видео в любом браузере, выглядела примерно так, как в этом фрагменте:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

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

Как я уже говорил, почти все разработчики браузеров договорились поддерживать общий видеоформат. Таким образом, менее чем через год в сети, скорее всего, будет использоваться следующий код:

<video>
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>

Одна из основных проблем, связанных с форматом MP4, заключается в том, что его видеокодек (h.264) закрыт, а лицензионные сборы за его использование рассчитываются очень сложно. Более подробную информацию об этом формате можно найти в этой главе.

Еще одна проблема с форматом MP4 – необходимость указывать атрибут type более точно, чем для других форматов, и с учетом профиля, который использовался для кодировки видео. Самый распространенный профиль – avc1.42E01E, mp4a.40.2, но для уверенности обязательно сверяйтесь с этим списком профилей.

Несмотря на то что корпорация Майкрософт объявила о поддержке видеотега и других элементов HTML5 в браузере IE9, скорость перехода ее пользователей на новые версии ниже, чем у других основных браузеров. Об этом мы поговорим в следующем разделе.

3. Что делать с действующими версиями IE, которые не поддерживают видеотег?

Переход на Flash

Также в качестве решения можно использовать технологию Flash. Определенные форматы видеофайлов могут потребовать повторной кодировки в формат, совместимый с Fash-проигрывателем. Есть и хорошая новость: компания Adobe пообещала включить в свой проигрыватель поддержку формата WEBM, но точные сроки пока не известны. Самый большой недостаток этого решения по сравнению с расширением Chrome Frame состоит в том, что Flash-проигрыватель – это сильно ухудшенная версия пользовательского интерфейса и расширенных функций, созданных для видеотега. Подробно эта технология рассматривается в кратком руководстве по реализации аудио с помощью HTML5.

4. Кодировка видеофайлов

Для кодировки видеофайлов в форматы, указанные в предыдущем разделе, можно использовать программу Miro Converter, которая подходит как для Windows, так и для Mac. Она не отличается большим количеством настроек, но включает наиболее распространенные варианты для Интернета, в т. ч. три формата, рассматриваемые в данном руководстве. Фактически это оболочка для служебных программ ffmpeg и ffmpeg2theora, которые работают в системах Windows, Mac и Linux, запускаются из командной строки и принимают дополнительные параметры. Подробнее об этом инструменте можно прочитать на веб-сайте divintohtml5.org.

5. Самое интересное

Как было сказано во введении, основное преимущество видеотега в HTML5 – его интеграция с другими уровнями веб-программирования. В следующем примере мы покажем вам, какие возможности это открывает.

5.1 Видео и другие элементы HTML

Теперь в видеопроигрывателе можно использовать все обычные атрибуты HTML. Например, в приведенный ниже фрагмент кода мы включили tabindex, чтобы сделать доступной клавиатуру проигрывателя. Существуют и новые атрибуты видеотега, которые, скорее, характерны для аудио, такие как loop и autoplay. Атрибут poster задает изображение, которое будет отображаться при начальной загрузке видео, а controls позволяет указать, что вместо создания отдельных элементов управления их должен автоматически подготовить браузер. Атрибут preload можно использовать для загрузки видео в фоновом режиме при загрузке страницы, даже если воспроизведение еще не началось.

<video poster="star.png" autoplay loop controls tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

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

Как только видео перестает быть чужеродным встраиваемым объектом, возникают и другие преимущества для пользователей. Например, даже если в фокусе находится проигрыватель, такие действия как прокрутка страницы и нажатие клавиш на клавиатуре будут полностью функциональны.

Примечание. Для сохранения синтаксиса XHTML в контексте HTML 5 при создании многоязычных документов атрибуты в коде должны выглядеть следующим образом:

<video poster="star.png" autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

5.2 Видео и JS

Видеотег поддерживает ряд атрибутов и методов, которые позволяют более точно настраивать видео из JS-кода. Увидеть их в действии можно в следующем примере.

К видеотегу, как и к любому другому элементу HTML, можно прикреплять такие стандартные события, как перетаскивание, движение мыши, выделение и т. д. При этом элемент video поддерживает множество новых событий, которые можно отслеживать (контролировать) при воспроизведении, постановке на паузу или завершении видео. Поскольку при загрузке видеофайла могут возникать различные проблемы, предусмотрено множество событий для тонкого управления процессом загрузки как на уровне сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и на уровне буферизации (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough).

На простейшем уровне можно прикрепить событие canplay, позволяющее приступить к работе с видео.

video.addEventListener('canplay', function(e) {
  this.volume = 0.4;
  this.currentTime = 10;
  this.play();
}, false);

В Интернете уже есть несколько персонализированных элементов для управления проигрывателями. В приведенном ниже примере мы используем некоторые элементы для управления одновременным воспроизведением двух видеофайлов и имитации эффекта перемотки вперед с помощью атрибута playbackRate. Для изменения громкости видео используйте ползунок.

5.3. Видео и CSS

Видеотег занимает важное место в модели DOM, и для его оформления можно использовать традиционные элементы CSS (граница, непрозрачность и т. д). Но вся прелесть заключается в том, что можно задействовать и новейшие свойства CSS3: отражения, маски, градиенты, трансформации, переходы и анимации.

Наведите указатель мыши на следующие фрагменты видео и посмотрите, как они работают:

#video-css.enhanced {
  border: 1px solid white;
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 5px 44px 28px #333; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */

  -moz-transform: translate(0, 10px);  /* FF3.5+ */
  -o-transform: translate(0, 10px);  /* Opera 10.5 */
  -webkit-transform: translate(0, 10px);  /* Saf3.1+, Chrome */
}

5.4. Видео и canvas

Canvas – это еще один элемент HTML5, сочетание которого с видеотегом открывает широкие возможности.

В следующем примере мы воспользуемся двумя функциями элемента <canvas> для импорта и экспорта изображений. Одна из них, метод drawImage, позволяет импортировать картинки из трех различных источников: элемента изображения, другого элемента canvas и элемента<video>. Это означает, что каждый раз при выполнении этого метода canvas будет импортировать и обрабатывать текущий фрейм видео.

Вторая функция тега <canvas>, которую мы используем, представляет собой метод toDataURL, позволяющий экспортировать содержание элемента canvas в изображение. Нажмите кнопку воспроизведения в следующем видео и посмотрите, как каждые полторы секунды из него создается картинка. Используемый для импорта и экспорта элемент canvas фактически скрыт.

В следующем коде видно, как мы создаем интервал длительностью 1,5 секунды и указываем в качестве источника для метода drawImage элемент video:

video_dom.addEventListener('play', function() {
  video_dom.width = canvas_draw.width = video_dom.offsetWidth;
  video_dom.height = canvas_draw.height = video_dom.offsetHeight;
  var ctx_draw = canvas_draw.getContext('2d');
  draw_interval = setInterval(function() {
    // import the image from the video
    ctx_draw.drawImage(video_dom, 0, 0, video_dom.width, video_dom.height);
    // export the image from the canvas
    var img = new Image();
    img.src = canvas_draw.toDataURL('image/png');
    img.width = 40;
    frames.appendChild(img);
  }, 1500)
}, false);

В следующем примере мы делаем еще один шаг. Если увеличить периодичность импорта и выдачи изображения из видео, можно сымитировать в canvas исходную частоту фреймов видеофайла. Это позволяет использовать в canvas такие же преобразования, как и в видео.

Слева воспроизводится исходное видео. В центре находится элемент canvas, в который изображения импортируются каждые 33 миллисекунды. Второй элемент canvas справа претерпевает все преобразования и в то же время импортирует изображения из первого canvas. Мы используем два элемента canvas, потому что в этом случае производительность намного выше, чем при импорте изображений и преобразованиях, выполняемых одним и тем же элементом.

Такую же технологию импорта изображений можно использовать и на платформе WebGL. Она позволяет, например, импортировать фреймы видео и демонстрировать их на вращающемся трехмерном кубе. Более подробную информацию можно найти на веб-сайте MDC.

5.5. Видео и SVG

Технология SVG позволяет запрограммировать отображение и обработку векторной графики, но поддерживает и другие функции, такие как эффекты фильтра SVG. С их помощью можно выделить определенный элемент модели DOM и применить к нему готовые эффекты: размывание, композицию, плитку и т. д. На момент составления руководства (август 2010 г.) Firefox 4 и IE9 поддерживают встроенный SVG, позволяющий выделять элемент видео с помощью HTML и CSS (в приведенном ниже примере мы используем JavaScript и canvas, чтобы он работал и в браузерах, пока не поддерживающих SVG).

<svg id='image' version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <defs>
    <filter id="myblur"> 
      <feGaussianBlur stdDeviation="1" /> 
    </filter>
  </defs>
</svg>
<style>
  video { filter:url(#myblur); border: 2px solid red; }
</style>

Нажмите, чтобы выключить фильтр размывания

Comments

0