Видео на сайте

Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не существовало стандартного способа сделать это, фактически, любое видео, что вы видели в Интернете, было добавлено через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он). Эти плагины достаточно хорошо интегрированы с браузером, поэтому вы могли даже не знать, что их используете. Но это до тех пор, пока не попытаетесь посмотреть видео на платформе без поддержки плагина.

HTML5 определяет стандартный способ вставки видео на веб-страницу с помощью элемента <video>. Поддержка <video> все ещё развивается и это вежливый способ сказать, что он пока не работает, по крайней мере, работает не везде. Но не отчаиваетесь! Есть альтернативные способы добавления, причём в изобилии.

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

Контейнеры видео

Вы можете думать о видеофайлах как об «AVI» или «MP4». В действительности, «AVI» и «MP4» только форматы файлов. Подобно ZIP-архиву, в котором может храниться любой файл, видеоформаты определяют способ хранения, а не данные. В действительности все несколько сложнее из-за того, что потоковое видео не всегда совместимо с форматами контейнеров, но это пока не важно.

Видеофайл обычно содержит несколько дорожек — видеодорожка (без звука), а также одну или несколько звуковых дорожек (без видео). Дорожки, как правило, взаимосвязаны, звуковая дорожка содержит маркеры для синхронизации аудио с видео. Дополнительные дорожки могут содержать метаданные, такие как соотношение сторон видео или язык звуковой дорожки. Контейнеры также могут содержать метаданные, такие как название самого видео, обложку, номер эпизода (для сериалов) и др.

Существует много форматов контейнеров видео, вот некоторые самые популярные.

• MPEG-4, обычно с расширением mp4 или m4v. MPEG-4 основан на старом контейнере Apple QuickTime (файлы с расширением mov). Трейлеры к фильмам на сайте Apple по-прежнему используют старый контейнер, но фильмы в iTunes поставляются в формате контейнера MPEG-4.
• Ogg, обычно с расширением ogv. Ogg является открытым стандартом с открытым исходным кодом для пользователей, свободным от каких-либо патентов. Браузеры Firefox 3.5, Chrome 4 и Opera 10.5 имеют встроенную поддержку без специальных плагинов — контейнера Ogg, Ogg-видео (называемое «Theora») и Ogg-аудио (называемое «Vorbis»). Ogg поддерживается всеми основными дистрибутивами Linux, также можно использовать его на Mac и Windows, установив соответственно компоненты QuickTime или фильтры DirectShow. Плеер VLC превосходно проигрывает Ogg-файлы на любой платформе.
• Flash-видео, обычно с расширением flv. Для Flash-видео используется Adobe Flash, что не удивительно. До Flash 9.0.60.184 (по-другому Flash Player 9 Update 3) поддерживался только контейнер в формате Flash. Поздние версии также поддерживают контейнер MPEG-4.
• WebM, обычно с расширением webm. Является открытым стандартом, свободным от каких-либо патентов и разработан специально для использования с HTML5 видео, усилен видеокодеком VP8 и аудиокодеком Vorbis. Технически похож на другой формат, называемый Matroska. Поддерживается изначально, без отдельных плагинов, в последних версиях Google Chrome, Mozilla Firefox и Opera.
• ASF, как правило, с расширением .asf. Формат контейнера ASF был изобретён Microsoft для потокового видео. Включала восхитительную схему DRM, которая ограничивала пользователям резервное копирование своих легально приобретённых лицензий. Таким образом, если по какой-то причине вы потеряли лицензию на содержимое, считали, что вы должны купить её ещё раз.
• Audio Video Interleave, как правило, с расширением avi. Формат контейнера AVI был изобретён Майкрософт в то время, когда считалось удивительным, что компьютеры вообще могут проигрывать видео. Особенности последних форматов файлов вроде метаданных официально не поддерживаются. Также этот формат официально не поддерживает большинство используемых современных аудио и видеокодеков. Он является форматом по умолчанию для популярных кодировщиков вроде MEncoder.

Видеокодеки

Когда вы говорите о «просмотре видео», речь, вероятно, идёт о сочетании одного потока видео и одного аудиопотока. Но у вас нет двух разных файлов, есть «видео». Это может быть AVI-файл или MP4-файл, который всего лишь является форматом контейнера наподобие ZIP-архива, содержащего внутри себя несколько видов файлов. Формат контейнера определяет, как хранить видео и аудиопотоки в одном файле.

Когда вы смотрите видео, ваш плеер делает три вещи одновременно:

1. Интерпретирует формат контейнера, узнаёт, какие аудио и видеодорожки доступны, как они хранятся в файле, чтобы можно было найти данные.
2. Декодирует видеопоток и отображает серию изображений на экране.
3. Декодирует аудиопоток и отправляет звук на колонки.

Видеокодек это алгоритм, по которому кодируется видеопоток, он указывает, как сделать пункт 2 из списка выше. Слово «кодек» происходит от сочетания слов «кодер» и «декодер». Ваш видеоплеер декодирует видеопоток в зависимости от видеокодека, а затем отображает серию изображений или «кадров» на экране. Большинство современных видеокодеков использует всевозможные уловки для минимизации объёма информации, необходимого для отображения следующего кадра. Например, вместо хранения каждого отдельного кадра они будут хранить только различия между кадрами. Большинство видео на самом деле не изменяется целиком при переходе от одного кадра к другому, что позволяет хорошо сжимать данные, в результате получаются файлы меньшего размера.

Существуют видеокодеки с потерей данных и без потерь. Видео без потерь слишком большое, чтобы быть полезным в Интернете, поэтому я сконцентрируюсь на видео с потерями. Видеокодек с потерей означает, что информация во время кодирования безвозвратно утеряна. Это похоже на копирование аудиокассеты, вы теряете информацию об исходном видео и получаете ухудшения качества каждый раз, когда кодируете. Вместо «свиста» аудиокассеты пере-пере-перекодированное видео может выглядеть как набор блоков, особенно в сценах с движением. На самом деле это может произойти даже при кодировании из первоисточника, если вы выбрали плохой кодек или указали неверные параметры. Хорошей стороной видеокодеков с потерями является удивительное сглаживание блоков во время воспроизведения, что делает потери менее заметными для человеческого глаза.

Есть куча видеокодеков. Три наиболее подходящих это H.264, Theora и VP8.

H.264

H.264 также известен как «MPEG-4 Part 10» или «MPEG-4 AVC» или «MPEG-4 Advanced Video Coding». H.264 был разработан группой MPEG и стандартизирован в 2003 году. Целью разработки было создание единого кодека для устройств от сотовых телефонов до современных настольных компьютеров. Для этого в стандарте H.264 имеются профили, для каждого из которых определены дополнительные возможности влияющих на размер файла. Высшие профили используют несколько дополнительных функций, предлагают лучшее визуальное качество при меньших размерах файлов, но занимают больше времени для кодирования и требует больше ресурсов процессора для декодирования в реальном времени.

Чтобы дать вам примерное представление об ассортименте профилей, iPhone от Apple поддерживает профиль Baseline, приставка AppleTV поддерживает профили Baseline и Main, Adobe Flash на настольных компьютерах поддерживает профили Basic, Main и High. YouTube использует H.264 для кодирования видео высокого разрешения, воспроизводимого через Adobe Flash; YouTube также предоставляет H.264-кодированное видео на мобильные устройства, включая iPhone от Apple и телефоны с операционной системой Android. Кроме того, H.264 является одним из видеокодеков, предусмотренных спецификацией Blu-Ray. Диски Blu-Ray используют в основном профиль High.

Большинство некомпьютерных устройств воспроизводящих H.264-видео (включая iPhone и бытовые Blu-Ray-проигрыватели) декодируют с помощью специального чипа, поскольку их основные процессоры не настолько мощны, чтобы декодировать видео в режиме реального времени. В наши дни даже бюджетные видеокарты имеют аппаратную поддержку декодирования H.264. Есть конкурирующие с H.264 кодеки, включая библиотеку с открытым кодом x264. Стандарт H.264 основан на патенте, лицензирование происходит посредством группы MPEG LA. H.264 может быть вложен в наиболее популярные форматы видео, включая MP4 (используется в основном в магазине iTunes компании Apple) и MKV (используется в основном энтузиастами видео).

Theora

Theora эволюционировал из кодека VP3 и был разработан Xiph.org Foundation. Theora — свободный от отчисления кодек и не связан никакими известными патентами кроме оригинальных VP3-патентов, которые были лицензированы безвозмездно. Хотя стандарт был «заморожен» с 2004 года, проект Theora (включающий в себя кодер с открытым исходным кодом и декодер) выпустил версию 1.0 в ноябре 2008 года и версию 1.1 в сентябре 2009 года.

Видео Theora может быть встроено в любой формат файла, хотя чаще всего встречается в контейнере Ogg. Все основные дистрибутивы Linux поддерживают Theora из коробки, Mozilla Firefox 3.5 включает в себя встроенную поддержку видео Theora в контейнере Ogg. Вы также можете воспроизводить видео Theora в Windows или в Mac OS X после установки открытого программного обеспечения Xiph.org.

VP8

VP8 другой видеокодек от On2, той же компании, что первоначально разработала VP3 (позднее Theora). Технически по качеству он похож на базовый H.264 с большим потенциалом для будущих улучшений.

В 2010 году Google приобрел On2 и опубликовал спецификацию кодека и примеры как открытое программное обеспечение. В рамках этого Google также «открыл» все патенты, которые On2 зарегистрировала на VP8 и сделал их свободными от отчислений. Это лучшее, на что можно надеяться с патентами. Вы не можете на самом деле «освободить» их или свести на нет после того как они были выпущены. Чтобы сделать их открытыми для пользователей у вас должна быть лицензия без отчислений, после чего каждый может использовать технологию, ничего не платя и без заключения лицензионного соглашения. По состоянию на 19 мая 2010 года, VP8 является свободным от отчислений, современным кодеком не связанным никакими известными патентами кроме тех патентов, что On2 (в настоящее время Google) уже лицензировали безвозмездно.

Аудиокодеки

Если вы собираетесь смотреть фильмы, снятые после 1927 года, то захотите звуковую дорожку. Подобно видеокодеку, аудиокодек это алгоритм, согласно которому кодируется аудиопоток. Подобно видеокодеку они делятся на аудиокодеки с потерями и без. И аналогично видео без потерь, аудио без потерь слишком большое, чтобы выкладывать его в Интернет. Так что я сконцентрируюсь на аудиокодеках с потерями.

На самом деле, их не так и много, потому что есть разные категории кодеков с потерями. Аудио используется в тех местах, где нет видео (телефония, например), также существует категория аудиокодеков оптимизированных для кодирования речи. Вам не удалось бы конвертировать музыкальный компакт-диск с этими кодеками, поскольку результат бы звучал как пение четырехлетнего ребенка. Но вы должны использовать их в Asterisk, потому что ширина канала важна, а эти кодеки позволяют сжимать человеческую речь в разы по отношению к кодекам общего назначения. Тем не менее, из-за отсутствия поддержки в браузерах и сторонних плагинах, кодеки для оптимизации речи в реальности не используются в Интернете. Так что я сконцентрируюсь на общих аудиокодеках.

Как я уже упоминал выше, когда вы «смотрите видео», компьютер делает, по крайней мере, три вещи одновременно:

• интерпретирует формат контейнера;
• декодирует видеопоток;
• декодирует аудиопоток и направляет звук в колонки.

Аудиокодек отвечает за пункт 3 — декодирование аудиопотока и его преобразование в цифровые сигналы, которые динамики затем превращают в звук. Как и у видеокодеков имеются разные уловки для уменьшения объёма информации хранящейся в звуковом потоке.

И так как мы говорим о кодеках с потерями, информация теряется во время цикла запись → кодирование → декодирование → прослушивание. Различные аудиокодеки отбрасывают разные вещи, но у них всех одна цель: обмануть ваши уши — сделать так, чтобы вы не замечали пропавших частей.

Отличие аудио от видео в каналах. Мы отправляем звук на колонки, так? Ну, как много у вас колонок? Если вы сидите за компьютером, то скорее у вас их только две: одна слева и одна справа. На моем столе три: слева, справа и еще одна на полу. Системы, называемые «звук вокруг», могут содержать шесть и более динамиков, стратегически расположенных по всей комнате. Каждый динамик получает свой канал исходной записи. В теории вы можете сидеть в середине шести динамиков, буквально окруженный шестью раздельными каналами звука и ваш мозг будет вызывать чувство, что вы находитесь в центре событий. Это возможно? Индустрия за несколько миллиардов долларов думает что да.

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

Есть много аудиокодеков. Я уже говорил, что видеокодеков много? Забудьте. Есть уйма и уйма аудиокодеков, но в Интернете вам надо знать только об MP3, AAC и Vorbis.

MPEG-1 Audio Layer 3

MPEG-1 Audio Layer 3 известен как «MP3». Если вы ничего не слышали об MP3, то я не знаю что с вами делать. Интернет-магазины продают портативные музыкальные плееры и называют их «MP3-плееры». Вот так.

MP3 может содержать до двух каналов звука, которые могут быть закодированы с различным битрейтом: 64 кбит/с, 128 кбит/с, 192 кбит/с и множество других от 32 до 320. Более высокий битрейт означает больший размер файлов и лучшее качество звука, хотя отношение битрейта к качеству звука не является линейным. 128 кбит/с звучит более чем в два раза лучше, чем 64 кбит/с, но 256 кбит/с не звучит в два раза лучше, чем 128 кбит/с. Кроме того, формат MP3 позволяет делать переменный битрейт, это означает что некоторые части кодированного потока сжаты больше других. Например, тишина может быть закодирована с низким битрейтом, затем мгновение спустя битрейт может подскочить, когда начнут играть несколько инструментов. MP3 также может быть закодирован с постоянным битрейтом.

Стандарт MP3 не определяет как именно кодировать MP3 (хотя он точно определяет как его декодировать), различные кодировщики используют разные психоакустические модели, которые дают широкий разброс результатов. Открытый проект LAME это лучший бесплатный кодировщик, за исключением самых низких битрейтов.

Формат MP3 (стандартизован в 1991) запатентован, что объясняет, почему Linux при установке из коробки не может проигрывать MP3-файлы. Почти каждый портативный музыкальный плеер поддерживает стандартные файлы MP3, аудиопоток в MP3 может быть встроен в любой видеоконтейнер. Adobe Flash может играть и стандартные файлы MP3 и аудиопотоки MP3 в контейнере MP4-видео.

Advanced Audio Coding

Advanced Audio Coding более известен как «AAC». Стандартизированный в 1997 году, он стал известным, когда Apple выбрал его в качестве основного формата для магазина iTunes.

Первоначально все AAC-файлы из магазина iTunes были зашифрованы фирменной DRM- схемой от Apple называемой FairPlay. Избранные песни в iTunes теперь доступны как незащищённые AAC-файлы, их Apple называет «iTunes Плюс», потому что это звучит гораздо лучше, чем название «iTunes минус». Формат AAC запатентован, лицензионное соглашение доступно в Интернете.

AAC был разработан, чтобы обеспечить лучшее качество звука чем MP3 при том же битрейте, и он может кодировать аудио в любой битрейт. MP3 ограничен фиксированным числом битрейтом с верхней границей 320 кбит/с. AAC может кодировать до 48 каналов звука, хотя на практике этого никто не делает. Формат AAC также отличается от MP3 заданием нескольких профилей, пойдя тем же путем что и H.264. Профиль «low-complexity» предназначен для воспроизведения в реальном времени на устройствах с ограниченной мощностью процессора, в то время как более сложные профили предлагают лучшее качество звука при том же битрейте за счёт более медленного кодирования и декодирования.

Все современные продукты Apple, включая iPod, AppleTV, QuickTime поддерживают определенные профили AAC в стандартных аудиофайлах и аудиопотоках в видеоконтейнере MP4. Adobe Flash поддерживает все профили в формате AAC в MP4.

Vorbis

Vorbis часто называют «Ogg Vorbis» хотя это технически неверно — «Ogg» это формат контейнера, а Vorbis аудиопоток, который может быть встроен в другие контейнеры. Vorbis не обременён никакими известными патентами и, следовательно, поддерживается всеми основными дистрибутивами Linux и портативными устройствами. Mozilla Firefox 3.5 поддерживает Vorbis-аудио в контейнере Ogg или Ogg-видео с аудиодорожкой Vorbis. Мобильные телефоны на Android также могут воспроизводить стандартные аудиофайлы Vorbis. Аудиопоток Vorbis, как правило, встроен в контейнер Ogg или WebM, но он также может быть встроен в контейнер MP4 или MKV (а также с некоторыми хитростями в AVI). Vorbis поддерживает произвольное количество звуковых каналов.

Существуют свободные кодеры и декодеры Vorbis, в том числе OggConvert (кодер), FFmpeg (декодер), aoTuV (кодер) и libvorbis (декодер). Есть также компоненты QuickTime для Mac OS X и фильтры DirectShow для Windows.

Что работает на странице

Если ваши глаза ещё окончательно не выпали, они у вас лучше, чем у большинства других. Как вы могли заметить, видео (и аудио) сложная тема, а ведь это ещё был сокращённый вариант! Я уверен, вам интересно как это всё относится к HTML5. Итак, HTML5 включает элемент <video> для встраивания видео на веб-страницу. Нет никаких ограничений на видеокодек, аудиокодек или формат файла, которые вы можете использовать для вашего видео. Один элемент <video> может содержать ссылки на несколько файлов, браузер же выберет первый файл, который он сможет воспроизвести. Это способ узнать, как браузеры поддерживают разные контейнеры и кодеки.

На момент написания статьи распространено следующее HTML5-видео.

• Mozilla Firefox 3.5+ поддерживает видео Theora и аудио Vorbis в контейнере Ogg. Firefox 4+ также поддерживает WebM.
• Opera 10.5+ поддерживает видео Theora и аудио Vorbis в контейнере Ogg. Opera 10.60+ также поддерживает WebM.
• Google Chrome 3.0+ поддерживает видео Theora и аудио Vorbis в контейнере Ogg. Он также поддерживает видео H.264 (все профили) и аудио AAC (все профили) в контейнере MP4. Google Chrome 6.0+ также поддерживает WebM.
• Safari на Маках и Windows (3.0 и выше) будет поддерживать всё, что поддерживает QuickTime. В теории вы могли бы потребовать, чтобы пользователи установили плагин QuickTime. В действительности лишь немногие пользователи это сделают. Так что остаются форматы, которые QuickTime поддерживает «из коробки». Это длинный список, но он не включает WebM, Theora, Vorbis или контейнер Ogg. Однако QuickTime поддерживает видео H.264 (основной профиль) и аудио AAC в контейнере MP4.
• Мобильные телефоны вроде iPhone от Apple и на базе Google Android поддерживают видео H.264 (базовый профиль) и аудио AAC (профиль «low-complexity») в контейнере MP4.
•  Adobe Flash (9.0.60.184 и выше) поддерживает видео H.264 (все профили) и аудио AAC (все профили) в контейнере MP4.
• Internet Explorer 9+ поддерживает все профили видео H.264 и аудио AAC или MP3 в контейнере MP4. Он также будет воспроизводить WebM, если вы установите сторонний кодек, который отсутствует по умолчанию в любой версии Windows. IE не поддерживает другие сторонние кодеки (в отличие от Safari, который воспроизводит всё, что понимает QuickTime).
• Internet Explorer 8 не поддерживает HTML5-видео вообще, но практически у всех пользователей Internet Explorer установлен плагин Adobe Flash. Далее в этой главе я покажу вам, как вы можете использовать HTML5-видео и изящно обратиться к Flash.
  

Нагляднее представить всё в виде таблицы.

* Internet Explorer 9 будет поддерживать WebM, только если пользователь установил VP8 кодек.

† Safari воспроизводит всё, что может играть QuickTime, но он работает только со встроенной комбинацией H.264/AAC/MP4.

А теперь удар нокаутом.

Для обеспечения максимальной совместимости рабочий процесс с вашим видео будет следующим.

• Сделать одну версию с помощью WebM (VP8 + Vorbis).
• Сделать ещё одну версию, которая использует видео с базовым профилем H.264 и аудио AAC с профилем «low-complexity» в контейнере MP4.
• Сделать ещё одну версию, которая использует видео Theora и аудио Vorbis в контейнере Ogg. WebM и H.264 имеют достаточную поддержку. Так что если вы не собираетесь поддерживать Firefox 3.5 или Opera 10.5, можно отбросить Theora.
• В одном элементе <video> поставить ссылку на все три видеофайла и предусмотреть откат к плееру на Flash.

Вопросы лицензирования видео H.264

Прежде чем мы продолжим, я должен отметить, что стоимость кодирования видео оплачивается два раза. Так, есть очевидная стоимость, когда вы хотите кодировать видео дважды, тогда требуется больше компьютеров и времени, чем для одного раза. Но есть и другая стоимость связанная с видео H.264 — это затраты на лицензирование.

Помните, когда я впервые объяснял про H.264 я заикался, что видеокодек запатентован и лицензируется при посредничестве консорциума MPEG LA. Это важное отклонение, для понимания этой важности я направляю вас на The H.264 Licensing Labyrinth.

MPEG LA разделяет лицензию H.264 на две сублицензии: одну для производителей кодеров или декодеров, а другую для поставщиков...

Сублицензия для поставщиков разделяется на четыре основных подкатегории, две из которых (подписка и платное использование) связаны с тем, что конечный пользователь непосредственно платит за видео сервисы, а ещё две («бесплатное» телевидение и интернет-трансляция) связаны с вознаграждением из других источников, а не от зрителя...

Лицензионный сбор за «свободное» телевидение основан на одном из двух вариантов платежа. Первый это одноразовый платеж в размере $2500 за кодировщика передачи «используемый от имени лицензиата в передаче видео конечному пользователю», который будет декодировать и просматривать видео. Если вам интересно, является ли это двойной платой, ответ да: лицензионный сбор уже внесён в кодирующее устройство производителя, а телекомпании, в свою очередь платят один из двух вариантов роялти.

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

• $2500 за один календарный год трансляции при аудитории 100.000–499.999 человек.
• $5.000 за календарный год трансляции при аудитории 500.000–999.999 человек.
• $10.000 за один календарный год трансляции при аудитории 1.000.000 человек и более.

Как я упоминал ранее, плата за участие применяется к любому способу доставки контента. После определения, что «свободное» телевидение означает больше, чем обычное (по воздуху), MPEG LA установил частичную плату за интернет-вещание, так как «видео, которое поставляется через Интернет по всему миру, не оплачивается конечным пользователем за право на передачу или просмотр». Другими словами, любое вещание, является ли оно обычным, кабельным, спутниковым или через Интернет подлежит оплате...

Сборы потенциально несколько выше для интернет-трансляций, предполагая, что доступ через Интернет будет расти гораздо быстрее, чем традиционное или «свободное» телевидение, такое как кабельное или спутниковое. Добавляя «бесплатное телевидение» в рынок вещания вместе с дополнительной оплатой, MPEG LA гарантирует отсрочку в течение первого срока лицензии, который заканчивается 31 декабря 2010 года, и отмечает, что «после первого срока роялти должен быть не более, чем экономический эквивалент лицензионного платежа в течение того же времени для свободного телевидения.

В последнюю часть — о структуре платы для интернет-трансляций — уже были внесены поправки. MPEG-LA недавно объявила, что для потокового вещания не потребуется отчислений. Это не означает что H.264 является безвозмездным для всех пользователей. В частности, кодеры (подобные тому, что обрабатывает видео, выложенное на YouTube) и декодеры (как включенный в браузер Google Chrome) все ещё являются предметом лицензионных сборов. Смотрите Free as in smokescreen для получения дополнительной информации.

Наконец, разметка

Я вполне уверен, что это должна быть книга по HTML. Тогда где разметка?

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

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

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

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

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

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

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

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

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

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

var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
  var elmVideo = arVideos[i];
  elmVideo.autoplay = false;
}

Но подождите секунду... Если вы следовали этой главе, то у вас есть не один видеофайл, а три. Один это OGV-файл, второй MP4-файл, третий WebM-файл. 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>. Каждый элемент <source> ссылается на отдельный видеофайл (с атрибутом src), а также даёт информацию о видеоформате (в атрибуте type).

Тип атрибута выглядит сложным, адски сложным. Это комбинация из трёх блоков информации: формат файла, видеокодек и аудиокодек. Давайте начнём с самого последнего. Для видеофайла .ogv формат контейнера — Ogg, представленный здесь как video/ogg, строго говоря, это MIME-тип для видеофайлов Ogg. Видеокодек Theora и аудиокодек Vorbis. Это достаточно просто, кроме формата значение атрибута, он немного странный. Само значение должно быть заключено в кавычки, поэтому вы должны использовать различные виды кавычек, чтобы окружить значение целиком.

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

С WebM почти так же, но с другим MIME-типом (video/webm вместо video/ogg) и другим видеокодеком (vp8 вместо theora) написанным в параметре codecs.

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

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

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

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

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

MIME-типы поднимают свою уродливую голову

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

Я уже упоминал про MIME-типы ранее, но вы, вероятно, прозевали и не оценили их значение. Так вот большими буквами.

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

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

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

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

Для суровых подробностей по настройке веб-сервера, я обращаю ваше внимание на эту прекрасную статью в Mozilla Developer Center: Configuring servers for Ogg media. Советы в этой статье также относятся к видео MP4 и WebM.

Что насчет IE?

Internet Explorer 9 поддерживает элемент <video>, но Microsoft публично пообещал, что финальная версия IE 9 будет поддерживать видео H.264 и аудио AAC в формате контейнера MPEG-4, как Safari и iPhone.

Но как насчёт более старых версий Internet Explorer до IE8 включительно? У большинства людей, которые используют Internet Explorer также установлен плагин Adobe Flash. Современные версии Adobe Flash (начиная с 9.0.60.184) поддерживают видео H.264 и аудио AAC в формате контейнера MPEG-4, как Safari и iPhone. После того как вы кодировали видео H.264 для Safari, вы можете проиграть его во Flash-плеере, если обнаружится что у одного из посетителей не HTML5-браузер.

Flash-видеоплеер FlowPlayer это программа с открытым кодом по GPL-лицензии (коммерческая лицензия также доступна). FlowPlayer ничего не знает об элементе <video>, он не будет волшебным образом преобразовывать тег <video> во Flash-объект. Но HTML5 хорошо продуман, чтобы обойти эту проблему, поэтому вы можете вложить элемент <object> внутрь <video>. Браузеры, которые не поддерживают HTML5-видео, будут игнорировать элемент <video> и просто отображать вложенный <object> который ссылается на плагин Flash и показывает кино через FlowPlayer. Браузеры, поддерживающие HTML5-видео, обнаружат источник видео, который они могут воспроизвести и проигнорируют вложенный элемент <object>.

Это последний ключ ко всей головоломке: HTML5 указывает, что все элементы (кроме <source>) внутри <video> должны игнорироваться. Это позволяет использовать HTML5-видео в новых браузерах и красиво откатить к Flash в старых браузерах, без каких-либо трюков с JavaScript. Вы можете почитать об этой технике здесь: Video For Everybody.

Проблемы с iPhone и iPad

iOS это операционная система Apple для iPhone, iPod Touche и iPad. iOS 3.2 имеет ряд проблем с HTML5-видео.

• iOS не распознает видео, если вставлен атрибут poster. Этот атрибут элемента <video> позволяет отображать произвольное изображение при загрузке видео или пока пользователь нажимает на кнопку «играть». Эта ошибка исправлена в iOS 4.0, но пройдёт какое-то время пока пользователи обновятся.
• Если у вас несколько элементов <source>, iOS признает лишь первый в списке. Устройства с iOS поддерживают только H.264 + AAC + MP4, это фактически означает, что вы всегда должны указывать MP4-файл в первую очередь. Эта ошибка также исправлена в iOS 4.0.

Проблемы с устройствами на базе Android

Android — это операционная система Google для разных телефонов и карманных устройств. Android (до версии 2.3) имеет ряд проблем с HTML5-видео.

• Атрибут type элемента <source> порядочно «смущает» Android. Единственный способ заставить его признать источник видео это по иронии судьбы вообще опустить атрибут type и убедиться, что имя вашего видеофайла H.264 + AAC + MP4 заканчивается расширением .mp4. Это, кажется, не влияет на способность любого другого браузера определять поддержку видео; при отсутствии атрибута type другие браузеры смотрят на расширение файла. Вы еще можете включить атрибут type для других источников видео, так как H.264 является единственным форматом видео, который поддерживается устройствами Android на данный момент.
• Атрибут controls не поддерживается и Android не будет отображать любые элементы управления для видео. Вам будет нужно обеспечить собственные элементы управления пользовательского интерфейса. Как минимум, вы должны сделать скрипт, который начинает проигрывать видео, когда пользователь на него нажимает.

И наконец, живой пример

В окончательном коде используется элемент <video>, вложенный элемент <object> для резервного Flash и небольшой скрипт для устройств на Android.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Видео</title>
  </head>
  <body>
    <video id="movie" width="400" height="320" preload controls>
      <source src="video/snowman.mp4">
      <source src="video/snowman.webm" type='video/webm; codecs="vp8, vorbis"'>
      <source src="video/snowman.ogv" type='video/ogg; codecs="theora, vorbis"'>
      <object id="flowplayer" type="application/x-shockwave-flash" 
                              width="400" height="320">
        <param name="movie" value="video/flowplayer-3.2.5.swf"> 
        <param name="flashvars" value='config={"clip":"video/snowman.mp4"}'>
        <p>Загрузить видео в <a href="video/snowman.mp4">MP4</a>, 
           <a href="video/snowman.ogv">OGG</a> или 
           <a href="video/snowman.webm">WebM</a></p>
      </object>    
    </video>
    <script>
      var v = document.getElementById("movie");
      v.onclick = function() {
        if (v.paused) {
          v.play();
        } else {
          v.pause();
        }
      };
    </script>
  </body>
</html>

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

Дальнейшее чтение

• HTML5: The <video> element
• Video for Everybody
• A gentle introduction to video encoding
• Theora 1.1 is released — what you need to know
• Configuring servers for Ogg media
• Encoding with the x264 codec
• Video type parameters
• Everything you need to know about HTML5 audio and video
• Making HTML5 video work on Android phones
• Internet Explorer 9 Guide for Developers: HTML5 video and audio elements

Создание своего управления для видео:

• VideoJS
• MediaElement.js
• Kaltura HTML5 Video & Media JavaScript Library