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

Зачем нужно видео HTML5 и как использовать эту возможность

В статье описывается встраивание видео HTML5, рассматривается соответствующий API-интерфейс и анализируется совместимость браузеров.

Майк Уилкокс, технический директор, BetterVideo

Author photoМайк Уилкокс (Mike Wilcox) является техническим директором новой быстрорастущей компании BetterVideo (г. Фриско, шт. Техас, США), в которой он отвечает за разработку фронтальных компонентов и онлайновых видеосервисов. М. Уилкокс регулярно публикуется по тематике Ajax и по другим Web-технологиям, а также выступает на различных конференциях, таких как 2009 Rich Web Experience и 2009 Dallas TechFest. Его работа в области продуктов с открытым исходным кодом воплощена в инструментарии Dojo Toolkit, в котором он реализовал мультимедийные технологии, в т.ч. Multi-File Uploader, аудио/видео-компоненты и векторную библиотеку DojoX Drawing. С ним можно связаться по электронной почте mike@mikewilcox.net.



30.09.2011

Краткая история онлайнового видео

В 1990-х годах считалось отличным результатом, если видео формата Apple QuickTime или Windows Media® хотя бы просто воспроизводилось на компьютере пользователя в окне размером с почтовую марку, не говоря уже о воспроизведении через Интернет. Технологический прорыв совершила выпущенная в 1991 версия QuickTime 1.0. В качестве ответного шага корпорация Microsoft в 1992 г. выпустила Video for Windows®. В 1995 г. компания RealNetworks выпустила продукт RealAudio Player – один из первых медиаплееров, способных воспроизводить потоковое аудио из Интернета. В конце 1990-х и в начале 2000-х достижения в области повышения пропускной способности потребительских сетей сделали возможным онлайновое видео. Все главные игроки сектора выпустили продукты, способные воспроизводить потоковый медиаконтент и постепенно загружаемый медиаконтент. По состоянию на 2000 год онлайновое видео было реальностью, – однако совершенно неупорядоченной с точки зрения стандартизации.

Часто используемые сокращения

  • API: Application programming interface(Интерфейс прикладного программирования, API-интерфейс)
  • CSS: Cascading stylesheet(Каскадная таблица стилей)
  • GUI: Graphical user interface(Графический интерфейс пользователя)
  • HTML: Hypertext Markup Language(язык гипертекстовой разметки, язык HTML)
  • UI: (Интерфейс пользователя)
  • W3C: World Wide Web Consortium(консорциум W3C)
  • XHTML: Extensible Hypertext Markup Language(Расширяемый язык гипертекстовой разметки, язык )

В начале 2000-х гг. качество онлайнового видео совершенно не гарантировалось. Продукт RealPlayer от компании RealNetworks был, видимо, одним из лучших онлайновых видеоплееров, однако он постоянно требовал обновления; кроме того, RealNetworks обвиняли в сборе конфиденциальной информации пользователей. Проигрыватель QuickTime был лучше, — по крайней мере на платформе Macintosh. На платформе Windows он страдал от проблем несовместимости. Пользователь оставался один на один с вопросом, будет ли видео воспроизводиться, получит ли он достаточную частоту кадров для плавного восприятия и будет ли звук синхронизирован с изображением при дистанционном воспроизведении.

И в этой ситуации процесс совершенствования закончился. В 2001 г. корпорация Microsoft победила в браузерных войнах и практически прекратила работать над новыми технологиями для Windows Internet Explorer®. Вместо этого она сосредоточила свое внимание на брешах безопасности, которые были следствием множеством новых функций, быстро выпускаемых на рынок. Консорциум W3C не оказывал никакого содействия в этом вопросе, поскольку объявил, что спецификация HTML исчерпала себя, и сосредоточил свое внимание на XHTML и XHTML2. За инновационными функциями, такими как векторная анимация, междоменные коммуникации, загрузка множества файлов, аудио и видео, разработчики обратились к платформе Adobe® Flash® (в том время – Macromedia Flash).

Flash Video побеждает всех

В 2002 г. компания Macromedia ответила на потребности своих разработчиков выпуском формата Flash Video на базе кодека Sorenson Spark. В 2003 г. эта компания ввела для внешнего видео формат FLV с использованием кодека VP6, который в то время обеспечивал очень высокое качество и прекрасную степень сжатия. В 2005 г. начал функционировать ресурс YouTube, который использовал исключительно формат FLV. Продукт Flash Player был установлен на большом количестве компьютеров, формат Flash Video работал почти безупречно, а ресурс YouTube имел простой интерфейс для загрузки и преобразования видео. В результате формат Flash Video стал фактическим стандартом в Интернете.

Проблемы с предшествующими решениями

Однако за пределами YouTube проблемы реализации онлайнового видео не были устранены. В общем случае для размещения Flash-видео на персональном Web-сайте или на Web-сайте компании требовалось глубокое понимание языка Adobe ActionScript® и наличие закрытых инструментов для кодирования видео и создания средств управления плеером. Всем нам на протяжении многих лет приходилось видеть код встраивания Flash-объекта, однако, как показано в листинге 1, за это время он не стал проще.

Листинг 1. Пример встроенного Flash-объекта
<object id="UNIQUEID" height="520" width="528" codebase="http://download.macromedia.com/"
		classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" >
    <param value="../player/myVideoPlayer.swf" name="movie" />
    <param value="true" name="allowFullScreen" />
    <param value="all" name="allowNetworking" />
    <param value="always" name="allowScriptAccess" />
    <param value="opaque" name="wmode" />
    <param value="myVideoFile.flv" name="FlashVars" />
    <embed height="520" width="528" src="../player/mds_player.swf"
           id="UNIQUEID" wmode="opaque" allowscriptaccess="always" allownetworking="all"
		   allowfullscreen="true" swf="../player/myVideoPlayer.swf"
           flashvars="myVideoFile.flv"
           pluginspage="http://www.macromedia.com/go/getflashplayer"
		   type="application/x-shockwave-flash" quality="high" />
</object>

Хотя качество других видеоплееров совершенствовалось, они по-прежнему были недостаточно просты в использовании, поскольку было трудно предвидеть, будет ли видео воспроизводиться на конкретном пользовательском компьютере. Характерный пример – воспроизведение файла формата WMV. В случае браузера Internet Explorer формат WMV скорее всего воспроизводился бы. А что если это Mozilla Firefox? На платформе Windows этот формат, вероятно, воспроизводился бы; на платформе Mac он, скорее всего, не воспроизводился бы, хотя иногда все же воспроизводился. В результате для работы в разных браузерах и в разных операционных системах требовались разные видеоформаты. Различные форматы требовали различных плееров, а потребность в различных плеерах, как правило, усложняла JavaScript-решение.


Появление видео HTML5

Согласно идее Тимоти Бернерса-Ли (Timothy Berners-Lee), технологии HTML и World Wide Web должны быть бесплатными и открытыми. Т. Бернерс-Ли основал консорциум WC3, чтобы «гарантировать совместимость и согласие между участниками отрасли по вопросам принятия новых стандартов». Тем не менее в 2000 г. консорциум W3C был занят работой над языком XHTML, в то время как разработчики в отчаянии обращались к закрытому (плагину) Flash.

В 2007 г. компания Opera предложила тег <video>в рабочем проекте организации WHATWG (Web Hypertext Application Technology Working Group). Идея состоялв в том, чтобы «с помощью простого открытого решения сделать видео «полноправным Web-гражданином» с целью интеграции видео в Web-страницы и реализации нативной поддержки видео в браузерах». Это предложение, гораздо более элегантное и лаконичное, чем многословная разметка со встраиванием объектов, необходимая для подключаемых модулей, показано в листинге 2.

Листинг 2. Простой пример видео HTML5
<video controls src="demo.ogg"></video>

В июле 2009 г. консорциум W3C объявил о планируемом прекращении поддержки XHTML и начале работы над HTML5. Сегодня все современные браузеры (в т.ч. Internet Explorer Windows 9) поддерживают тег <video>, а их API-интерфейсы в значительной степени согласованы (хотя некоторые тонкие детали по-прежнему находятся в процессе уточнения).

Видео HTML5 имеет множество преимуществ. Какого-либо кода JavaScript или ActionScript не требуется, поскольку достаточно включить тег <video> и параметры, как показано в листинге 2. Это не подключаемый модуль, а полноправный гражданин браузера. Другими словами, при использовании кода JavaScript видео готово тогда, когда готова страница – нет необходимости дополнительно ждать, пока загрузится плагин. Хотя будут определенные исключения, API-интерфейс будет стандартизирован и будет работать во всех браузерах. Поскольку это нативный элемент, не будет проблем с подключаемыми модулями (таких как перезагрузка подключаемого модуля после изменения CSS) или с отображением (таких как конфликт видео с линейкой прокрутки).

Проблемы видео HTML5

Спецификация видео HTML5 все еще очень молода, поэтому без проблем не обойдется. Наиболее очевидная проблема – эта спецификация не поддерживается в Internet Explorer, хотя предварительный вариант версии 9 имеет такую поддержку. Собственные средства управления пользовательского интерфейса достаточно удобны, однако их облик и функциональность не одинаковы для разных браузеров. Сторонний видеоплеер Sandboxing сложнее и требует как минимум технологии IFrames. Кроме того, в этой спецификации не хватает мощных полноэкранных возможностей, которые гарантировались во Flash; недавно сообщество Mozilla представило предложения по решению этой проблемы.

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

Совершенствование видео HTML5

Для решения вышеуказанной проблемы (отсутствие согласия между поставщиками браузеров) спецификация была изменена таким образом, чтобы можно было работать с различными типами видеофайлов (см. листинг 3).

Листинг 3. Видео HTML5 с несколькими вариантами исходного файла
<video controls>
	<source src="demo.ogg" />
	<source src="demo.webm" />
	<source src="demo.mp4" />
</video>

Браузер будет поочередно пытаться воспроизвести исходное видео каждого типа, т.е., если он не сможет воспроизвести видео в формате Ogg, то попытается воспроизвести видео в формате WebM, а затем –в формате MP4. Если браузер не сможет справиться ни с одним из вышеуказанных форматов, он выведет визуальную подсказку, что никакой файл не был загружен. Фактически элемент <video> является обратно совместимым, поскольку браузер, не распознававший этот элемент, просто проигнорирует его. Вы можете использовать это обстоятельство, вставив более знакомый элемент, например, показанный в листинге 4.

Листинг 4. Видео HTML5 с демонстрацией статического изображения в случае невозможности отображения видео
<video controls>
	<source src="demo.ogg" />
	<source src="demo.webm" />
	<source src="demo.mp4" />
    <img src="images/videoReplacement.gif" />
</video>

Другие решения предусматривает вставку не статического изображения, а встроенного Flash-объекта.


API-интерфейс видео HTML5

API-интерфейс для видео HTML5 весьма прост, однако он также находится в процессе развития. Не следует забывать, что развитие спецификации HTML5 осуществляется не консорциумом WC3, а поставщиками браузеров. Такой процесс стимулирует инновации, поскольку каждый браузер может иметь свои уникальные функции. Во всех остальных аспектах API-интерфейс, описанный в таблице 1, в значительной степени согласован между поддерживающими его браузерами.

Таблица 1. API-интерфейс видео HTML5
АтрибутыСвойстваМетодыСобытия
src
width
height
type
poster
autoplay
loop
controls
preload
currentSrc
currentTime
videoWidth
videoHeight
duration
ended
error
paused
muted
seeking
volume
paused
muted
play
pause
load
canPlayType
play
pause
progress
error
timeupdate
ended
abort
empty
emptied
waiting
loadedmetadata

Различие между атрибутами и свойствами заключаются в следующем: свойства невозможно использовать в разметке, а атрибуты могут быть использованы и в разметке, и в скрипте. Атрибут src элемента <video> имеет приоритет над атрибутом src элементов source. При использовании в разметке элементов source атрибут src представляет собой пустую строку. Единственными немедленно доступными являются свойства width и height, которые устанавливают размер контейнера. Все остальные свойства доступны после загрузки метаданных видеоконтента.

Ошибки API-интерфейса

На данный момент браузеры не имеют никаких критических ошибок, однако программное обеспечение Apple iPad имеет определенные ошибки, которые влияют на нынешний API-интерфейс:

  • Ошибка динамической загрузки видео. Если создать элемент <video> с innerHTML, элементы source не сработают автоматически. Решение состоит в том, чтобы установить атрибут src и вызвать метод load. См. пример в листинге 5.
  • Ошибка порядка элементов source. Если первый элемент source соответствует видеоформату, отличному от MP4, то iPad остановится в этом месте и не будет осуществлять загрузку. Решение состоит в том, чтобы первым в списке всегда следовал элемент source для формата MP4.
  • Ошибка отображения постера. iPad не показывает изображение постера. Скорее всего, эта ошибка будет устранена в ближайшее время, а до этого решение состоит в создании соответствующего HTML-элемента IMG для использования вместо постера.
Листинг 5. Исправление ошибки динамической загрузки iPad
window.onload = function(){
	var video = document.body.appendChild(document.createElement('video'));
	if(video.canPlayType("video/ogg")){
		video.src = "video/myMovie.ogv";
	}else if("video/mp4"){
		video.src = "video/myMovie.mp4";
	}
	video.load();
}

Терминология видеофайлов

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

Вместо термина формат файла также могут употребляться термины упаковщик (wrapper) и контейнер (container). MP4, WebM и OGV – это форматы файлов. Метаданные файлового формата описывают, как хранятся данные, и предоставляют компьютеру пользователя соответствующие сведения, чтобы он мог загрузить необходимые библиотеки для отображения данного файла. В общем случае формат видеофайла содержит указания на видеокодек и аудиокодек, а также инструкции для компьютера по синхронизации видео и аудио.

Кодек— это программный код, который осуществляет декодирование изображений, аудио или других данных. Обычно кодек содержит процесс для сжатия закодированных данных. В HTML5 поддерживаются следующие форматы видеофайлов и кодеки:

  • Формат MP4 — использует видеокодек H264 и аудиокодек AAC
  • Формат WebM — использует видеокодек VP8 и аудиокодек Vorbis
  • Формат Ogg — использует видеокодек Theora и аудиокодек Vorbis

Форматы видеофайлов HTML5

В настоящее время для видео HTML5 поддерживаются файловые форматы MP4, Ogg и WebM; при этом во избежание сложностей отслеживания не следует забывать, что каждый браузер имеет свои особенности в части поддерживаемых форматов.

Браузеры

В таблице 2 приведено соответствие между браузерами и поддерживаемыми ими форматами видеофайлов.

Таблица 2. Диаграмма совместимости браузеров
БраузерMP4OggWebM
Internet Explorer 9ДаНетВозможно
Firefox 4.0НетДаДа
Google Chrome 6ДаДаДа
Apple Safari 5ДаНетНет
Opera 10.6НетДаДа

Примечание. Браузер Safari на платформе Mac и браузер Internet Explorer 9 на платформе Windows будут поддерживать любой тип файла, если соответствующий кодек установлен в операционной системе. Другие браузеры (Firefox, Opera, Chrome) требуют специальной реализации всех видеокодеков.

Смартфоны

Как правило, в смартфонах видеокодек реализован аппаратными средствами; все устройства Apple iPhone и iPad, а также Android-смартфоны поставляются с единственным кодеком (для формата MP4). В устройствах RIM Blackberry применяется формат видеофайлов 3GP, который также использует кодек H264.


Программное обеспечение кодирования

Кодек H264 получил широкое распространение, поэтому большинство программных продуктов для редактирования видео способны кодировать видео в формате MP4. Кодек WebM появился сравнительно недавно, однако соответствующие инструменты уже доступны. Несмотря на то, что Ogg — это формат с открытым исходным кодом, он не получил широкого распространения, поэтому для него существует лишь несколько инструментов. Ссылки на дополнительную информацию по этому вопросу и на соответствующие технологии приведены в разделе Ресурсы.

Терминология кодирования видео

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

  • Переменный битрейт (VBR) и постоянный битрейт (CBR). В случае VBR битрейт (объем двоичной информации, выделяемый на кодирование одной секунды видео) регулируется согласно сложности текущего изображения; в случае CBR битрейт неизменен на всем протяжении видеоматериала, независимо от сложности конкретного сегмента. CBR широко применяется при потоковой трансляции.
  • Многопроходность. Этот термин означает, что кодирование осуществляется в два прохода. На первом проходе производится анализ данных, что позволяет на втором проходе добиться максимальной степени сжатия. Эта функция не используется при потоковой трансляции медиаконтента.
  • Квадратные/прямоугольные пикселы. Этот термин представляет собой прискорбное наследие первых программных продуктов для преобразования видео. По существу, он объясняет, почему при разрешении 720x480 используются неквадратные пикселы, а при разрешении 640x480 – квадратные пикселы. В случае некорректного преобразования изображение окажется растянутым.
  • Уровень. Это параметр кодека H264. Уровни (которых всего 16) по существу являются сокращенными обозначениями ограничений для различных видеокомпонентов при осуществлении сжатия.
  • Профили. Профили – это наборы возможностей при кодировании в формат MP4. Наиболее распространены профиль baseline (базовый), который используется для Интернета, для видеоконференц-связи и для мобильных приложений; профиль main (основной), который используется для трансляций цифрового телевидения со стандартным разрешением или для Web-трансляций с высоким разрешением; и профиль high (высокий), который используется для трансляций и для приложений на основе дисковых накопителей, в частности, для дисков Blu-ray.

Лицензирование

Контейнер MP4, видеокодек H264 и аудиокодек ACC представляют собой закрытые решения, патенты на которые принадлежат организации MPEG LA Group. Для личных Web-сайтов или для коммерческих Web-сайтов с небольшим количеством видеофайлов это не составляет проблемы. Однако компании с большим количеством видеофайлов должны обращать серьезное внимание на лицензии и на платежи, поскольку этот фактор способен повлиять на экономические показатели бизнеса. Контейнер MP4 – как и соответствующие кодеки – в настоящее время бесплатен для конечных пользователей.

Контейнеры WebM и Ogg, видеокодеки VP8 и Theora, аудиокодек Vorbis поставляются по лицензии Berkeley Software Distribution License (бесплатная лицензия с открытым исходным кодом). Это позволяет бесплатно создавать, распределять и просматривать видеоматериалы. Однако ходят слухи, что кодек VP8 нарушает некоторые патенты на кодек H264, поэтому следите за ситуацией.


Рекомендации

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

Ogg Theora:

  • Доводы «за»:
    • Бесплатность
    • Работа в среде Linux®
  • Доводы «против»:
    • Малая распространенность
    • Отсутствие аппаратного ускорения
  • Сценарии применения:
    • Обслуживание небольшого количества файлов
    • Малые или персональные сайты
    • Отсутствие требований совместимости
    • Предпочтение продуктам с открытым исходным кодом

WebM:

  • Доводы «за»:
    • Бесплатность
    • Очень быстрый рост распространенности
    • В ближайшее время будет поддерживаться просмотр с помощью технологии Flash
    • Реализуется поддержка аппаратного ускорения
    • Поддержка со стороны Google/YouTube
  • Доводы «против»:
    • Потенциальные судебные тяжбы с организацией MPEG LA
    • Не поддерживается устройствами iPhone и iPad
  • Сценарии применения
    • Хорошо подходит для сайтов с большим количеством файлов
    • Совместимость без финансовых затрат
    • Отсутствие опасений относительно совместимости с продуктами Apple
    • Возможность будущего успеха

MP4:

  • Доводы «за»:
    • Хорошо проработанный отраслевой стандарт
    • Файлы наименьшего размера и самые четкие изображения
    • Использование широко поддерживаемого аппаратного ускорения
  • Доводы «против»:
    • Необходимо аппаратное ускорение, поскольку декодирование интенсивно использует процессорные ресурсы
    • Возможное появление лицензионных платежей
    • Ситуация неуверенности, обусловленная потенциальным успехом Google с форматом WebM
  • Сценарии применения:
    • Наилучший вариант для полной совместимости и воспроизведения у наибольшего числа зрителей
    • Воспроизведение во всех браузерах и на современных мобильных платформах (при наличии Flash-плеера)
    • Наилучшее решение, если желательно наличие лишь одной версии видеофайла

Заключение

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

Ресурсы

Научиться

  • В своем блоге компания Opera предлагает спецификацию видео HTML5.
  • Ресурсы, API-интерфейсы и рекомендации по созданию видео HTML5 для Opera.
  • Информация об организации MPEG LA Group, которая владеет патентами MP4 H264.
  • Начальная страница проекта WebM Project, содержащая ссылки на перспективные планы и ресурсы.
  • Основной Web-сайт по работе с файловым форматом Ogg.

Получить продукты и технологии

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, SOA и web-сервисы
ArticleID=762708
ArticleTitle=Введение в видео HTML5
publish-date=09302011