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

Видео форматы похожи на языки. Русская и испанская газеты могут написать об одном и том же, но, если ты не умеешь читать по-испански, тебе будет полезна только одна из них. Для воспроизведения видео, браузер должен понимать «язык», на котором оно написано. Тексты поздравлений именнику в газету тоже будут полезны для оценки ситуации.

Язык видео называется кодеком — это алгоритм, который кодирует видео в поток битов. На свете существует множество кодеков. Но какие из них нужно использовать? Это печальный момент в развитии Веб — разработчики браузеров не могут договориться о едином формате. Похоже, что споры пока ведутся вокруг двух вариантов: один из них платный и работает в Safari и в iPhone (а так же во флеш, если используется решение «Видео для всех»), второй кодек бесплатен и работает в браузерах с открытым исходным кодом, таких как Firefox и Chrome.

Для определения поддержки видео формата используется прием №3, упомянутый ранее. Если браузер поддерживает HTML5 видео, создается элемент video, который будет иметь метод canPlayType(). Этот метод сообщит какой видео формат поддерживает браузер.

Эта функция проверит поддержку платного формата для Mac и iPhone:

function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}

Сначала функция проверит поддержку HTML5 видео, используя ранее упомянутую функцию supports_video()

if (!supports_video()) { return false; }

Если видео вообще не поддерживается, то о какой поддержке видео формата может идти речь? Затем создается фиктивный элемент <video> и вызывается метод canPlayType():

var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

Видео формат на самом деле — это сочетание разных вещей. С технической точки зрения, мы просим проиграть H.264 Baseline видео и AAC LC аудио в контейнере MPEG-4.

Функция canPlayType() не возвращает true или false. Она вернет строку, которая может иметь три значения:

• «probably» — если браузер уверен что сможет проиграть данный формат
• «maybe» — если браузер думает что сможет проиграть
• «» (пустая строка) — если браузер уверен что не сможет воспроизвести.

Следующая функция проверит поддержку формата для Firefox и других open source браузеров. Процесс аналогичен предыдущему, с той лишь разницей, что просим проиграть другие форматы: Theora видео и Vorbis аудио в контейнере Ogg:

function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}

И напоследок, WebM – новый open-source видео кодек, который будет поддерживаться большинством браузеров новых версий, включая Firefox, Chrome и Opera. Для проверки поддержки этого формата используем следующий код:

function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}

Ну и конечно можно использовать Modernizr (на момент написания книги, он не умел определять поддержку WebM):

if (Modernizr.video) {
// Давай воспроизведем видео! Но какого формата?
if (Modernizr.video.ogg) {
// пробуем Ogg Theora + Vorbis в контейнере Ogg 
} else if (Modernizr.video.h264){
// пробуем H.264 video + AAC audio в контейнере MP4
}
}

Куда дальше

• следующая — Локальное хранилище
• предыдущая — Video
• содержание