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

Браузеры, которые не поддерживают HTML5-видео, совершенно игнорируют теги <video>. Но этот факт можно обратить в свою пользу и заставить браузер воспроизводить видео с помощью стороннего приложения. Такое решение предложил Крок Кэмен (Kroc Camen). Его разработка Video for Everybody! («Видео для каждого», http://camendesign..com/code/video_for_everybody) позволяет опирать-

ся на возможности HTML5-видео там, где они присутствуют, а в более старых браузерах пользоваться QuickTime или Flash. Разработка Кэмена построена не на основе JavaScript и поэтому может обслуживать, в принципе, любой браузер, в том числе мобильный.

Чтобы выполнять с видеоданными кое-какие операции посложнее, чем только вставка на страницу и воспроизведение, надо пользоваться JavaScript. Протестировать поддержку видео можно способом 2 (см. раздел «Способы тестирования браузера» этой главы). Если в браузере поддерживается HTML5-видео, то для DOM-объекта, соответствующего тегу <video>, будет определен метод canPlayType(), а при отсутствии поддержки HTML5-видео набор свойств DOM-объекта будет стандартным. Проверить, работает ли в браузере новая видеофункциональность, вам поможет следующая функция:

function supports_video() {

return !!document.createElement('video').canPlayType;

}

Чтобынеписатьсобственнуюфункцию,прибегнитек помощиModernizr(см.раздел «Modernizr: библиотека для тестирования HTML5-функций» этой главы):

if (Modernizr.video) {

// воспроизведем ролик!

} else {

// встроенной поддержки видео нет,

// надо пользоваться QuickTime или Flash

}

Отдельно нужно определять, какие форматы видео умеет воспроизводить браузер. Об этом — следующий раздел.

Форматы видео

Форматы видеоданных сродни разным языкам. В английской газете может быть написано то же самое, что и в испанской, но если вы умеете читать только поанглийски, то вторая газета будет вам без надобности (во всяком случае для чтения). Так и с видео: чтобы воспроизвести ролик, браузер должен знать «язык» его данных.

1 О различных форматах видео читайте «Элементарное введение в кодировки видеодан-

ных»: часть 1 «Форматы файлов» (http://diveintomark.org/archives/2008/12/18/give- part-1-container-formats) и часть 2 «Видеокодеки, сжимающие с потерями» (http:// diveintomark.org/archives/2008/12/19/give-part-2-lossy-video-codecs). — Примеч. авт.

«Языки» видеоформатов называются кодеками. Кодек — это алгоритм, в соответствии с которым последовательность графических образов кодируется последовательностью бит. Сейчас в мире несколько десятков широко используемых кодеков. Какой же выбрать? Суровая реальность HTML5 такова, что разработчики браузеров не сумели договориться о едином общепринятом видеокодеке. Впрочем, количество альтернатив немногим больше: две. Один из этих кодеков платный (лицензионный сбор), но работает в Safari и на iPhone (а также в Adobe Flash, если пользоваться разработками типа «Видео для каждого»). Другой — бесплатный, он работает в браузерах с открытым исходным кодом, таких как Chromium и Mozilla Firefox.

Протестировать поддержку разных форматов видео можно способом 3 (см. раздел «Способы тестирования браузера» этой главы). Если в браузере поддерживается HTML5-видео,тодляDOM-объекта,соответствующеготегу<video>,будетопределен метод canPlayType(), который и сообщит, с какими форматами видео может работать браузер.

Рассмотрим функцию, проверяющую браузер на умение читать патентованный формат Macintosh и 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"');

}

Впервойстрокеэтогокодаспомощьюсозданнойранеефункцииsupports_video() мы проверяем, есть ли в браузере поддержка HTML5-видео:

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

Если браузер не поддерживает HTML5-видео, то и разные форматы он, конечно, не будет читать.

Теперь создадим пустой тег <video> (но не будем присоединять его к странице, чтобы он не был виден) и вызовем метод canPlayType(). Этот метод наверняка будет доступен, ведь в его существовании только что удостоверилась функция supports_ video().

var v = document.createElement("video");

return v.canPlayType(‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’);

Формат видеоданных — это, вообще говоря, сочетание нескольких компонентов. Если говорить технически, показанный выше код спрашивает у браузера, может ли тот воспроизводить видео H.264 базового профиля и звук AAC профиля низкой сложности в контейнере MPEG-41.

Функция canPlayType() не возвращает булевы значения true и false. Зная, что некоторые видеоформаты очень сложны, функция отвечает одним из трех значений:

1Что все это значит, я объясню в главе 5. Возможно, вам не помешает также ознакомиться с «Элементарным введением в кодировки видеоданных» (http://diveintomark.org/ tag/give). — Примеч. авт.

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

Разметка в вопросах и ответах

Протестировать поддержку локального хранилища HTML5 можно способом 1 (см. раздел «Способы тестирования браузера» этой главы). Если HTML5хранилище поддерживается браузером, то для глобального объекта window будет определено свойство localStorage. Соответственно, если поддержки хранилища в браузере нет, то свойство тоже не будет определено. Проверить поможет такая функция:

function supports_local_storage() {

return (‘localStorage’ in window) && window[‘localStorage’] !== null;

}

Чтобы не писать собственную функцию, прибегните к помощи Modernizr: if (Modernizr.localstorage) {

//хранилище доступно!

}else {

//встроенной поддержки хранилища нет,

//стоит попробовать Gears или иное стороннее решение

Помните, что JavaScript чувствителен к регистру. Атрибут объекта Modernizr называетсяlocalstorage (всебуквыстрочные),аDOM-свойство—window.localStorage (буква S прописная).

Разметка в вопросах и ответах