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

Оригинал: http://diveintohtml5.info/video.html

Перевод: Влад Мержевич

Любой, кто посещал 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.

Flash-видео, обычно с расширением flv. Для Flash-видео используется Adobe Flash, что не удивительно. До Flash 9.0.60.184 (по-другому Flash Player 9 Update 3) поддерживался только контейнер в формате Flash. Поздние версии также поддерживают контейнер 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-файлы на любой платформе.

WebM это новый формат контейнера, технически похожий на другой формат называемый Matroska. WebM был анонсирован в мае 2010 года и предназначен для использования исключительно с видеокодеком VP8 и аудиокодеком Vorbis. Встроенная поддержка без специальных плагинов имеется в браузерах Chromuim, Google Chrome, Mozilla Firefox и Opera. Компания Adobe объявила, что будущая версия Flash также будет поддерживать WebM-видео.

Audio Video Interleave, как правило, с расширением avi. Формат контейнера AVI был изобретен Майкрософт в то время, когда считалось удивительным, что компьютеры вообще могут проигрывать видео. Особенности последних форматов файлов вроде метаданных официально не поддерживаются. Также этот формат официально не поддерживает большинство используемых современных аудио и видеокодеков. Он является форматом по умолчанию для популярных кодировщиков вроде MEncoder.

Видеокодеки

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

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

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

Видеокодек это алгоритм, по которому кодируется видеопоток, он указывает, как сделать пункт 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 поддерживает Базовый и Основной профили (Main), Adobe Flash на настольных компьютерах поддерживает Базовый, Основной и Высший профиль (High). YouTube использует H.264 для кодирования видео высокого разрешения, воспроизводимого через Adobe Flash; YouTube также предоставляет H.264-кодированное видео на мобильные устройства, включая iPhone от Apple и телефоны с операционной системой Android. Кроме того, H.264 является одним из видеокодеков, предусмотренных спецификацией Blu-Ray. Диски Blu-Ray используют в основном Высший профиль.

Большинство некомпьютерных устройств воспроизводящих 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. 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 года, то захотите звуковую дорожку. Подобно видеокодеку, аудиокодек это алгоритм, по которому кодируется аудиопоток. Подобно видеокодеку они делятся на аудиокодеки с потерями и без. И аналогично видео без потерь, аудио без потерь слишком большое, чтобы выкладывать его в Интернет. Так что я сконцентрируюсь на аудиокодеках с потерями.

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

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

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

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

Все современные продукты 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.
• Опера (версии 10.5 и выше) поддерживает видео Theora и аудио Vorbis в контейнере Ogg. Опера 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 (профиль «низкая сложность») в контейнере MP4.
•  Adobe Flash (9.0.60.184 и выше) поддерживает видео H.264 (все профили) и аудио AAC (все профили) в контейнере MP4.
• Internet Explorer 9 будет поддерживать некоторые пока еще неопределенные профили видео H.264 и аудио AAC в контейнере MP4.
• Internet Explorer 8 не имеет поддержки HTML5-видео вообще, но практически у всех пользователей Internet Explorer установлен плагин Adobe Flash. Далее в этой главе я покажу вам, как вы можете использовать HTML5-видео и изящно обратиться к Flash.

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

Через год ситуация существенно изменится, поскольку WebM встроен в разные браузеры и пользователи обновят свои программы до новых версий.

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

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

‡ Google взял на себя обязательство поддержки WebM «в будущих версиях» Android, но конкретно никаких сроков не назвал.

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

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

• Сделать одну версию с помощью WebM (VP8 + Vorbis).
• Сделать еще одну версию, которая использует видео в базовом H.264 и аудио AAC с профилем «низкая сложность» в контейнере MP4.
• Сделать еще одну версию, которая использует видео Theora и аудио Vorbis в контейнере Ogg.
• В одном элементе <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 с профилем «низкая сложность» и все это внутри контейнера 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>, но Майкрософт публично пообещал, что окончательный вариант 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.2 включительно, последняя версия на момент написания) имеет ряд проблем с 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>

<!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 вы сможете смотреть это видео практически на любом устройстве и браузере.

источник: http://htmlbook.ru/html5/video