Последнее замечание — ключ ко всему остальному. В HTML5 все дочерние узлы тега <video>, кроме <source>, полностью игнорируются. Это позволяет применять в более новых браузерах HTML5-видео, а в более старых — элегантный запасной вариант, Flash. Никаких трюков на JavaScript не требуется. Подробнее об этом способе можно прочесть на сайте http://camendesign..com/code/video_for_ everybody в статье «Видео для каждого».

Живой пример

Рассмотрим образец, использующий данную технологию. Я дополнил код из статьи «Видео для каждого» так, чтобы стало возможным вставить на страницу клип в формате WebM. Вот команды терминала для кодирования одного и того же исходного файла в три разных формата:

## Theora/Vorbis/Ogg

you@localhost$ ffmpeg2theora --videobitrate 200 --max_size 320x240

--output pr6.ogv pr6.dv

## H.264/AAC/MP4

you@localhost$ HandBrakeCLI --preset “iPhone & iPod Touch” --vb 200 --width 320

--two-pass --turbo --optimize --input pr6.dv --output pr6.mp4

## VP8/Vorbis/WebM

you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16

-token_partitions 4 -altref 1 -lag 16 -keyint_min 0 -g 250 -mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx_vp8 -an -f rawvideo -y NULffmpeg --videobitrate 200

you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16

-token_partitions 4 -altref 1 -lag 16 -keyint_min 0 -g 250 -mb_static_threshold 0 -skip_threshold 0 -qmin 1 -qmax 51

-i pr6.dv -vcodec libvpx_vp8 -b 2 04800 -s 320x240 -aspect 4:3

-acodec vorbis -ac 2 -y pr6.mkv you@localhost$ mkclean --doctype 4 pr6.mkv pr6.webm

Вокончательном коде страницы используется тег <video> для HTML5-видео,

авложенный в него <object> — для запасного варианта с привлечением Flash:

<video id="movie" width="320" height="240" preload controls>

<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />

<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> <object width="320" height="240" type="application/x-shockwave-flash"

data="flowplayer-3.2.1.swf">

<param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={

"clip": {"url": "http://wearehugh.com/dih5/good/bbb_480p.mp4", "autoPlay":false, "autoBuffering":true}}' />

<p>Скачать видео в формате <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or

<a href="pr6.ogv">Ogg</a>.</p> </object>

</video>

Сочетание HTML5 и Flash позволяет просматривать это видео практически в любом браузере на любом устройстве.

Для дальнейшего изучения

Тег <video> в спецификации HTML5 (http://bit..ly/a3kpiq).

«Видео для каждого» (http://camendesign..com/code/video_for_everybody).

«Элементарное введение в кодировки видеоданных» (http://diveintomark..org/ tag/give).

«Что следует знать о новом кодеке Theora 1.1» (http://hacks..mozilla..org/2009/09/ theora-1-1-released/) — статья Кристофера Близзарда (Christopher Blizzard).

«Конфигурирование серверов под медиаданные Ogg» (https://developer..mozilla.. org/en/Configuring_servers_for_Ogg_media).

«Кодирование с помощью кодека x264» (http://www..mplayerhq..hu/DOCS/HTML/en/ menc-feat-x264..html).

«Свойства разных типов видео» (http://wiki..whatwg..org/wiki/Video_type_parameters).

Zencoder Video JS (http://videojs..com) — нестандартные элементы управления

HTML5-видео.

«Все, что вам нужно знать об аудио и видео в HTML5» (http://dev..opera..com/ articles/view/everything-you-need-to-know-about-html5-video-and-audio/) — статья Сай-

мона Питерса (Simon Pieters).

Кроме стандартного API геолокации, разные мобильные платформы предусматривают собственные API. О них мы тоже еще поговорим.

Покажите мне код

Основополагающим для API геолокации считается новое свойство navigator. geolocation глобального объекта navigator.

Простейшая функция для работы с API геолокации такова:

function get_location() { navigator.geolocation.getCurrentPosition(show_map);

}

Эта функция не проверяет поддержку API, не обрабатывает ошибки и не принимает никаких параметров. Но в хорошем веб-приложении дело должно обстоять совсем наоборот хотя бы с первыми двумя пунктами из названных трех.

Для тестирования поддержки API геолокации (см. раздел «Геолокация» главы 2) воспользуйтесь Modernizr:

function get_location() {

if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map);

}else {

//нет встроенной поддержки, можно попробовать Gears

}

Чтоделать,еслигеолокациянеподдерживается,—необходиморешатьвеб-мастеру. КаквоспользоватьсяGearsвкачестверезервноговарианта,яскорорасскажу,ноперед этим надо объяснить, как обрабатывается вызов функции getCurrentPosition(). В начале этой главы я отметил, что поддержка геолокации не является принудительной. Браузер никогда не заставит вас передать на веб-сервер данные о местонахождении помимо вашей воли. На вызов функции getCurrentPosition() геолокационного API различные браузеры реагируют по-разному, но общая логика едина. Так, в Mozilla Firefox в верхней части окна всплывет «информационная панель». Как она выглядит, показано на рис. 6.1.

Рис. 6.1. Панель геолокации

Конечному пользователю эта панель сообщает:что сайт запрашивает его местонахождение;

какой именно сайт запрашивает его местонахождение. Пользователь может:

перейти на справочную страницу Mozilla http://www..mozilla..com/en-US/firefox/ geolocation/, чтобы понять суть происходящего;

разрешить передачу геолокационных данных;запретить передачу геолокационных данных;

велеть браузеру запомнить выбор (разрешение/запрет), чтобы при последу­ ющих посещениях того же сайта панель больше не всплывала.

Кроме того, описываемая панель:

немодальна, то есть позволяет переключаться между вкладками и окнами браузера;

привязана к определенной вкладке, то есть переход к другой вкладке или окну браузера заставит ее исчезнуть, а если вернуться на прежнюю вкладку, она вновь появится;

безусловна, то есть сайт не может ее обойти;

блокирует запрос, то есть, пока браузер ожидает вашего ответа, сайт не имеет возможности определить ваше местонахождение.

Выше был показан код на JavaScript, в результате обработки которого браузер выводит панель. Это функция, принимающая в качестве аргумента пользовательскую функцию обратного вызова show_map(). Вызов getCurrentPosition() обрабатывается сразу, но доступ к данным о местонахождении пользователя сценарий получит не сразу. Когда они будут доступны, к ним прежде всего получит доступ функция обратного вызова. Она может выглядеть примерно так:

function show_map(position) {

var latitude = position.coords.latitude; var longitude = position.coords.longitude;

// покажем вас на карте или сделаем что-нибудь еще!

}

Эта функция вызывается с единственным аргументом, который представляет собой объект с двумя свойствами: coords и timestamp. Свойство timestamp хранит дату и время расчета координат.

ПРИМЕЧАНИЕ

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

Уобъектаcoords естьнесколькособственныхсвойств:latitude (широта),longitude (долгота) и др. Их значения отвечают названиям. Все они в совокупности представляют физическое местоположение пользователя в мире.

Свойства объекта position показаны в табл. 6.2.

Таблица 6.2. Свойства объекта position