Что работает в Веб
Дата публикации: 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, которая работала бы во всех браузерах, нет!
И в ближайшем будущем что-то врядли поменяется.
Чтобы твое видео смогли увидеть на разных устройствах и платформах, придется его кодировать по-разному несколько раз.
Для максимальной совместимости, твоя работа с видео будет состоять из следующих шагов:
- Создаем версию, которая будет использоваться видео Theora и аудио Vorbis в формате Ogg;
- Создаем версию, которая использует WebM (VP8 + Vorbis);
- Создаем версию, которая использует H.264 базового профиля и AAC профиля low-complexity в формате MP4;
- Прописываем все три ссылки в теге <video> и делаем Flash для браузеров, не поддерживающих HTML5 тег <video>.
Куда дальше
- следующая — Вопросы лицензирования H.264
- предыдущая — Аудио кодеки
- содержание