…И наконец разметка

-acodec vorbis — указывает, что мы пользуемся аудиокодеком Vorbis, как и всегда при кодировании WebM-видео.

Теперь у нас есть MKV-файл с видео VP8 и аудио Vorbis. Это уже очень близко

к нужному: формат контейнеров WebM в техническом отношении очень схож

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

you@localhost$ mkclean --doctype 4 pr6.mkv pr6.webm

Вот и все!

…И наконец разметка

Если это книга об HTML, то где же образцы разметки? Вот мы до них и добрались.

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

<img src="...">.

<video src=”pr6.webm”></video>

В принципе, больше ничего не надо указывать. Но, как и в случае с тегом <img>, рекомендуется всегда прописывать для <video> атрибуты width и height. Их значения могут быть такими же, как значения максимальной ширины и высоты кадра, выбранные вами в процессе кодирования:

<video src="pr6.webm" width=”320” height=”240”></video>

Не беспокойтесь, если по одной из координатных осей ваше видео чуть меньше. Браузер просто поместит его по центру прямоугольника, заданного тегом <video>, и не будет растягивать или сжимать, нарушая пропорции.

По умолчанию тег <video> не отображает виджетов, управляющих воспроизведением. Нужные кнопки можно создать с помощью старых добрых HTML, CSS и JavaScript. Для тега <video> определены такие методы, как play() и pause(), а также доступное для чтения и записи свойство currentTime; кроме этого, доступны для чтения и записи свойства volume и muted. Таким образом, в вашем распоряжении есть все необходимое, чтобы построить собственный пользовательский интерфейс.

Если не хотите строить свой интерфейс, можно воспользоваться встроенным набором элементов управления. Для этого вставьте в тег <video> атрибут controls:

<video src="pr6.webm" width="320" height="240" controls></video>

Прежде чем идти далее, скажу еще о двух необязательных атрибутах: preload и autoplay. Теперь позвольте разъяснить, чем они полезны.

Атрибут preload говорит браузеру, что скачивание видео надо начать сразу по окончании загрузки страницы. Это целесообразно в том случае, если просмотр

118 Глава 5.. Видео в Сети

видео — единственная цель посещения данной страницы. Если же видео — лишь вспомогательный материал, интересный для небольшого количества посетителей, то атрибуту preload лучше присвоить значение none. Тем самым будет снижен сетевой трафик.

Вот пример веб-видео, скачивание которого (но не воспроизведение) начнется сразу после загрузки страницы:

<video src="pr6.webm" width="320" height="240" preload></video>

А вот такой клип не начнет автоматически скачиваться после загрузки страницы:

<video src="pr6.webm" width="320" height="240" preload=”none”></video>

Атрибут autoplay, в свою очередь, говорит браузеру, что надо не только начать скачивать видео сразу по окончании загрузки страницы, но и начать его воспроизводить как можно раньше. Это, конечно, нравится не всем. Но в HTML5 важно иметь такой атрибут. Есть на свете люди, заинтересованные в том, чтобы их видеофайлы воспроизводились автоматически, невзирая на реакцию посетителей. Если бы в HTML5 не было стандартного механизма автозапуска видео, то такие люди прибегали бы к уловкам JavaScript, например вызывали метод play() видео­ элемента при событии window.onload. Этой форме навязывания очень сложно противостоять. Напротив, в нынешней ситуации можно установить (или, если угодно, написать) браузерное расширение, которое позволит всегда игнорировать атрибут autoplay.

Приведу пример веб-видео, скачивание и воспроизведение которого начнется, насколько это возможно, сразу после загрузки страницы:

<video src="pr6.webm" width="320" height="240" autoplay></video>

Существует сценарий Greasemonkey (http://www..greasespot..net), которым вы можете дополнить свою копию Firefox. Этот сценарий предотвращает автоматическое воспроизведение HTML5-видео. В нем используется определенный в HTML5 DOM-атрибут autoplay. Это JavaScript-эквивалент того атрибута autoplay, который доступен в HTML-коде:

// ==/UserScript==

var arVideos = document.getElementsByTagName('video'); for (var i = arVideos.length - 1; i >= 0; i--) {

var elmVideo = arVideos[i]; elmVideo.autoplay = false;

}

Остановимся на минутку. Если вы внимательно и подряд читали эту главу, то знаете, что в нашем распоряжении сейчас не один видеофайл, а целых три. Первый — OGV-файл, созданный с помощью Firefogg (см. раздел «Кодирование Oggвидео с помощью Firefogg» этой главы) или ffmpeg2theora (см. раздел «Пакетное

кодирование Ogg-видео с помощью ffmpeg2theora» данной главы). Второй — MP4-файл, созданный с помощью программы HandBrake (см. раздел «Кодирование H.264-видео с помощью HandBrake» этой главы). Третий — WEBM-файл, созданный с помощью ffmpeg (см. раздел «Кодирование WebM-видео с помощью ffmpeg» этой главы).

HTML5 позволяет сослаться на все три файла с помощью тега <source>. Каждый тег <video> может содержать столько тегов <source>, сколько нужно. Браузер, двигаясь сверху вниз по списку файлов-источников, воспроизведет первый же файл, который сумеет.

Возникает вопрос: как браузер определит, что может или не может воспроизвести тот или иной файл? В худшем случае он будет загружать каждый файл и пытаться воспроизвести его. Это, естественно, огромный расход трафика. Чтобы не напрягать сеть лишний раз, следует говорить браузеру всю правду о видеофайлах. Это позволяет сделать атрибут type тега <source>.

Вот как будет выглядеть дополненный код:

<video width="320" height="240" 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"’>

</video>

Рассмотрим его по порядку. В теге <video> указаны ширина и высота области воспроизведения, но не содержится прямой ссылки на видеофайл. Внутри <video> три тега <source>, каждый из которых посредством атрибута src ссылается на один файл и посредством атрибута type сообщает браузеру о формате этого файла. Атрибут type кажется сложным, и, в общем, не напрасно. Он содержит данные трех типов: формат контейнера (см. раздел «Видеоконтейнеры» этой главы), видеокодек (см. раздел «Видеокодеки» данной главы) и аудиокодек (см. раздел «Аудиокодеки» этой главы).

Начнем с последнего из трех файлов. Видеофайл формата OGV— это контейнер Ogg, который представлен записью video/ogg (строго говоря, это MIME-тип видеофайлов Ogg). Использованы видеокодек Theora и аудиокодек Vorbis. Здесь все достаточно просто, немного смущает лишь способ записи значения атрибута. Пара названий кодеков берется в кавычки, следовательно, значение type целиком надо взять в кавычки другого вида:

<source src="pr6.ogv" type=’video/ogg; codecs=”theora, vorbis”’>

Тег <source>, отсылающий к файлу WebM, выглядит схожим образом, но оснащен другим MIME-типом (video/webm, а не video/ogg) и отсылает к другому видео-

кодеку (VP8, а не Theora):

<source src="pr6.webm" type=’video/webm; codecs=”vp8, vorbis”’>

Тег <source>, отсылающий к файлу H.264, выглядит существенно сложнее. Если помните, я говорил, что H.264-видео (см. раздел «H.264» данной главы) и AACаудио (см. раздел «Advanced Audio Coding» этой главы) существуют вразных «профилях». При кодировании мы пользовались базовым профилем H.264 и профилем

Вот какие директивы AddType надо добавить:

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

Первая строка обслуживает видео в контейнере Ogg, вторая — видео в контейнере MPEG-4, а третья — WebM-видео. Вписав их, можно навсегда забыть о проблемах с MIME-типизацией видео. В противном случае в некоторых браузерах ваши видеофайлы небудутоткрываться, даже если указывать MIME-типы в атрибутах type в коде страницы.

За еще более пугающими подробностями конфигурирования веб-сервера отсылаю вас к публикации Центра Mozilla для веб-разработчиков под названием «Конфигурирование серверов под медиаданные Ogg» (https://developer..mozilla..org/ en/Configuring_servers_for_Ogg_media). Советы этой статьи в равной степени при-

менимы к видео в контейнерах MP4 и WebM.

А что в IE?

Ко времени написания книги компания Microsoft выпустила Internet Explorer 9 в «предварительной версии для разработчиков» (developer preview). Эта версия еще

не поддерживает HTML5-тег <video>, но Microsoft публично пообещала (http://blogs.. msdn..com/ie/archive/2010/03/16/html5-hardware-accelerated-first-ie9-platform-preview-available-

for-developers..aspx), что окончательный вариант IE 9 будет поддерживать видео H.264

иаудио AAC в контейнере MPEG-4, подобно Safari на Macintosh иMobile Safari плат-

формы iOS.

Как же обстоит дело в более старых версиях Internet Explorer, то есть стабильных версиях до восьмой включительно? Большинство пользователей Internet Explorer пользуются также приложением Adobe Flash, современные версии которого (начиная с 9.0.60.184) поддерживают видео H.264 и аудио AAC в контейнере MPEG-4. Таким образом, H.264-видео, закодированное вами для Safari (см. раздел «Кодирование H.264-видео с помощью HandBrake» этой главы), может быть воспроизведено с помощью видеопроигрывателя на основе Flash, если система обнаружит, что браузер посетителя не поддерживает HTML5-функцио­ нальность.

Flowplayer (http://flowplayer..org) — видеопроигрыватель на основе Flash с открытым исходным кодом, распространяемый под лицензией GPL (для него доступны

икоммерческие лицензии, о которых рассказано по адресу http://flowplayer..org/ download/). О теге <video> проигрывателю Flowplayer ничего не известно, и магическим образом преобразовывать тег <video> во Flash-объект он не умеет. Но это легко поправимо средствами HTML5, ведь внутрь <video> можно вложить тег <object>. Браузеры без поддержки HTML5-видео будут игнорировать тег <video> и отображать вместо него вложенный <object>, который, вызывая Flash, будет воспроизводить видео с помощью Flowplayer. Браузеры же с поддержкой HTML5-видео отыщут видеофайл-источник и воспроизведут его, тогда как вложенный <object> будет полностью проигнорирован.