Что работает в Веб

Подготовили: Евгений Рыжков и Татьяна Головко Дата публикации: 22.03.2011

Если ты еще не в полном ступоре, поздравляю — ты крепче многих других. Как видишь видео (и аудио) — это не такая простая тема и это притом, что мы тут коснулись только малой части. Уверен, что ты задаешься вопросом, какое это все имеет отношение к HTML5.

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

На момент написания этой книги была следующая картина:

  • Mozilla Firefox (3.5+) и Opera (10+) поддерживают видео Theora и аудио Vorbis в составе Ogg;
  • Google Chrome (3+ ) поддерживает видео Theora и аудио Vorbis в формате Ogg. А так же видео H.264 (все профили) и аудио AAC (все профили) в составе MP4;
  • Google Chrome, ночные сборки Chromium, ночные сборки Mozilla Firefox поддерживают видео VP8 и аудио Vorbis в составе WebM;
  • Sarari Mas OS и Windows PC поддерживает любой из QuikTime. В теории ты можешь потребовать от пользователя установки дополнительных QuikTime плагинов. На практике же мало кто это сделает. Поэтому тебе остается мириться с теми форматами, которые QuikTime поддерживает по умолчанию. Хотя список поддерживаемых форматов у него велик, но в нем отсутствует Theora, Vorbis и Ogg. Тем не менее, QuikTime поддерживает H.264 (основной профиль) и AAC в составе MP4;
  • Мобильные устройства, такие как iPhone и Google Android телефоны, поддерживают H.264 (базовый профиль) и AAC (low-complexity профиль) в составе MP4;
  • Adobe Flash (9.0.60.184 +) поддерживает H.264 (все профили) и AAC (все профили) в составе MP4;
  • Internet Explorer 9 будет поддерживать H.264 (какие профили пока не ясно) и AAC (оп профилям тоже не ясно) в составе MP4
  • Internet Explorer 8 не имеет поддержки тега <video>, но зато все IE поддерживают Flash. Дальше я покажу как можно использовать тег <video> с изящным откатом к Flash.

Поддержка видео кодеков браузерами:

Кодеки/Формат IE Firefox Safari Chrome Opera iPhone Android
Theora+Vorbis+Ogg - 3.5+ - 5.0+ 10.5+ - -
H.264+AAC+MP4 - - 3.0+ 5.0+ - 3.0+ 2.0+
WebM - - - - - - -

Через год общая картина существенно изменится. WebM будет включен в большинство браузеров и картина должна стать примерно следующей:

Кодеки/Формат IE Firefox Safari Chrome Opera iPhone Android
Theora+Vorbis+Ogg - 3.5+ - 5.0+ 10.5+ - -
H.264+AAC+MP4 - - 3.0+ 5.0+ - 3.0+ 2.0+
WebM 9.0+* 4.0+ - 6.0+ 11.0+ - -**

* — IE9 будет поддерживать WebM только с установленным кодеком VP8, что означает, что Microsort не собирается по умолчанию включать этот кодек;

** — Google взяла на себя обязательства полной поддержки WebM Android'ом, но о каких-либо конкретных сроках ничего не известно.

А теперь нокаутирующий удар…

Единой комбинации форматов и кодеков для HTML5, которая работала бы во всех браузерах, нет!

И в ближайшем будущем что-то врядли поменяется.

Чтобы твое видео смогли увидеть на разных устройствах и платформах, придется его кодировать по-разному несколько раз.

Для максимальной совместимости, твоя работа с видео будет состоять из следующих шагов:

  1. Создаем версию, которая будет использоваться видео Theora и аудио Vorbis в формате Ogg;
  2. Создаем версию, которая использует WebM (VP8 + Vorbis);
  3. Создаем версию, которая использует H.264 базового профиля и AAC профиля low-complexity в формате MP4;
  4. Прописываем все три ссылки в теге <video> и делаем Flash для браузеров, не поддерживающих HTML5 тег <video>.

Куда дальше

Показать комментарии