И, наконец-то, разметка

Автор: Евгений Рыжков и Татьяна Головко Дата публикации: 22.03.2011

Ты можешь подумать: «Ведь это книга о HTML. Где же тогда разметка?!».

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

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

С технической точки зрения, это все, что нужно. Но как и для изображений, следует не забывать указывать размеры видео с помощью атрибутов width и height. Значения этих атрибутов могу быть равны максимальным высоте и ширине, указанным при кодировании.

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

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

По умолчанию тег видео не имеет собственных элементов управления роликом. Но их можно создать с помощью HTML, CSS и Javascript. Элемент <video> снабжен методами play() и pause(), также имеется свойство для чтения и записи currentTime. А еще есть свойства volume и muted. Поэтому, как говорится: «все в твоих руках».

Если собственные элементы управления создавать облом, можно эту ношу переложить на плечи браузера. Для этого следует просто включить атрибут controls и браузер отобразит встроенную панель управления.

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

Прежде, чем пойдем дальше, хочу еще упомянуть о двух атрибутах: preload и autoplay. Атрибут preload объясняет браузеру, что ты хотел бы, чтобы видео начало подгружаться как только закончится загрузка страницы. Это имеет смысл, если главное, что есть на странице — это видео. С другой стороны, если это какой-то второстепенный ролик на странице и пользователи с небольшой вероятностью захотят его просмотреть, тогда устанавливаем 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() при загрузке страницы). В итоге конечному пользователю было бы только хуже. С другой стороны, гораздо проще теперь добавить расширение браузерам, чтобы запретить автоматический запуск роликов.

В этом примере добавим атрибут для автоматического запуска видео:

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

А вот скрипт Greasemonkey, который можно инсталлировать в Firefox, позволяет запретить HTML5 автозапуск видео. Он читает атрибут autoplay и если нужно, меняет его значение:

// @name Disable video autoplay
// @namespace http://diveintomark.org/projects/greasemonkey/
// @description Ensures that HTML5 video elements do not autoplay
// @include *
// ==/UserScript==
var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
	var elmVideo = arVideos[i];
	elmVideo.autoplay = false;
}

Минуточку. Если ты читаешь эту главу сначала, то ты помнишь, что мы готовили три видео файла. Один из них — это .ogv, который делался с помощью Firefogg или ffmpeg2theora. Второй — это .mp4, созданный с помощью HandBrake. И третий — это .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 тип такой), видео кодек — Ttheora, аудио — Vorbis. Если разобраться, то ничего сложного нет. Обрати внимание только на кавычки атрибута type — используется правило синтаксиса вложения кавычек:

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

Для WebM файла, атрибут type выглядит почти точно так же. Отличие только в MIME типе (video/webm вместо video/ogg) и другой видео кодек (vp8 вместо theora):

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

Формата H.264 — наиболее сложный случай. Помнишь, я писал, что для видео H.264 и аудио AAC есть несколько профилей? Мы закодировали наше видео в H.264 базового профиля и AAC низкого профиля и все это заключили в контейнер MPEG-4. Вся эта информация учтена в атрибуте type:

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

Выйгрыш от такой подачи информации браузеру очевиден: он читает содержимое атрибута type и решает, сможет ли он воспроизвести данное видео. При этом он не загружает видео вовсе, даже ни малейшего его кусочка. Вот этим и экономится трафик.

Если следовать инструкциям этой главы при подготовке видео для Веб, то код можно просто себе копировать. Если им не следовать, тогда придется разбираться с типами самостоятельно.

На момент написания этой книги iPad содержал ошибку, которая мешает ему прочеть какое-либо видео, кроме первого. Поэтому приходится в списике видео на первое место всегда ставить MP4, и только потом перечислять бесплатные форматы.

MIME типы и головная боль

Видео — это как очень сложный пазл, состоящий из множества частей. Я даже не хочу о всех вспоминать. Но важно помнить, что криво настроенный сервер может стать причиной багов видео, даже если локально все работает отлично. Если ты столкнулся с такой проблемой, то скорее всего причина этому — MIME-типы.

Я о них уже упоминал в первой главе, но, возможно, ты не предал этому особого значения. Теперь повторяю еще раз и большими буквами:

ВИДЕО ФАЙЛЫ ДОЛЖНЫ ОТДАВАТЬСЯ СЕРВЕРОМ С ПРАВИЛЬНЫМ MIME-ТИПОМ.

Что значит правильный MIME-тип? Мы уже встречали тип файла в значении атрибута type элемента <source>. Но указание типа файла не является достаточным. Нужно так же убедится, что сервер передает правильные MIME-типы в параметре Content-Type HTTP заголовка.

Если используется веб-сервер на базе Apache, можно воспользоваться директивой AddType в файле httpd.conf или же в файле .htaccess, который должен находится в диктории с видеофайлами. (Если используется другой сервер, придется обратится к документации и почитать как установить нужный Content-Type для новых типов файлов). С помощью директивы AddType добавим нужные нам типы:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

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

Обращу внимание на статью «Настройка сервера для работы с Ogg» на Mozilla Developer Center, котрая поможет разобраться во многих тонкостях настройки сервера. В этом материале так же затронуты вопросы, связанные с MP4 и WebM.

Куда дальше