укажите какой элемент html 5 отвечает за воспроизведение видео
HTML5
Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.
Тег video HTML5
Элемент
В HTML5 добавили новый тег video, он отвечает за воспроизведение видеофайлов на веб-странице, причем для воспроизведения видеофайлов не нужны дополнительные плагины или кодеки сторонних производителей, поддержка видеофайлов уже включена в спецификацию HTML5.
Пример кода тега
Пример добавления видеофайла при помощи тега :
Странно, Safari почему то не видит тега видео.
Таблица поддержки браузерами видео кодеков и форматов
| БРАУЗЕР/КОДЕК | h.264 | ogg/vorbis | webm |
|---|---|---|---|
| Chrome 6+ | да | да | да |
| FireFox 3.6+ | нет | да | да |
| IE 9+ | да | нет | нет |
| Opera 10.60+ | нет | да | да |
| Safari 4+ | да | нет | нет |
DVDVideoSoft — бесплатная русскоязычная программа для конвертирования и редактирования аудио/видео файлов различных форматов.
Тема о том почему браузеры поддерживют только определённые форматы, раскрывается в статье Война браузеров продолжается…
Атрибуты тега
controls=»controls» — создает панель управления видеофайлом, по умолчанию атрибут отключён.
loop=»loop» — заного запускает видеофайл, после окончания его воспроизведения, по умолчанию атрибут отключён.
poster=»адрес» — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.
preload=»auto/metadata/ none » — загружает видеофайл в проигрыватель одновременно с загрузкой веб страницы, но не воспроизводит его, по умолчанию имеет значение none
Определения значений:
auto — загружает видеофайл,
metadata — загружает только служебную информацию, например: первый кадр, размеры видео, продолжительность воспроизведения и т.д.,
none — не загружает видеофайл.
Атрибут preload=» » не работает, если включен атрибут autoplay=» «
src=»http://html-5.ru/%D0%B0%D0%B4%D1%80%D0%B5%D1%81″ — указывает путь к видеофайлу.
В независимости от заданной ширины или высоты, видеофайл сохраняет пропорции показа видео.
HTML5 Video — от А до Я
Пишем код
video >
source src =»movie.mp4″ type =’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ />
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
video > >
Само собой есть и более простой вариант вставки видео:
Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.
Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
— url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)
И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source, для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.
Форматы видео
На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:
Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.
Chrome Frame
Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. (Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин.)
Назад к Flash
Шифруемся, или надо перекодировать видео
Плюшки
Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. (К сожалению опять без наглядных примеров, так что идем на сайт оригинала)
Video + HTML
Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay. В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру — «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload, который позволяет подгружать видео фоном. В итоге получаем нечто подобное:
video poster =»star.png» autoplay loop controls tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
video poster =»star.png» autoplay =»autoplay» loop =»loop» controls =»controls» tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
Video + JS
Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте W3.
Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:
В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.
Video + CSS
Тут практически без комментариев — видео как элемент веб-страницы воспринимает всевозможные css штуки — начиная от border, opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.
Video + canvas
HTML5 принес в этом мир еще одну мощную вещь — canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно — ничего.
Пример совместного использования canvas и video может быть следующим — получение скриншотов из проигрываемого видео. У canvas есть метод drawImage, позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video! А с помощью другого метода — toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:
Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь — WebGL.
Video + SVG
SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects. С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:
svg id =’image’ version =»1.1″ xmlns =»http://www.w3.org/2000/svg» >
defs >
filter id =»myblur» >
feGaussianBlur stdDeviation =»1″ />
filter >
defs >
svg >
style >
video < filter:url(#myblur); border: 2px solid red; >
style >
Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css.
Заключение
Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете (и на хабре — прим. пер.) выложена уже масса примеров (1, 2, 3, 4, 5, 6)
Радует то, что на достигнутом никто не собирается останавливаться и возможно в будущем нас ждет возможность работы с микрофоном и камерой и поддержка вещания.
Видео на сайте
Перевод: Влад Мержевич
Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не существовало стандартного способа сделать это, фактически, любое видео, что вы видели в Интернете, было добавлено через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он). Эти плагины достаточно хорошо интегрированы с браузером, поэтому вы могли даже не знать, что их используете. Но это до тех пор, пока не попытаетесь посмотреть видео на платформе без поддержки плагина.
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 9.0+ | 3.5+ | 3.0+ | 3.0+ | 10.5+ | 1.0+ | 2.0+ |
Поддержка в действительности лишь малая часть проблемы. Прежде, чем мы поговорим об 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 также известен как «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 другой видеокодек от 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 включает элемент для встраивания видео на веб-страницу. Нет никаких ограничений на видеокодек, аудиокодек или формат файла, которые вы можете использовать для вашего видео. Один элемент может содержать ссылки на несколько файлов, браузер же выберет первый файл, который он сможет воспроизвести. Это способ узнать, как браузеры поддерживают разные контейнеры и кодеки.
На момент написания статьи распространено следующее HTML5-видео.
Нагляднее представить все в виде таблицы.
| Кодек/контейнер | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| Theora+Vorbis+Ogg | – | 3.5+ | † | 5.0+ | 10.5+ | – | – |
| H.264+AAC+MP4 | – | – | 3.0+ | 5.0+ | – | 3.0+ | 2.0+ |
| WebM | – | – | † | 6.0+ | 10.6+ | – | – |
Через год ситуация существенно изменится, поскольку WebM встроен в разные браузеры и пользователи обновят свои программы до новых версий.
| Кодек/контейнер | IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| Theora+Vorbis+Ogg | – | 3.5+ | † | 5.0+ | 10.5+ | – | – |
| H.264+AAC+MP4 | 9.0+ | – | 3.0+ | 5.0+ | – | 3.0+ | 2.0+ |
| WebM | 9.0+* | 4.0+ | † | 6.0+ | 10.6+ | – | ‡ |
* Internet Explorer 9 будет поддерживать WebM только если пользователь установил VP8 кодек.
† Safari воспроизводит все, что может играть QuickTime, но он работает только со встроенной комбинацией H.264/AAC/MP4.
‡ Google взял на себя обязательство поддержки WebM «в будущих версиях» Android, но конкретно никаких сроков не назвал.
Профессор Маркап говорит
Нет единой комбинации контейнеров и кодеков, которая работает во всех HTML5-браузерах. И эта ситуация вряд ли изменится в ближайшем будущем.
Чтобы ваше видео можно было смотреть на всех устройствах и платформах, придется кодировать видео несколько раз.
Для обеспечения максимальной совместимости рабочий процесс с вашим видео будет следующим.
Вопросы лицензирования видео H.264
Прежде чем мы продолжим, я должен отметить, что стоимость кодирования видео оплачивается дважды. Так, есть очевидная стоимость, когда вы хотите кодировать видео дважды, тогда требуется больше компьютеров и времени, чем для одного раза. Но есть и другая стоимость связанная с видео H.264 — это затраты на лицензирование.
MPEG LA разделяет лицензию H.264 на две сублицензии: одну для производителей кодеров или декодеров, а другую для поставщиков.
Сублицензия для поставщиков разделяется на четыре основных подкатегории, две из которых (подписка и платное использование) связаны с тем, что конечный пользователь непосредственно платит за видео сервисы, а еще две («бесплатное» телевидение и интернет-трансляция) связаны с вознаграждением из других источников, а не от зрителя.
Второй лицензионный платеж это плата за ежегодное вещание, которая зависит от размеров аудитории:
Как я упоминал ранее, плата за участие применяется к любому способу доставки контента. После определения, что «свободное» телевидение означает больше, чем обычное (по воздуху), MPEG LA установил частичную плату за интернет-вещание, так как «видео, которое поставляется через Интернет по всему миру, не оплачивается конечным пользователем за право на передачу или просмотр». Другими словами, любое вещание, является ли оно обычным, кабельным, спутниковым или через Интернет подлежит оплате.
Сборы потенциально несколько выше для интернет-трансляций, предполагая, что доступ через Интернет будет расти гораздо быстрее, чем традиционное или «свободное» телевидение, такое как кабельное или спутниковое. Добавляя «бесплатное телевидение» в рынок вещания вместе с дополнительной оплатой, MPEG LA гарантирует отсрочку в течение первого срока лицензии, который заканчивается 31 декабря 2010 года, и отмечает, что «после первого срока роялти должен быть не более, чем экономический эквивалент лицензионного платежа в течение того же времени для свободного телевидения.
В последнюю часть — о структуре платы для интернет-трансляций — уже были внесены поправки. MPEG-LA недавно объявила, что для потокового вещания не потребуется отчислений. Это не означает что H.264 является безвозмездным для всех пользователей. В частности, кодеры (подобные тому, что обрабатывает видео, выложенное на YouTube) и декодеры (как включенный в браузер Google Chrome) все еще являются предметом лицензионных сборов. Смотрите Free as in smokescreen для получения дополнительной информации.
Наконец разметка
Я вполне уверен, что это должна быть книга по HTML. Тогда где разметка?
Вот пример видео, которое начинает загрузку (но не воспроизведение), как только загрузится страница.
А вот пример видео, которое не будет загружаться при загрузке страницы.
Вот пример видео, которое начнет загружаться и играть сразу же после загрузки страницы.
А вот скрипт Greasemonkey, который можно установить в вашей локальной копии Firefox для предотвращения автоматического воспроизведения HTML5-видео. Он использует DOM-атрибут autoplay определенный в HTML5 и эквивалентный атрибуту autoplay в коде HTML.
source src=»http://htmlbook.ru/html5/pr6.mp4″ type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘>
source src=»http://htmlbook.ru/html5/pr6.webm» type=’video/webm; codecs=»vp8, vorbis»‘>
source src=»http://htmlbook.ru/html5/pr6.ogv» type=’video/ogg; codecs=»theora, vorbis»‘>
type=’video/ogg; codecs=»theora, vorbis»‘ >
type=’video/webm; codecs=»vp8, vorbis»‘ >
type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ >
Преимуществом всех этих сложностей является то, что браузер проверяет атрибут type первым и смотрит, может ли он воспроизвести видеофайл. Если браузер решает, что он не может этого сделать, то не будет скачивать файл даже частично. Вы сэкономите на пропускной способности, а ваши посетители увидят видео, за которым они пришли, быстрее.
Если вы будете следовать инструкциям этой главы при кодировании видео, то можете просто скопировать и вставить значения атрибута type из примеров. В противном случае, вам нужно выработать параметры type для себя.
Профессор Маркап говорит
На момент написания (20 мая 2010 года), iPad содержит ошибку, из-за которой он не замечает ничего, кроме первого источника видео в списке. К сожалению, это означает, что вы должны указать ваш MP4-файл первым, а затем остальные видеоформаты. Эх.
MIME-типы
Неправильно настроенный веб-сервер может привести к бесконечным разочарованиям, почему это ваши видео идут на локальном компьютере, но не воспроизводятся на рабочем сайте. Если вы столкнулись с этой проблемой, то причина вероятнее всего в MIME-типах.
Я уже упоминал про MIME-типы ранее, но вы, вероятно, прозевали и не оценили их значение. Так вот большими буквами.
Профессор Маркап говорит
ВИДЕОФАЙЛЫ ДОЛЖНЫ БЫТЬ СОПОСТАВЛЕНЫ С СООТВЕТСТВУЮЩИМ MIME-ТИПОМ!
Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.
Для суровых подробностей по настройке веб-сервера, я обращаю ваше внимание на эту прекрасную статью в Mozilla Developer Center: Configuring servers for Ogg media. Советы в этой статье также относятся к видео MP4 и WebM.
Что насчет IE?
Но как насчет более старых версий 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-браузер.