Формат видео html5 – Как сделать собственный видео-плеер на HTML5 Video / Microsoft corporate blog / Habr

Leave a Comment / Html / By /

Поддерживаемые форматы аудио и видео

333 175

Веб-программирование — HTML5 — Поддерживаемые форматы аудио и видео

В рассмотренных ранее примерах использовались два популярных стандарта: MP3 для аудио и H.264 для видео. Этого достаточно для Chrome и Safari, но не для других браузеров.

По поводу войны мультимедийных форматов для HTML5 у веб-разработчиков имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео HTML5 находятся в состоянии безнадежной конфронтации и на ком лежит главная вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого разработчика браузеров есть свои оправдания и объяснения, каким стандартам мультимедиа отдать предпочтение.

Небольшие разработчики, такие как Mozilla, создатели браузера Firefox и разработчики Opera, не желают платить непомерно высокую для них цену за лицензию на использование таких популярных стандартов, как MP3 для аудио или H.264 для видео (хотя поддержка этих стандартов включена в версии Firefox 24 и выше, после солидного спонсирования от Google ;). И их трудно винить за это, ведь они предоставляют свои продукты бесплатно.

У компаний покрупнее (таких как Microsoft, Google или Apple) имеются свои оправдания почему надо избегать нелицензированных стандартов. Они жалуются, что качество работы этих стандартов будет ниже (в настоящее время они не поддерживают аппаратное ускорение) и что они не так широко используются, как запатентованные стандарты, такие как, например, H.264, который используется в камкордерах, проигрывателях Blu-Ray и во многих других разных устройствах.

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

Знакомимся с форматами

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

Формат Описание Расширение файла MIME тип
MP3 Самый популярный аудиоформат в мире. Но стоимость лицензии делает его непрактичным для небольших разработчиков, наподобие Opera mp3 audio/mp3
Ogg Vorbis Открытый, бесплатный стандарт, предоставляющий высококачественное сжатое аудио, сравнимое с MP3 ogg audio/ogg
WAV Первоначальный формат для сырого цифрового аудио. Не использует сжатие, поэтому файлы невероятно большого объема и непригодны для большинства интернет-приложений wav audio/wav
H.264 Промышленный стандарт для кодирования видео, особенно при работе с видео высокой четкости. Применяется в бытовых устройствах (таких как проигрыватели и камкордеры Blu-Ray), на видеообменных сайтах (таких как YouTube и Vimeo) и в браузерных модулях расширения (таких как Flash и Silverlight) mp4 video/mp4
Ogg Theora Открытый, бесплатный стандарт для видео, созданный разработчиками аудиостандарта Vorbis. Качество и производительность ниже стандарта H.264, но достаточно высокие, чтобы удовлетворить потребности большинства пользователей ogv video/ogg
WebM Новейший бесплатный видеоформат, созданный Google на основе приобретенного ими VP8. Критики доказывают, что его качество еще не на уровне видео H.264 и он может содержать скрытые связи с другими патентами, что может вызвать лавину судебных исков в будущем. Тем не менее, WebM является наилучшим выбором для будущего открытого видео webm video/webm

В этой таблице также указаны рекомендуемые расширения файлов для мультимедиа. Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла в действительности применяются три разных стандарта. Первым, наиболее очевидным, стандартом является видеокодек, применяемый для сжатия видео в поток данных. В качестве примера можно назвать такие кодеки, как H.264, Theora и WebM.

Вторым является аудиокодек, который применяется для сжатия одной или нескольких аудиодорожек. Например, для видео в формате H.264 обычно используется звук в формате MP3, а для видео Theora — звук Vorbis. Наконец, формат контейнера применяется для упаковки видео и аудио вместе с описательной информацией и, необязательно, другими безделушками типа изображений и субтитров. Часто расширение файла обозначает формат контейнера, т.е. расширение mp4 означает контейнер типа MPEG-4, расширение ogv — контейнер Ogg и т.п.

Но не все так просто, т.к. формат контейнера поддерживает несколько разных аудио- и видеостандартов. Например, популярный контейнер Matroska (mkv) может содержать видео в формат

HTML5 video — Википедия

HTML5 video — элемент, включённый в проект спецификации HTML 5, который используется для воспроизведения видеозаписей[1], частично заменяя элемент <object>.

Adobe Flash Player широко использовался для встраивания содержимого видео-файлов на сайтах (например, YouTube). Flash Player доступен в качестве плагина для большинства веб-браузеров последних версий (таких как Mozilla Firefox, SeaMonkey, Opera и Safari), и несовместим, например, со встроенными браузерами iPod и iPhone от Apple, а также с Android версии 2.01 или меньше и версии 4.1.x и выше (официально)

[2][3]. Google Chrome с некоторых пор содержит данный плагин по умолчанию[4]. Создатели HTML 5 video считают, что это станет стандартным способом просмотра видео онлайн, но основным препятствием для принятия данного соглашения является вопрос о том, какие именно видео форматы должны поддерживаться этим видео тегом.

Пример использования элемента <video>

Ниже приводится фрагмент кода на HTML 5, который позволяет встроить WebM видео на веб-сайт:

<video src="movie.webm" poster="movie.jpg" controls>
        This is fallback content to display if the browser
        does not support the video element.
</video>

Множественность ресурсов

Используя любое количество элементов

<source>, как показано ниже, браузер выберет автоматически, какой файл загружать. Также, чтобы добиться того же результата, можно использовать функцию canPlay() из JavaScript. Атрибут «type» определяет тип MIME и список кодеков, которые помогают браузеру определить, может ли он декодировать файл. Из-за отсутствия общего видеоформата множественность ресурсов является важной особенностью для того, чтобы избегать «фырканья» браузера, что склоняет его к ошибке: известно, что любые знания веб-разработчиков о браузерах будут неполными, браузер знает о себе больше.

<video poster="movie.jpg" controls>
        <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
        <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Поддерживаемые видеоформаты

Текущий проект спецификации HTML 5 не уточняет, какие форматы должны поддерживаться в теге

<video>. Пользовательские агенты имеют право поддерживать любой подходящий видеоформат.

Почему нельзя поддерживать те форматы, на которые есть системные кодеки?

Возникает вопрос: почему бы не поддерживать все форматы, на которые в системе есть кодек? Этому есть несколько причин.

  1. Это попытка «спихнуть» стандартизацию на пользователей. Они могут выработать стандарт де-факто, который на поверку окажется платным. Пострадают от этого разработчики свободного ПО, вебмастера мелких сайтов и владельцы карманных устройств с нетрадиционными ОС. Поскольку в мире нет единой культуры, в разных концах Земли стандартом могут стать разные форматы.
  2. На данный момент атаки (переполнение буфера и подобные) на системные кодеки малорезультативны: требуется скачать «отравленный» файл и запустить его вручную, к тому же может сработать антивирус, а маленький размер эксплойта вызовет подозрение. Как только проигрывание видео станет массовым и автоматическим, на системные кодеки — в том числе старые и слабо поддерживаемые — обрушатся такие атаки, что мало кто выдержит.
  3. Редкий формат видео с подписью «чтобы увидеть, установите кодек» — это возрождение надписи 90-х годов «чтобы увидеть, установите ActiveX-компонент». Веб-стандарты создаются не для этого: веб должен быть доступным всем, независимо от ОС и дополнительного ПО.

Дебаты насчёт стандартного видеоформата

Рабочая группа HTML 5 считает, что желательно определить по крайней мере один видеоформат, который бы поддерживался всеми браузерами. Идеальный формат в этом отношении должен:

  • иметь хорошее сжатие, хорошее разрешение изображения и низкие затраты работы процессора для расшифровки
  • быть бесплатным
  • в дополнение к программным декодерам, для формата должен существовать декодер для видео с аппаратных средств, так как у многих встроенных процессоров нет возможности расшифровать видео в нужный нам формат

Изначально, Ogg Theora был рекомендуемым стандартом для HTML 5, потому что он не был затронут никакими известными патентами. Но 10 декабря 2010 года спецификация HTML 5 была подкорректирована,

[5] изменились ссылки на конкретные форматы:

Браузеры должны поддерживать видеоформат Theora и аудиоформат Vorbis, а также контейнерный формат Ogg.

с дополнением[6]:

Было бы очень полезно для функциональной совместимости, если бы все браузеры смогли поддерживать один кодер-декодер. Но не существует ни одного такого кодер-декодера, который бы удовлетворял всех: нам нужен такой кодер-декодер, который, как известно, не требует лицензирования, который совместим с современной развивающейся моделью, который имеет достаточно качеств, чтобы быть пригодным, и который не станет подводным камнем для крупных компаний. Это текущая проблема, и эта часть будет ещё доработана.[7]

Хотя Theora не затронута известными патентами, такие компании как Apple (владелец некоторых патентов на H.264 и член MPEG LA)

[8] и Nokia[обновить данные] заявили, что опасаются неизвестных патентов, чьи собственники могли бы ждать корпорацию с финансовыми ресурсами, чтобы предъявить иск по использованию данного формата.[9][10] С несвободными кодеками H.264 и MP3 это тоже может случиться, но Apple уже использует их, и поэтому только использование Ogg было бы для неё дополнительным риском. Apple также возражает против требования о поддержке формата Ogg в HTML 5 на тех основаниях, что некоторым приспособлениям поддерживать другие форматы намного легче, и что HTML ни разу за всю историю его существования не требовал особые форматы для чего-либо.[10]

Некоторые веб-разработчики раскритиковали удаление Ogg-форматов из спецификации.[11][12][13] Последующее обсуждение также произошло и в FAQ блоге W3C.[14]

H.264/MPEG-4 AVC широко используем и обладает хорошей скоростью, сжатием, декодером для аппаратных средств, но он уже запатентован.[15] Кроме особых случаев, пользователям H.264 приходится платить за лицензию MPEG LA — группе патентодержателей, включая Apple и Microsoft.[16] В итоге упоминание кодер-декодера по умолчанию было убрано.

Google покупает On2

Приобретение компанией Google On2 Technologies происходит в результате выпуска формата VP8, который является бесплатным открытым стандартом, и создания WebM Project, который соединяет VP8 video с Vorbis audio в контейнер Matroska. Выпуск VP8 был также поддержан Free Software Foundation.[17]

В январе 2011 года Google объявил, что собирается прекратить поддержку H.264 в Chrome, многие критиковали это, включая Питера Брайта из Ars Technica[18] и «веб-проповедника» Тима Снита из Microsoft, которые заявили, что скорее эсперанто объявят официальным языком США, чем Google продвинется в этом деле.[19] Однако Говард Моен из Opera Software сильно раскритиковал статью Ars Technica[20], и Google ответила на реакцию, объяснив своё решение тем, что они намерены продвигать WebM в своих продуктах на основе их открытости.

Браузерная поддержка

Значения

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

ЗначениеОписание
Yesпоказывает, что разметка полностью поддерживает данное свойство/элемент, когда используются правильные значения
Noпоказывает, что свойство/элемент полностью игнорируется
Partialпоказывает, что свойство/элемент понято, но не все его значения поддерживаются. Поддерживаемые значения выполняются правильно.
Incorrectпоказывает, что свойство/элемент понято, но работает правильно не во всех случаях.
Experimentalпоказывает, что свойство/элемент понято, но поддерживается под другим именем. Может быть незавершённым или содержать ошибки
Droppedпоказывает, что свойство/элемент больше не поддерживается
Nightly buildпоказывает, что свойство/элемент поддерживается в некоторой степени в экспериментальной/ночной сборке. Ожидается поддержка в будущем.
Dependsпоказывает, что свойство/элемент поддерживается только на определённых платформах или если сконфигурированы определённые условия.

Таблица

В другом языковом разделе есть более полная статья HTML5 video#Browser_support (англ.).

Информация в этом разделе устарела.

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

Эта таблица показывает, какие видео-форматы вероятно будут поддерживаться указанным браузером. Большинство браузеров, представленных здесь, используют multimedia framework для раскодирования и отображения видео-файла, а не включают такие компоненты в программное обеспечение. Как правило, невозможно перечислить все форматы, которые поддерживает multimedia framework без их запроса, так как всё зависит от операционной системы и типа кодер-декодера.[21] В таких случаях поддерживаемый видео-формат является атрибутом для framework, а не для браузера или его разметки; браузер обязательно спрашивает свой multimedia framework, прежде чем отвергнуть неизвестный видео-формат. Видео-формат может быть определён с помощью MIME в HTML. (Смотри example) MIME используется для уточнения у multimedia frameworks о поддерживаемых форматах. [note 1]

Среди этих браузеров только Firefox, Opera и Origyn используют библиотеки для встроенного раскодирования. На деле Internet Explorer и Safari также могут обеспечивать поддержку определённых форматов, потому что их изготовители также сделали их multimedia frameworks. С другой стороны, Konqueror поддерживает те же форматы, что и Internet Explorer на Windows и Safari на Mac OS X, но указанная здесь поддержка для Konqueror типична для GNU/Linux, где Konqueror в основном и используется. В основном поддержка браузерами какого-либо формата навязана конфликтующими интересами производителей; в особенности Media Foundation и QuickTime поддерживают проприетарные стандарты, тогда как GStreamer и Phonon не могут законно ничего поддерживать, кроме свободных форматов на свободных операционных системах, для которых они созданы.

Использование

С апреля 2010 года вслед за запуском iPad от Apple несколько сайтов с высокой посещаемостью стали выдавать H.264 HTML 5 видео вместо Flash для браузеров, идентифицирующих себя как iPad.[56]

В мае 2010 года HTML 5 video ещё не так широко распространено, как Flash видео, хотя DailyMotion[57] недавно массово выпустил экспериментальные видео-плееры на основе HTML5 (использующие форматы Ogg Theora и Vorbis), YouTube[58] (использующий форматы H.264 и WebM) и Vimeo[59](использующий формат H.264) намекают, что интерес к приему HTML 5 видео увеличивается.

Некоторые крупные публикующие видео веб-сайты опубликовали решение продолжить использование технологий, отличающихся от HTML 5 video.[60][61][62] Согласно статье блога YouTube, тег <video> не удовлетворяет всем потребностям веб-сайтов, таких как YouTube.[63] В заявленные важные причины входит необходимость стандартного формата, отсутствие эффективного и надежного метода для передачи видео браузеру, неспособность JavaScript отображать видео на полный экран и проблема защиты содержимого. Хулу также не принял HTML 5 video из-за отсутствия функций для обеспечения пользователя адаптивным битрейтом для видео, «защиты» контента и предоставления рекламодателям данных.[64]Netflix заявил, что есть много проблем, которые мешают ему использовать HTML 5 video: приемлемые контейнерные A/V форматы; допустимые аудио и видео кодер-декодеры, потоковый протокол, метод для потокового протокола, чтобы адаптировать его к доступным диапазонам частот, метод для передачи информации о доступных потоках и другие параметры для модуля воспроизведения потока данных; метод поддержки защищенных данных; и метод отображения всей этой функциональности в HTML 5.[61][65]

11 января 2011 года Google’s Chromium Project объявил в своем блоге, что поддержка закрытых кодер-декодеров(например, H.264) будет удалена из будущих версий Chrome-а. В объявлении Chromium особенно выделялось то, что эта ликвидация была попыткой увеличить популярность использования HTML5 и тега <video> без необходимости лицензирования патентованных технологий, стимулируя всю сеть принять общедоступный кодер-декодер для VP8 и Theora.

Предложение добавить DRM

Внесённое в W3C предложение добавить в HTML5 API для DRM было встречено крайне негативно теми, кто считает одним из основных свойств веб-стандартов (англ.) типа HTML, и преимуществ их перед плагинами, открытость или отсутствие требований использования программного или аппаратного обеспечения от определённого поставщика (как на стороне клиента, так и на стороне сервера).[66][67][68][69]

В «живом стандарте HTML», развиваемом WHATWG, планов о добавлении DRM не появилось.[70]

В январе 2014 года к W3C присоединилась Американская ассоциация кинокомпаний (MPAA), поддерживавшая такие законопроекты как SOPA, который вызвал протесты в Интернете;[71] в W3C есть и другие сторонники ограничения работы пользовательских браузеров, букмарклетов и плагинов.[72]

Комментарии

Примечания

  1. ↑ The video element. HTML5: A vocabulary and associated APIs for HTML and XHTML. World Wide Web Consortium (24 Июня 2010 года). — «A video element is used for playing videos or movies.». Проверено 27 Сентября 2010 года. Архивировано 25 августа 2012 года.
  2. ↑ An Update on Flash Player and Android. Adobe Systems Inc.. Проверено 28 июня 2012. Архивировано 25 августа 2012 года.
  3. ↑ Adobe Flash on the Nexus 7 and other Jelly Bean Devices. xda-developers. Проверено 25 июля 2012. Архивировано 25 августа 2012 года.
  4. ↑ Adobe Flash Player : Basic browser settings – Google Chrome Help. Google Inc.. Проверено 9 июля 2011. Архивировано 25 августа 2012 года.
  5. ↑ Hickson, Ian [whatwg] Video codec requirements changed. Список рассылки whatwg mailing list (10 декабря 2007 года). Проверено 25 февраля 2008 года.
  6. ↑ (X)HTML5 Tracking. HTML5.org. Проверено 23 Июня 2009 года. Архивировано 25 августа 2012 года.
  7. ↑ [whatwg] Removal of Ogg is *preposterous*. Список рассылки WHATWG (11 декабря). Проверено 25 августа 2009 года.
  8. ↑ Steve Jobs: mystery patent pool to attack Ogg Theora. The Register. Проверено 9 июля 2011 года. Архивировано 25 августа 2012 года.
  9. ↑ Hickson, Ian Re: [whatwg] Removal of Ogg is *preposterous*. Список рассылки whatwg mailing list (11 декабря 2007 года). Проверено 25 Февраля 2008 года.
  10. ↑ 1 2 Stachowiak, Maciej [whatwg] Codecs (was Re: Apple Proposal for Timed Media Elements). Список рассылки whatwg mailing list (21 марта 2007 года). Проверено 25 Февраля 2008 года.
  11. ↑ The Attack Against Ogg Theora or: How I Learned to Stop Worrying and Love the Proprietary Web. Metavid (11 декабря 2007 года). Проверено 30 июня 2009 года. Архивировано 31 декабря 2008 года.
  12. ↑ rudd-o.com  (недоступная ссылка — история). rudd-o.com (11 декабря 2007 года). Проверено 30 июня 2009 года. Архивировано 13 декабря 2007 года.
  13. ↑ Abbadingo » Blog » Removal of Ogg Vorbis and Theora from HTML 5: an outrageous disaster. Delcorp.org (12 декабря 2007 года). Проверено 30 Июня 2009 года. Архивировано 25 августа 2012 года.
  14. ↑ Dan Connolly. When will HTML 5 support <video>? Sooner if you help. W3C (18 декабря 2007). Проверено 23 июня 2009. Архивировано 25 августа 2012 года.
  15. ↑ AVC/H.264 Patent List, MPEG LA, 1 Февраля 2010 года, <http://www.mpegla.com/main/programs/avc/Documents/avc-att1.pdf> 
  16. ↑ AVC/H.264 Licensors, MPEG LA, <http://www.mpegla.com/main/programs/AVC/Pages/Licensors.aspx> 
  17. ↑ Matt Lee. FSF gratulates google. FSF (19 мая 2010 года). Архивировано 25 августа 2012 года.
  18. ↑ Питер Брайт. Google’s dropping H.264 from Chrome a step backward for openness. Ars Technica (12 января 2011 года 12:30). Архивировано 25 августа 2012 года.
  19. ↑ Тим Снит. An Open Letter from the President of the United States of Google. MSDN (11 января 2011 года). Архивировано 25 августа 2012 года.
  20. ↑ Говард К. Моен. Is the removal of H.264 from Chrome a step backward for openness?. My Opera (13 января 2011 года 14:29). Архивировано 25 августа 2012 года.
  21. ↑ Phonon documentation of backends, Qt, <http://doc.qt.nokia.com/latest/phonon-overview.html#backends>. Проверено 3 Июня 2011 года. 
  22. ↑ Phonon documentation of querying, Qt, <http://doc.qt.nokia.com/latest/phonon-overview.html#querying-backends-for-support>. Проверено 3 июня 2011. 
  23. ↑ Kevin Carle and Chris Zacharias (20 Января 2010 года), Introducing YouTube HTML5 Supported Videos, Official YouTube Blog, <http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html>. Проверено 12 марта 2010. 
  24. ↑ Dougherty, Brad (21 Января 2010 года), Try our new HTML5 player!, Vimeo Staff Blog, <http://vimeo.com/blog:268>. Проверено 12 Марта 2010 года. 
  25. ↑ McCracken, Harry (16 Марта 2010 года), Microsoft Previews the Revamped Internet Explorer 9 Platform, Technologizer, <http://technologizer.com/2010/03/16/ie9-platform-preview/> 
  26. ↑ Mike Jazayeri. More about the Chrome HTML Video Codec Change. Google (14 Января 2011 года). Архивировано 3 октября 2012 года.
  27. ↑ Hachamovitch, Dean (19 Мая 2010 года), Another Follow-up on HTML5 Video in IE9, Microsoft, <http://blogs.msdn.com/ie/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx> 
  28. ↑ Hachamovitch, Dean (29 Апреля 2010 года), HTML5 Video, Microsoft, <http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx>. Проверено 5 Мая 2010 года. 
  29. ↑ Media formats supported by the audio and video elements, Mozilla, <https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements>. Проверено 21 августа 2011. 
  30. ↑ Mozilla Firefox 3.5 Release Notes, Mozilla, 2009-06-30, <http://www.mozilla.com/en-US/firefox/3.5/releasenotes/>. Проверено 15 Февраля 2010 года. 
  31. ↑ HTML5 Extension for Windows Media Player Firefox Plug-in, Microsoft Corporation, <http://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin>. Проверено 28 Января 2011 года. 
  32. ↑ Bug 566243 – Merge mozilla-webmedia repository to mozilla-central, Mozilla, <https://bugzilla.mozilla.org/show_bug.cgi?id=566243> 
  33. ↑ Firefox Nightly Builds, Mozilla, <http://nightly.mozilla.org/> 
  34. ↑ Google Chrome support Theora and Vorbis, Google, 2010-05-20, <http://code.google.com/p/chromium/ChromiumBrowserVsGoogleChrome> 
  35. ↑ Google Chrome 3.0 will support <video> tag, <http://www.cnetfrance.fr/news/google-chrome-3-39503164.htm> 
  36. ↑ Differences between Google Chrome and Linux distro Chromium, Google, 17 Марта 2011 года, <http://code.google.com/p/chromium/ChromiumBrowserVsGoogleChrome> 
  37. ↑ HTML Video Codec Support in Chrome, Google, 11 Января 2011 года, <http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html> 
  38. ↑ Bankoski, Jim (2010-05-19), WebM and VP8 land in Chromium, Google, <http://blog.chromium.org/2010/05/webm-and-vp8-land-in-chromium.html> 
  39. ↑ Kersey, Jason (3 Июня 2010 года), Google Chrome Releases: Dev Channel Update, Google, <http://googlechromereleases.blogspot.com/2010/06/dev-channel-update.html>. Проверено 1 Июля 2010 года. 
  40. ↑ 1 2 Issue 21318: Query FFmpeg libraries for codec support, Google, <http://code.google.com/p/chromium/issues/detail?id=21318>. Проверено 10 Сентября 2010 года. 
  41. ↑ Issue 4363: [HTML5-Video] Enable HTML5 video/audio elements, Google, <http://code.google.com/p/chromium/issues/detail?id=4363>. Проверено 10 сентября 2010. 
  42. ↑ ChromiumBrowserVsGoogleChrome, Google, <http://code.google.com/p/chromium/ChromiumBrowserVsGoogleChrome>. Проверено 10 Сентября 2010 года. 
  43. ↑ Issue 2093007: Chromium side changes for enabling VP8 and WebM support., Google, <http://codereview.chromium.org/2093007>. Проверено 10 Сентября 2010 года. 
  44. ↑ About the Safari 3.1 Update, 2008-03-17, <http://support.apple.com/kb/TA25197>. Проверено 15 февраля 2010. 
  45. ↑ Dalrymple, Jim (2009-03-10), Apple shows off Safari’s HTML 5 support, Macworld, <http://www.macworld.com/article/139285/2009/03/safarihtml5.html>. Проверено 13 марта 2010. 
  46. ↑ Google’s WebM plugin available, <https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&can=2&q=>. Проверено 23 июня 2011. 
  47. ↑ HTML5 Media Support, WebKit Open Source Project: Surfin’ Safari, 12 Ноября 2007 года, <http://webkit.org/blog/140/html5-media-support/>. Проверено 11 Марта 2010 года. 
  48. ↑ Jägenstedt, Philip (31 Декабря 2009 года), (re-)Introducing <video> — Official blog for Core developers at Opera, Opera, <http://my.opera.com/core/blog/2009/12/31/re-introducing-video>. Проверено 6 Февраля 2010 года. 
  49. ↑ Lie, Håkon Wium (19 Мая 2010 года), Welcome, WebM <video>!, Opera, <http://labs.opera.com/news/2010/05/19/>. Проверено 21 августа 2011. 
  50. ↑ Mills, Chris (19 Мая 2010 года), Opera supports the WebM video format, Opera, <http://dev.opera.com/articles/view/opera-supports-webm-video/> 
  51. ↑ Davison, Peter (2010-03-03), KHTML Browsers including Konqueror, Legend Scrolls, <http://www.legendscrolls.co.uk/webstandards/khtml>. Проверено 12 марта 2010.  (недоступная ссылка)
  52. ↑ Vestbø, Tor Arne (2008-05-13), Top Secret, Hush Hush!, Nokia Corporation, <http://labs.trolltech.com/blogs/2008/05/13/top-secret-hush-hush/>. Проверено 14 марта 2010. 
  53. ↑ webm troubleshooting for Konqueror, Xiph.org, <http://wiki.xiph.org/Playback_Troubleshooting#Konqueror>. Проверено 1 Июня 2011 года. 
  54. ↑ Toker, Alp (2007-12-08), HTML5 media support with GStreamer, <http://www.atoker.com/blog/2007/12/08/html5-media-support-with-gstreamer/>. Проверено 12 марта 2010. 
  55. ↑ YouTube and WebM support, Fedora Project, <http://fedoraproject.org/Flash#YouTube_and_WebM_support>. Проверено 1 июля 2010. 
  56. ↑ iPad-ready websites  (недоступная ссылка — история). Apple, Inc.. Проверено 5 Апреля 2010 года. Архивировано 1 марта 2011 года.
  57. ↑ Watch Video…without Flash  (недоступная ссылка — история). Dailymotion (27 Мая 2009 года). Проверено 18 Мая 2010 года. Архивировано 22 августа 2010 года.
  58. ↑ Introducing YouTube HTML5 Supported Videos. Youtube (20 Января 2010 года). Проверено 7 Марта 2010 года. Архивировано 25 августа 2012 года.
  59. ↑ Dougherty, Brad Try our new HTML5 player!. Vimeo (21 Января 2010 года). Проверено 7 Марта 2010 года. Архивировано 25 августа 2012 года.
  60. ↑ Gizmodo: HTML5 isn’t going to save the internet
  61. ↑ 1 2 Gigaom.com: Netflix has no plans to use HTML5 Архивировано 21 августа 2011 года.
  62. ↑ Pseudocoder: Why HTML5 won’t replace Flash Архивировано 11 августа 2011 года.
  63. ↑ Flash and the HTML5 <video> tag. Архивировано 25 августа 2012 года.
  64. ↑ Pardon Our Dust <video> tag. Архивировано 25 августа 2012 года.
  65. ↑ PCMag: Netflix working on HTML5 streaming
  66. ↑ Cory Doctorow. What I wish Tim Berners-Lee understood about DRM. Technology blog at guardian.co.uk (12 марта 2013). Проверено 20 марта 2013. Архивировано 6 апреля 2013 года.
  67. ↑ Glyn Moody. BBC Attacks the Open Web, GNU/Linux in Danger. Open Enterprise blog at ComputerworldUK.com (13 февраля 2013). Проверено 20 марта 2013. Архивировано 6 апреля 2013 года.
  68. ↑ Scott Gilbertson. DRM for the Web? Say It Ain’t So. Webmonkey. Condé Nast (12 февраля 2013). Проверено 21 марта 2013. Архивировано 6 апреля 2013 года.
  69. ↑ Tell W3C: We don’t want the Hollyweb (англ.). Defective by Design. Free Software Foundation (March 2013). Проверено 25 марта 2013. Архивировано 6 апреля 2013 года.
  70. ↑ Danny O’Brien. Lowering Your Standards: DRM and the Future of the W3C. Electronic Frontier Foundation (2 октября 2013). Проверено 3 октября 2013.
  71. ↑ Mike Masnick. Not Cool: MPAA Joins The W3C (англ.). Techdirt (7 January 2014). Проверено 18 января 2014.
  72. ↑ Danny O’Brien. International Day Against DRM: Whatever Happened to the W3C? (англ.). Electronic Frontier Foundation (6 мая 2014). Проверено 10 мая 2014.

Литература

  • Арсений Мирный. HTML5 против Flash-видео // UP Special : журнал. — 2010. — № 5. — С. 42—45.
  • ComputerBild 17/2011, стр.60-63; Железо 1/2012, стр.84-86; Chip 4/2012, стр.110-113

Ссылки

  • HTML5 – The Video Element, W3C, <http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html>. Проверено 20 августа 2011. 
  • Lawson, Bruce & Lauke, Patrick H. (2010-02-11), Introduction to HTML5 video, Opera, <http://dev.opera.com/articles/view/introduction-html5-video/> 
  • HTML5Video.org – html5 video platform software and news, <http://html5video.org> 
  • Pieters, Simon (2010-03-03), Everything you need to know about HTML5 video and audio, Opera, <http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2> 
  • Pilgrim, Mark, Video on the Web, <http://diveintohtml5.org/video.html> 

HTML5 Video — HTML5 Rocks

Comments:

Your browser may not support the functionality in this article.

Введение

Видеотег – это одна из самых популярных функций HTML5. Часто видеотег представляют как альтернативу технологии Flash на веб-сайтах, но это далеко не все, что он может. Он вошел в число тегов HTML совсем недавно, но его возможности и поддержка различными браузерами расширяются с поразительной скоростью. Как вы увидите в этом руководстве, основное преимущество видеотега – его естественная интеграция с другими уровнями веб-программирования, такими как CSS и JavaScript, а также с другими тегами HTML.

В этом руководстве раскрывается суть видеотега и демонстрируются различные примеры его интеграции с другими функциями HTML5, такими как <canvas>.

1. Разметка

Для демонстрации HTML-видео на сайте достаточно следующих линий:

<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>

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

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

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

А пока сосредоточимся на предыдущем, более распространенном сейчас варианте. Самый важный момент – правильно указать MIME-тип для обработки видеофайлов сервером в заголовке Content-Type. В противном случае видео может работать некорректно, даже если используется локальная копия с вашего сайта. В Apache httpd.conf достаточно добавить следующие строки:

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

Если ваше приложение работает на платформе Google App Engine, нужно добавить в файл app.yaml примерно следующий код (отдельно для каждого формата):

- url: /(.*\.ogv)
  static_files: videos_folder/\1
  mime_type: video/ogg
  upload: videos_folder/(.*\.ogv)

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

2. Видеоформаты

Видеоформат можно представить как ZIP-файл, содержащий закодированный видео- и аудиопоток. В Интернете актуальны форматы WEBM, MP4 и OGV:

  • MP4 = H.264 + AAC
  • OGG/OGV = Theora + Vorbis
  • WEBM = VP8 + Vorbis

Видеотег развивается удивительно быстро. Всего год назад он поддерживался только браузером Safari и только в стабильной версии. Теперь видео HTML5 поддерживают все современные браузеры, включая IE9. Что касается кодеков, разработчики Firefox, Chrome и Opera договорились включить поддержку WEBM в качестве общего видеоформата, используя проект WebM. Internet Explorer также будет его подд

HTML5 video — это… Что такое HTML5 video?

HTML5 video — элемент, включённый в проект спецификации HTML 5, который используется для воспроизведения видеозаписей[1], частично заменяя элемент <object>.

Adobe Flash Player широко использовался для того, чтобы встраивать содержимое видео-файлов на сайтах (например, YouTube). Flash Player доступен в качестве плагина для большинства веб-браузеров последних версий (таких как Mozilla Firefox, SeaMonkey, Opera и Safari), и несовместим, например, со встроенными браузерами iPod и iPhone от Apple, а также с Android версии 2.01 или меньше и версии 4.1.x и выше(официально)[2][3]. Google Chrome не нуждается в данном плагине с тех пор, как Google добавил плеер в браузер.[4] Создатели HTML 5 video считают, что это станет стандартным способом просмотра видео онлайн, но основным препятствием для принятия данного соглашения является вопрос о том, какие именно видео форматы должны поддерживаться этим видео тегом.

Пример использования элемента <video>

Ниже приводится фрагмент кода на HTML 5, который позволяет встроить WebM видео на веб-сайт:

<video src="movie.webm" poster="movie.jpg" controls>
        This is fallback content to display if the browser
        does not support the video element.
</video>

Множественность ресурсов

Используя любое количество элементов <source>, как показано ниже, браузер выберет автоматически, какой файл загружать. Также, чтобы добиться того же результата, можно использовать функцию canPlay() из JavaScript. Атрибут «type» определяет тип MIME и список кодеков, которые помогают браузеру определить, может ли он расшифровать файл или нет. Из-за отсутствия общего видео формата, множественность ресурсов является важной особенностью для того, чтобы избегать «фырканья» браузера, что склоняет его к ошибке: известно, что любые знания веб-разработчиков о браузерах будут неполными, браузер знает о себе больше.

<video poster="movie.jpg" controls>
        <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
        <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
        <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>
        <p>This is fallback content</p>
</video>

Поддерживаемые видео-форматы

Текущий проект спецификации HTML 5 не уточняет, что браузер должен поддерживать любой формат видео файлов в теге video. Пользовательские агенты свободно поддерживают любой видео формат, который считают соответствующим.

Дебаты насчет стандартного видео-формата

Основная статья: Использование форматов Ogg в HTML5

Рабочая группа HTML 5 считает, что желательно определить по крайней мере один видео-формат, который бы поддерживался всеми браузерами. Идеальный формат в этом отношении должен:

  • иметь хорошее сжатие, хорошее разрешение изображения и низкие затраты работы процессора для расшифровки
  • быть бесплатным
  • в дополнение к программным декодерам, для формата должен существовать декодер для видео с аппаратных средств, так как у многих встроенных процессоров нет возможности расшифровать видео в нужный нам формат

Изначально, Ogg Theora был рекомендуемым стандартом для HTML 5, потому что он не был затронут никакими известными патентами. Но 10 Декабря 2010 года спецификация HTML 5 была подкорректирована,[5] изменились ссылки на конкретные форматы:

«Браузеры должны поддерживать видеоформат Theora и аудиоформат Vorbis, а также контейнерный формат Ogg.»

с дополнением[6]:

«Было бы очень полезно для функциональной совместимости, если бы все браузеры смогли поддерживать один кодер-декодер. Но не существует ни одного такого кодер-декодера, который бы удовлетворял всех: нам нужен такой кодер-декодер, который, как известно, не требует лицензирования, который совместим с современной развивающейся моделью, который имеет достаточно качеств, чтобы быть пригодным, и который не станет подводным камнем для крупных компаний. Это текущая проблема, и эта часть будет еще доработана.[7]»

Хотя Theora не затронута известными патентами, такие компании как Apple[8] и Nokia опасаются неизвестных патентов, чьи собственники могли бы ждать корпорацию с финансовыми ресурсами, чтобы предъявить иск по использованию данного формата.[9][10] Такие не запатентованные форматы, как H.264, также могли бы использоваться в принципе, но они широко известны и поэтому предполагается, что любой патентодержатель уже может намереваться их занять. Apple также возражает против требования о поддержке формата Ogg в HTML 5 на тех основаниях, что некоторым приспособлениям поддерживать другие форматы намного легче и что HTML ни разу за всю историю его существования не требовал особые форматы для чего-либо.[10]


Некоторые веб-разработчики раскритиковали удаление Ogg-форматов из спецификации.[11][12][13] Последующее обсуждение также произошло и в FAQ блоге W3C.[14]

H.264/MPEG-4 AVC широко используем и обладает хорошей скоростью, сжатием, декодером для аппаратных средств, но он уже запатентован.[15] Кроме особых случаев пользователям H.264 приходится платить за лицензию  MPEG LA — группе патентодержателей, включая Apple и Microsoft.[16] В итоге решили, что нет необходимости в кодер-декодере по умолчанию.

Google покупает On2

Приобретение Google-ом On2 происходит в результате выпуска формата VP8, который является бесплатным открытым стандартом, и создания WebM Project, который соединяет VP8 video с Vorbis audio в контейнер Matroska. Выпуск VP8 был также поддержан Free Software Foundation.[17]

В январе 2011 года Google объявил, что собирается прекратить поддержку H.264 в Chrome-e, многие критиковали это, включая Питера Брайта из Ars Technica[18] и «веб-проповедника» Тима Снита из Microsoft, которые заявили, что скорее объявят эсперанто официальным языком США, чем Google продвинется в этом деле.[19]. Однако Говард Моен из Opera Software сильно раскритиковал статью Ars Technica[20], и Google ответила на реакцию, объяснив своё решение тем, что они намерены продвигать WebM в своих продуктах на основе их открытости.

Браузерная поддержка

Значения

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

ЗначениеОписание
Yesпоказывает, что разметка полностью поддерживает данное свойство/элемент, когда используются правильные значения
Noпоказывает, что свойство/элемент полностью игнорируется
Partialпоказывает, что свойство/элемент понято, но не все его значения поддерживаются. Поддерживаемые значения выполняются правильно.
Incorrectпоказывает, что свойство/элемент понято, но работает правильно не во всех случаях.
Experimentalпоказывает, что свойство/элемент понято, но поддерживается под другим именем. Может быть незавершенным или содержать ошибки
Droppedпоказывает, что свойство/элемент больше не поддерживается
Nightly buildпоказывает, что свойство/элемент поддерживается в некоторой степени в экспериментальной/ночной среде. Ожидается поддержка в будущем.
Dependsпоказывает, что свойство/элемент поддерживается только на определенных платформах или если сконфигурированы определенные условия.

Таблица

Эта таблица показывает, какие видео-форматы вероятно будут поддерживаться указанным браузером. Большинство браузеров, представленных здесь, используют  multimedia framework для раскодирования и отображения видео-файла вместо того, чтобы включить такие компоненты в программное обеспечение. Как правило невозможно перечислить все форматы, которые поддерживает multimedia framework без их запроса, так как все зависит от операционной система и типа кодер-декодера.[21] В таких случаях поддерживаемый видео-формат является атрибутом для framework, а не для браузера или его разметки; браузер обязательно спрашивает свой multimedia framework, прежде чем отвергнуть неизвестный видео-формат. Видео-формат может быть определен с помощью MIME в HTML. (Смотри example) MIME используется для уточнения у multimedia frameworks о поддерживаемых форматах. [note 1]

Среди этих браузеров только Firefox, Opera и Origyn используют библиотеки для встроенного раскодирования. На деле Internet Explorer и Safari  также могут обеспечивать поддержку определенных форматов, потому что их изготовители также сделали их multimedia frameworks. С другой стороны, у Konqueror есть идентичная поддержка формата, когда Internet Explorer используется на Windows, и когда Safari используется на Mac, но поддержка для Konqueror, показанная здесь, типична для GNU/Linux, где Konqueror в основном и используется. В основном поддержка браузерами формата навязана конфликтующими интересами производителей, в особенности Media Foundation и QuickTime поддерживают коммерческие стандарты, тогда как Gstreamer и Phonon не могут законно ничего поддерживать, кроме бесплатных форматов по умолчанию на бесплатных операционных системах, для которых они созданы.

Использование

С апреля 2010 года вслед за запуском iPad от Apple большое количество высококлассных сайтов начало работать с H.264 HTML 5 видео вместо Flash для браузеров, распознающихся как iPad.[56]

В мае 2010 года HTML 5 video еще не так широко распространено, как Flash видео, хотя DailyMotion[57] недавно массово выпустил экспериментальные видео-плееры на основе HTML5 (использующие форматы Ogg Theora и Vorbis), YouTube[58] (использующий форматы H.264 и WebM) и Vimeo[59](использующий формат H.264) намекают, что интерес к приему HTML 5 видео увеличивается.

Некоторые крупные, обеспечивающие видео, веб-сайты опубликовали решение продолжить использование технологий, отличающихся от HTML 5 video.[60][61][62] Согласно статье блога YouTube, тег <video> не удовлетворяет всем потребностям веб-сайтов, таких как YouTube.[63] В заявленные важные причины входит необходимость стандартного формата, отсутствие эффективного и надежного метода для передачи видео браузеру, неспособность JavaScript отображать видео на полный экран и проблема защиты содержимого. Хулу также не принял HTML 5 video из-за неспособности обеспечить пользователя адаптивным диапазоном частот для видео, обеспечить содержание производителя и предоставлять рекламодателям данные.[64]Netflix заявил, что есть много проблем, которые мешают ему использовать HTML 5 video: приемлемые контейнерные A/V форматы; допустимые аудио и видео кодер-декодеры, потоковый протокол, метод для потокового протокола, чтобы адаптировать его к доступным диапазонам частот, метод для передачи информации о доступных потоках и другие параметры для модуля воспроизведения потока данных; метод поддержки защищенных данных; и метод отображения всей этой функциональности в HTML 5.[61][65]

11 января 2011 года Google’s Chromium Project объявил в своем блоге, что поддержка закрытых кодер-декодеров(например, H.264) будет удалена из будущих версий Chrome-а. В объявлении Chromium особенно выделялось то, что эта ликвидация была попыткой увеличить популярность использования HTML5 и тега <video> без необходимости лицензирования патентованных технологий, стимулируя всю сеть принять общедоступный кодер-декодер для VP8 и Theora.

Заметки

  1. ↑ at least for Phonon and its backends [22], that is DirectShow, QuickTime and GStreamer
  2. ↑ Supported if OpenCodecs is installed. Also possible with Google Chrome Frame[23][24]
  3. ↑ Google released a WebM component for Media Foundation to allow the playback of WebM files in IE9 through the standard HTML5 <video> tag.[26]
  4. ↑ Possible if the user has installed a VP8 codec on Windows for IE9.[27]
  5. ↑ Possible on some systems if the HTML5 extension for Windows Media Player Firefox plug-in is installed.[31]
  6. ↑ Supported if XiphQT is installed.
  7. ↑ Any format supported by QuickTime or Core Video on OS X.[47]
  8. ↑ 1 2 Any format supported by Phonon on Qt 4.5.[52]. Format support depends on the backend of Phonon. Available Phonon backends include GStreamer and xine; backends using MPlayer and VLC are in development.
  9. ↑ 1 2 3 Any format supported by GStreamer on Webkit/GTK+ builds of Epiphany.

Приложения

  1. ↑ The video element. HTML5: A vocabulary and associated APIs for HTML and XHTML. World Wide Web Consortium (24 Июня 2010 года). — «A video element is used for playing videos or movies.»  Архивировано из первоисточника 26 августа 2012. Проверено 27 Сентября 2010 года.
  2. ↑ An Update on Flash Player and Android. Adobe Systems Inc.. Архивировано из первоисточника 26 августа 2012. Проверено 28 июня 2012.
  3. ↑ Adobe Flash on the Nexus 7 and other Jelly Bean Devices. xda-developers. Архивировано из первоисточника 26 августа 2012. Проверено 25 июля 2012.
  4. ↑ Adobe Flash Player : Basic browser settings — Google Chrome Help. Google Inc.. Архивировано из первоисточника 26 августа 2012. Проверено 9 июля 2011.
  5. ↑ Hickson, Ian [whatwg] Video codec requirements changed. Список рассылки whatwg mailing list (10 Декабря 2007 года). Проверено 25 Февраля 2008 года.
  6. ↑ (X)HTML5 Tracking. HTML5.org. Архивировано из первоисточника 26 августа 2012. Проверено 23 Июня 2009 года.
  7. ↑ [whatwg] Removal of Ogg is *preposterous*. Список рассылки WHATWG (11 Декабря). Проверено 25 Августа 2009 года.
  8. ↑ Steve Jobs: mystery patent pool to attack Ogg Theora. The Register. Архивировано из первоисточника 26 августа 2012. Проверено 9 Июля 2011 года.
  9. ↑ Hickson, Ian Re: [whatwg] Removal of Ogg is *preposterous*. Список рассылки whatwg mailing list (11 Декабря 2007 года). Проверено 25 Февраля 2008 года.
  10. ↑ 1 2 Stachowiak, Maciej [whatwg] Codecs (was Re: Apple Proposal for Timed Media Elements). Список рассылки whatwg mailing list (21 Марта 2007 года). Проверено 25 Февраля 2008 года.
  11. ↑ The Attack Against Ogg Theora or: How I Learned to Stop Worrying and Love the Proprietary Web. Metavid (11 Декабря 2007 года). Архивировано из первоисточника 23 Июня 2009 года. Проверено 30 Июня 2009 года.
  12. ↑ rudd-o.com. rudd-o.com (11 Декабря 2007 года).(недоступная ссылка — история) Проверено 30 Июня 2009 года.
  13. ↑ Abbadingo » Blog » Removal of Ogg Vorbis and Theora from HTML 5: an outrageous disaster. Delcorp.org (12 Декабря 2007 года). Архивировано из первоисточника 26 августа 2012. Проверено 30 Июня 2009 года.
  14. ↑ Dan Connolly. When will HTML 5 support <video>? Sooner if you help. W3C (18 декабря 2007). Архивировано из первоисточника 26 августа 2012. Проверено 23 июня 2009.
  15. ↑ «AVC/H.264 Patent List», MPEG LA, 1 Февраля 2010 года, <http://www.mpegla.com/main/programs/avc/Documents/avc-att1.pdf> 
  16. ↑ «AVC/H.264 Licensors», MPEG LA, <http://www.mpegla.com/main/programs/AVC/Pages/Licensors.aspx> 
  17. ↑ Matt Lee FSF gratulates google. FSF (19 Мая 2010 года). Архивировано из первоисточника 26 августа 2012.
  18. ↑ Питер Брайт Google’s dropping H.264 from Chrome a step backward for openness. Ars Technica (12 января 2011 года 12:30). Архивировано из первоисточника 26 августа 2012.
  19. ↑ Тим Снит An Open Letter from the President of the United States of Google. MSDN (11 января 2011 года). Архивировано из первоисточника 26 августа 2012.
  20. ↑ Говард К. Моен Is the removal of H.264 from Chrome a step backward for openness?. My Opera (13 января 2011 года 14:29). Архивировано из первоисточника 26 августа 2012.
  21. ↑ «Phonon documentation of backends», Qt, <http://doc.qt.nokia.com/latest/phonon-overview.html#backends>. Проверено 3 Июня 2011 года. 
  22. ↑ «Phonon documentation of querying», Qt, <http://doc.qt.nokia.com/latest/phonon-overview.html#querying-backends-for-support>. Проверено 3 июня 2011. 
  23. ↑ Kevin Carle and Chris Zacharias (20 Января 2010 года), «Introducing YouTube HTML5 Supported Videos», Official YouTube Blog, <http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html>. Проверено 12 марта 2010. 
  24. ↑ Dougherty, Brad (21 Января 2010 года), «Try our new HTML5 player!», Vimeo Staff Blog, <http://vimeo.com/blog:268>. Проверено 12 Марта 2010 года. 
  25. ↑ McCracken, Harry (16 Марта 2010 года), «Microsoft Previews the Revamped Internet Explorer 9 Platform», Technologizer, <http://technologizer.com/2010/03/16/ie9-platform-preview/> 
  26. ↑ Mike Jazayeri. More about the Chrome HTML Video Codec Change. Google (14 Января 2011 года). Архивировано из первоисточника 3 октября 2012.
  27. ↑ Hachamovitch, Dean (19 Мая 2010 года), «Another Follow-up on HTML5 Video in IE9», Microsoft, <http://blogs.msdn.com/ie/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx> 
  28. ↑ Hachamovitch, Dean (29 Апреля 2010 года), «HTML5 Video», Microsoft, <http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx>. Проверено 5 Мая 2010 года. 
  29. ↑ «Media formats supported by the audio and video elements», Mozilla, <https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements> 
  30. ↑ «Mozilla Firefox 3.5 Release Notes», Mozilla, 2009-06-30, <http://www.mozilla.com/en-US/firefox/3.5/releasenotes/>. Проверено 15 Февраля 2010 года. 
  31. ↑ «HTML5 Extension for Windows Media Player Firefox Plug-in», Microsoft Corporation, <http://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin>. Проверено 28 Января 2011 года. 
  32. ↑ «Bug 566243 — Merge mozilla-webmedia repository to mozilla-central», Mozilla, <https://bugzilla.mozilla.org/show_bug.cgi?id=566243> 
  33. ↑ «Firefox Nightly Builds», Mozilla, <http://nightly.mozilla.org/> 
  34. ↑ «Google Chrome support Theora and Vorbis», Google, 2010-05-20, <http://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome> 
  35. ↑ «Google Chrome 3.0 will support <video> tag», <http://www.cnetfrance.fr/news/google-chrome-3-39503164.htm> 
  36. ↑ «Differences between Google Chrome and Linux distro Chromium», Google, 17 Марта 2011 года, <http://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome> 
  37. ↑ «HTML Video Codec Support in Chrome», Google, 11 Января 2011 года, <http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html> 
  38. ↑ Bankoski, Jim (2010-05-19), «WebM and VP8 land in Chromium», Google, <http://blog.chromium.org/2010/05/webm-and-vp8-land-in-chromium.html> 
  39. ↑ Kersey, Jason (3 Июня 2010 года), «Google Chrome Releases: Dev Channel Update», Google, <http://googlechromereleases.blogspot.com/2010/06/dev-channel-update.html>. Проверено 1 Июля 2010 года. 
  40. ↑ 1 2 «Issue 21318: Query FFmpeg libraries for codec support», Google, <http://code.google.com/p/chromium/issues/detail?id=21318>. Проверено 10 Сентября 2010 года. 
  41. ↑ «Issue 4363: [HTML5-Video] Enable HTML5 video/audio elements», Google, <http://code.google.com/p/chromium/issues/detail?id=4363>. Проверено 10 сентября 2010. 
  42. ↑ «ChromiumBrowserVsGoogleChrome», Google, <http://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome>. Проверено 10 Сентября 2010 года. 
  43. ↑ «Issue 2093007: Chromium side changes for enabling VP8 and WebM support.», Google, <http://codereview.chromium.org/2093007>. Проверено 10 Сентября 2010 года. 
  44. ↑ «About the Safari 3.1 Update», 2008-03-17, <http://support.apple.com/kb/TA25197>. Проверено 15 февраля 2010. 
  45. ↑ Dalrymple, Jim (2009-03-10), «Apple shows off Safari’s HTML 5 support», Macworld, <http://www.macworld.com/article/139285/2009/03/safarihtml5.html>. Проверено 13 марта 2010. 
  46. ↑ «Google’s WebM plugin available», <https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&can=2&q=>. Проверено 23 июня 2011. 
  47. ↑ «HTML5 Media Support», WebKit Open Source Project: Surfin’ Safari, 12 Ноября 2007 года, <http://webkit.org/blog/140/html5-media-support/>. Проверено 11 Марта 2010 года. 
  48. ↑ Jägenstedt, Philip (31 Декабря 2009 года), «(re-)Introducing <video> — Official blog for Core developers at Opera», Opera, <http://my.opera.com/core/blog/2009/12/31/re-introducing-video>. Проверено 6 Февраля 2010 года. 
  49. ↑ Lie, Håkon Wium (19 Мая 2010 года), «Welcome, WebM <video>!», Opera, <http://labs.opera.com/news/2010/05/19/> 
  50. ↑ Mills, Chris (19 Мая 2010 года), «Opera supports the WebM video format», Opera, <http://dev.opera.com/articles/view/opera-supports-webm-video/> 
  51. ↑ Davison, Peter (2010-03-03), «KHTML Browsers including Konqueror», Legend Scrolls, <http://www.legendscrolls.co.uk/webstandards/khtml>. Проверено 12 марта 2010. 
  52. ↑ Vestbø, Tor Arne (2008-05-13), «Top Secret, Hush Hush!», Nokia Corporation, <http://labs.trolltech.com/blogs/2008/05/13/top-secret-hush-hush/>. Проверено 14 марта 2010. 
  53. ↑ «webm troubleshooting for Konqueror», Xiph.org, <http://wiki.xiph.org/Playback_Troubleshooting#Konqueror>. Проверено 1 Июня 2011 года. 
  54. ↑ Toker, Alp (2007-12-08), «HTML5 media support with GStreamer», <http://www.atoker.com/blog/2007/12/08/html5-media-support-with-gstreamer/>. Проверено 12 марта 2010. 
  55. ↑ «YouTube and WebM support», Fedora Project, <http://fedoraproject.org/wiki/Flash#YouTube_and_WebM_support>. Проверено 1 июля 2010. 
  56. ↑ iPad-ready websites. Apple, Inc..(недоступная ссылка — история) Проверено 5 Апреля 2010 года.
  57. ↑ Watch Video…without Flash. Dailymotion (27 Мая 2009 года).(недоступная ссылка — история) Проверено 18 Мая 2010 года.
  58. ↑ Introducing YouTube HTML5 Supported Videos. Youtube (20 Января 2010 года). Архивировано из первоисточника 26 августа 2012. Проверено 7 Марта 2010 года.
  59. ↑ Dougherty, Brad Try our new HTML5 player!. Vimeo (21 Января 2010 года). Архивировано из первоисточника 26 августа 2012. Проверено 7 Марта 2010 года.
  60. ↑ Gizmodo: HTML5 isn’t going to save the internet
  61. ↑ 1 2 Gigaom.com: Netflix has no plans to use HTML5
  62. ↑ Pseudocoder: Why HTML5 won’t replace Flash
  63. ↑ Flash and the HTML5 <video> tag. Архивировано из первоисточника 26 августа 2012.
  64. ↑ Pardon Our Dust <video> tag. Архивировано из первоисточника 26 августа 2012.
  65. ↑ PCMag: Netflix working on HTML5 streaming

Ссылки

  • «HTML5 — The Video Element», W3C, <http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html> 
  • Lawson, Bruce & Lauke, Patrick H. (2010-02-11), «Introduction to HTML5 video», Opera, <http://dev.opera.com/articles/view/introduction-html5-video/> 
  • «HTML5Video.org — html5 video platform software and news», <http://html5video.org> 
  • Pieters, Simon (2010-03-03), «Everything you need to know about HTML5 video and audio», Opera, <http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2> 
  • Pilgrim, Mark, «Video on the Web», <http://diveintohtml5.org/video.html> 

HTML5 | Видео

Видео

Последнее обновление: 21.04.2016

Для воспроизведения видео в HTML5 используется элемент video. Чтобы настроить данный элемент, мы можем использовать следующие его атрибуты:

  • src: источник видео, это может быть какой-либо видеофайл

  • width: ширина элемента

  • height: высота элемента

  • controls: добавляет элементы управления воспроизведением

  • autoplay: устанавливает автовоспроизведение

  • loop: задает повторение видео

  • muted: отключает звук по умолчанию

Хотя мы можем установить ширину и высоту, но они не окажут никакого влияния на аспектное отношения ширины и высоты самого видео. Например, если видео имеет формат 375×240, то, к примеру, при настройках width="375" видео будет центрироваться на 280-пиксельном пространстве в HTML. Что позволяет избавить видео от искажений, которые были бы при растягивании.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Видео в HTML5</title>
	</head>
	<body>
		<video src="cats.mp4" controls ></video>
	</body>
</html>

Применим атрибуты autoplay и loop:


<video src="cats.mp4" controls autoplay loop ></video>

Теперь видео будет автоматически проигрываться бесконечное число раз.

Если при воспроизведении надо отключить звук, то мы можем воспользоваться атрибутом muted:


<video src="cats.mp4" controls muted ></video>

Атрибут preload

Еще один атрибут — preload призван управлять загрузкой видео. Он принимает следующие значения:

  • auto: видео и связанные с ним метаданные будут загружаться до того, как видео начнет воспроизводиться.

  • none: видео не будет загружаться в фоне, пока пользователь не нажмет на кнопку начала проигрывания

  • metadata: в фоне до воспроизведения будут загружаться только метаданные (данные о формате, длительности и т.д), само видео не загружается

<video src="cats.mp4" controls preload="auto"></video>

Атрибут poster

Атрибут poster позволяет установить изображение, которое будет отображаться до запуска видео. Этому атрибуту в качестве значения передается путь к изображению:

<video src="cats.mp4" controls poster="mycat.jpg"></video>

Поддержка форматов видео

Главной проблемой при использовании элемента video является поддержка различными веб-браузерами определенных форматов. С помощью вложенных элементов source можно задать несколько источников видео, один из которых будет использоваться:


<video controls>
	<source src="cats.mp4" type="video/mp4">
	<source src="cats.webm" type="video/webm">
	<source src="cats.ogv" type="video/ogg">
</video>

Элемент source использует два атрибута для установки источника видео:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *