Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML 5 были введены новые элементы <video> (добавляет видео контент на страницу) и <audio>
(добавляет аудио контент на страницу), о которых и пойдет речь в этой статье.
В настоящеее время эти элементы поддерживаются во всех современных браузерах:
Добавление видео на HTML страницу
Для начала давайте определимся, что из себя представляет формат видеофайла. Формат видеофайла – это определённая структура, в которой видеозапись хранится на носителе (запоминающее устройство) и определяется двумя состовляющими: файлом-контейнером, в котором хранится сама видеозапись, и кодеками, которые используются для обработки звука и изображения.
В настоящее время существует 3 поддерживаемых формата видео для элемента <video>:
Браузер MP4 WebM Ogg
Chrome
ДА
ДА
ДА
Firefox
ДА
ДА
ДА
Opera
ДА
ДА
ДА
Safari
ДА
НЕТ
НЕТ
IE
ДА
НЕТ
НЕТ
Edge
ДА
НЕТ
НЕТ
Контейнер MPEG-4 + видео кодек Н.264 + аудио кодек ААС. Это сочетание обычно называют "MPEG-4". Н.264 — высококачественный и гибкий видео кодек, но он запатентован и на его использование необходимо получить платную лицензию. Лицензионные требования стали основной причиной, почему браузеры отказываются его поддерживать.
Контейнер Ogg + видео кодек Theora + аудио кодек Vorbis. Как правило, формат называется "Ogg Theora". Все кодеки и контейнер в этом варианте с открытым исходным кодом и без патентных или лицензионных ограничений.
Контейнер WebM + видео кодек VP8 + аудио кодек Vorbis. "WebM" открытый формат мультимедиа, представленный компанией на конференции Google I/O 19 мая 2010 года. Формат не требует лицензионных отчислений, основан на открытых видео кодеках VP8 и VP9, аудио кодеке Vorbis и подмножестве медиа контейнера Matroska. Новый формат вместе с VP8 призван заменить проприетарный стандарт H.264/MPEG-4.
Теперь самое время рассмотреть пример в котором мы добавим видео-контент на веб-страницу и поговорим о некотрых нюансах:
Добавили на страницу видео (тег <video>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).
Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
Использовали тег <source>
, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source> атрибут type (MIME-типы для видео):
Формат MIME-типы
MP4
video/mp4
Ogg
video/ogg
WebM
video/webm
Благодаря тегу <track>
добавили субтитры к видео:
Добавили путь к файлу атрибутом src.
Установили тип дорожки - субтитры kind = "subtitles" (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
Установили язык дорожки srclang = "ru".
Отобразили названия двух дорожек label = "English", label = "Russian".
Выбрали дорожку по умолчанию атрибутом default.
Результат нашего примера:
Ваш браузер не поддерживает этот видео формат.
Рис. 50 Добавление видео с субтитрами на страницу (HTML тег <video>).
Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:
<video src = "123.mp4" width = "320" height = "240" poster = "10.jpg" controls> Ваш браузер не поддерживает этот видео формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот видео формат--> Вы можете скачать этот файл по ссылке. </video>
Прочие, часто используемые атрибуты элемента <video>:
АтрибутЗначение атрибута
autoplay
Задает автоматическое воспроизведение видеоролика (старайтесь не использовать этот атрибут без необходимости – раздражает, когда за тебя решают, когда должно начаться воспроизведение видео контента).
loop
Зацикливает воспроизведение видеоролика (наша песня хороша – начинай сначала).
muted
Воспроизведение видеоролика с отключенным звуком.
Добавление аудио на HTML страницу
Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио:
Браузер MP3 Wav Ogg
Chrome
ДА
ДА
ДА
Firefox
ДА
ДА
ДА
Opera
ДА
ДА
ДА
Safari
ДА
ДА
НЕТ
IE
ДА
НЕТ
НЕТ
Edge
ДА
ДА
НЕТ
Формат MP3 — это кодек и контейнер одновременно. Он широко используется повсеместно для размещения скачиваемой музыки.
Формат WAV – также кодек и контейнер одновременно.
Контейнер Ogg + аудио кодек Vorbis. Его обычно называют "Ogg Vorbis". Был разработан сообществом Xiph для того, чтобы заменить собой запатентованные MP3, AAC и WMA.
Элемент <audio> использует те же атрибуты, что и элемент <video>, за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента <video>, вы можете предоставить несколько вариантов аудио форматов с помощью элемента <source>, как показано в примере ниже:
<!DOCTYPE html> <html> <head> <title>Аудио в HTML5</title> </head> <body> <h2>Аудио в HTML5</h2> <audio controls> <source src = "sound.mp3" type = "audio/mp3"> <source src = "sound.ogg" type = "audio/ogg"> Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат--> Вы можете скачать этот файл по ссылке ниже: <p><a href = "sound.rar">Скачать</a></p> </audio> </body> </html>
В этом примере мы:
Добавили на страницу аудио-контент (тег <audio>), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> атрибут type (MIME-типы для аудио):
Формат MIME-типы
MP3
audio/mpeg
Ogg
audio/ogg
Wav
audio/wav
Результат нашего примера:
Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат--> Вы можете скачать этот файл по ссылке. Рис. 51 Добавление аудио на страницу.
Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:
<audio src = "sound.mp3" type = "audio/mp3" controls> Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат--> Вы можете скачать этот файл по ссылке. </audio>
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Добавьте на страницу произвольный видео файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш видео файл автоматически запускался снова после завершения воспроизведения.
Подсказка: не используйте файл, предназначенный для просмотра зрителями возрастной категории 18+, это может затянуть изучение HTML 5.
Добавьте на страницу произвольный аудио файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш аудио файл запустился автоматически, как только он будет готов.
basicweb.ru
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 и список кодеков, которые помогают браузеру определить, может ли он расшифровать файл или нет. Из-за отсутствия общего видео формата, множественность ресурсов является важной особенностью для того, чтобы избегать «фырканья» браузера, что склоняет его к ошибке: известно, что любые знания веб-разработчиков о браузерах будут неполными, браузер знает о себе больше.
Текущий проект спецификации 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.
Заметки
↑ at least for Phonon and its backends [22], that is DirectShow, QuickTime and GStreamer
↑ Supported if OpenCodecs is installed. Also possible with Google Chrome Frame[23][24]
↑ Google released a WebM component for Media Foundation to allow the playback of WebM files in IE9 through the standard HTML5 <video> tag.[26]
↑ Possible if the user has installed a VP8 codec on Windows for IE9.[27]
↑ Possible on some systems if the HTML5 extension for Windows Media Player Firefox plug-in is installed.[31]
↑ Supported if XiphQT is installed.
↑ Any format supported by QuickTime or Core Video on OS X.[47]
↑ 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.
↑ 1 2 3 Any format supported by GStreamer on Webkit/GTK+ builds of Epiphany.
Приложения
↑ 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 года.
↑ An Update on Flash Player and Android. Adobe Systems Inc.. Архивировано из первоисточника 26 августа 2012. Проверено 28 июня 2012.
↑ Adobe Flash on the Nexus 7 and other Jelly Bean Devices. xda-developers. Архивировано из первоисточника 26 августа 2012. Проверено 25 июля 2012.
↑ Adobe Flash Player : Basic browser settings - Google Chrome Help. Google Inc.. Архивировано из первоисточника 26 августа 2012. Проверено 9 июля 2011.
↑ Hickson, Ian [whatwg] Video codec requirements changed. Список рассылки whatwg mailing list (10 Декабря 2007 года). Проверено 25 Февраля 2008 года.
↑ (X)HTML5 Tracking. HTML5.org. Архивировано из первоисточника 26 августа 2012. Проверено 23 Июня 2009 года.
↑ [whatwg] Removal of Ogg is *preposterous*. Список рассылки WHATWG (11 Декабря). Проверено 25 Августа 2009 года.
↑ Steve Jobs: mystery patent pool to attack Ogg Theora. The Register. Архивировано из первоисточника 26 августа 2012. Проверено 9 Июля 2011 года.
↑ Hickson, Ian Re: [whatwg] Removal of Ogg is *preposterous*. Список рассылки whatwg mailing list (11 Декабря 2007 года). Проверено 25 Февраля 2008 года.
↑ 1 2 Stachowiak, Maciej [whatwg] Codecs (was Re: Apple Proposal for Timed Media Elements). Список рассылки whatwg mailing list (21 Марта 2007 года). Проверено 25 Февраля 2008 года.
↑ The Attack Against Ogg Theora or: How I Learned to Stop Worrying and Love the Proprietary Web. Metavid (11 Декабря 2007 года). Архивировано из первоисточника 23 Июня 2009 года. Проверено 30 Июня 2009 года.
↑ rudd-o.com. rudd-o.com (11 Декабря 2007 года).(недоступная ссылка — история) Проверено 30 Июня 2009 года.
↑ Abbadingo » Blog » Removal of Ogg Vorbis and Theora from HTML 5: an outrageous disaster. Delcorp.org (12 Декабря 2007 года). Архивировано из первоисточника 26 августа 2012. Проверено 30 Июня 2009 года.
↑ Dan Connolly. When will HTML 5 support <video>? Sooner if you help. W3C (18 декабря 2007). Архивировано из первоисточника 26 августа 2012. Проверено 23 июня 2009.
↑ «AVC/H.264 Patent List», MPEG LA, 1 Февраля 2010 года, <http://www.mpegla.com/main/programs/avc/Documents/avc-att1.pdf>
↑ Matt Lee FSF gratulates google. FSF (19 Мая 2010 года). Архивировано из первоисточника 26 августа 2012.
↑ Питер Брайт Google's dropping H.264 from Chrome a step backward for openness. Ars Technica (12 января 2011 года 12:30). Архивировано из первоисточника 26 августа 2012.
↑ Тим Снит An Open Letter from the President of the United States of Google. MSDN (11 января 2011 года). Архивировано из первоисточника 26 августа 2012.
↑ Говард К. Моен Is the removal of H.264 from Chrome a step backward for openness?. My Opera (13 января 2011 года 14:29). Архивировано из первоисточника 26 августа 2012.
↑ «Phonon documentation of backends», Qt, <http://doc.qt.nokia.com/latest/phonon-overview.html#backends>. Проверено 3 Июня 2011 года.
↑ «Phonon documentation of querying», Qt, <http://doc.qt.nokia.com/latest/phonon-overview.html#querying-backends-for-support>. Проверено 3 июня 2011.
↑ 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.
↑ Dougherty, Brad (21 Января 2010 года), «Try our new HTML5 player!», Vimeo Staff Blog, <http://vimeo.com/blog:268>. Проверено 12 Марта 2010 года.
↑ McCracken, Harry (16 Марта 2010 года), «Microsoft Previews the Revamped Internet Explorer 9 Platform», Technologizer, <http://technologizer.com/2010/03/16/ie9-platform-preview/>
↑ Mike Jazayeri. More about the Chrome HTML Video Codec Change. Google (14 Января 2011 года). Архивировано из первоисточника 3 октября 2012.
↑ 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>
↑ Hachamovitch, Dean (29 Апреля 2010 года), «HTML5 Video», Microsoft, <http://blogs.msdn.com/ie/archive/2010/04/29/html5-video.aspx>. Проверено 5 Мая 2010 года.
↑ «Media formats supported by the audio and video elements», Mozilla, <https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements>
↑ «Mozilla Firefox 3.5 Release Notes», Mozilla, 2009-06-30, <http://www.mozilla.com/en-US/firefox/3.5/releasenotes/>. Проверено 15 Февраля 2010 года.
↑ «HTML5 Extension for Windows Media Player Firefox Plug-in», Microsoft Corporation, <http://www.interoperabilitybridges.com/html5-extension-for-wmp-plugin>. Проверено 28 Января 2011 года.
↑ «Google Chrome support Theora and Vorbis», Google, 2010-05-20, <http://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome>
↑ «Google Chrome 3.0 will support <video> tag», <http://www.cnetfrance.fr/news/google-chrome-3-39503164.htm>
↑ «Differences between Google Chrome and Linux distro Chromium», Google, 17 Марта 2011 года, <http://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome>
↑ «HTML Video Codec Support in Chrome», Google, 11 Января 2011 года, <http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html>
↑ 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>
↑ Kersey, Jason (3 Июня 2010 года), «Google Chrome Releases: Dev Channel Update», Google, <http://googlechromereleases.blogspot.com/2010/06/dev-channel-update.html>. Проверено 1 Июля 2010 года.
↑ 1 2 «Issue 21318: Query FFmpeg libraries for codec support», Google, <http://code.google.com/p/chromium/issues/detail?id=21318>. Проверено 10 Сентября 2010 года.
↑ «ChromiumBrowserVsGoogleChrome», Google, <http://code.google.com/p/chromium/wiki/ChromiumBrowserVsGoogleChrome>. Проверено 10 Сентября 2010 года.
↑ «Issue 2093007: Chromium side changes for enabling VP8 and WebM support.», Google, <http://codereview.chromium.org/2093007>. Проверено 10 Сентября 2010 года.
↑ «About the Safari 3.1 Update», 2008-03-17, <http://support.apple.com/kb/TA25197>. Проверено 15 февраля 2010.
↑ 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.
↑ «Google's WebM plugin available», <https://code.google.com/p/webm/downloads/detail?name=WebM%20Component%20Installer.pkg&can=2&q=>. Проверено 23 июня 2011.
↑ «HTML5 Media Support», WebKit Open Source Project: Surfin' Safari, 12 Ноября 2007 года, <http://webkit.org/blog/140/html5-media-support/>. Проверено 11 Марта 2010 года.
↑ 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 года.
↑ Lie, Håkon Wium (19 Мая 2010 года), «Welcome, WebM <video>!», Opera, <http://labs.opera.com/news/2010/05/19/>
↑ Mills, Chris (19 Мая 2010 года), «Opera supports the WebM video format», Opera, <http://dev.opera.com/articles/view/opera-supports-webm-video/>
↑ Davison, Peter (2010-03-03), «KHTML Browsers including Konqueror», Legend Scrolls, <http://www.legendscrolls.co.uk/webstandards/khtml>. Проверено 12 марта 2010.
↑ 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.
↑ «webm troubleshooting for Konqueror», Xiph.org, <http://wiki.xiph.org/Playback_Troubleshooting#Konqueror>. Проверено 1 Июня 2011 года.
↑ 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.
↑ «YouTube and WebM support», Fedora Project, <http://fedoraproject.org/wiki/Flash#YouTube_and_WebM_support>. Проверено 1 июля 2010.
↑ iPad-ready websites. Apple, Inc..(недоступная ссылка — история) Проверено 5 Апреля 2010 года.
↑ Watch Video…without Flash. Dailymotion (27 Мая 2009 года).(недоступная ссылка — история) Проверено 18 Мая 2010 года.
↑ Introducing YouTube HTML5 Supported Videos. Youtube (20 Января 2010 года). Архивировано из первоисточника 26 августа 2012. Проверено 7 Марта 2010 года.
↑ Dougherty, Brad Try our new HTML5 player!. Vimeo (21 Января 2010 года). Архивировано из первоисточника 26 августа 2012. Проверено 7 Марта 2010 года.
↑ Gizmodo: HTML5 isn’t going to save the internet
↑ 1 2 Gigaom.com: Netflix has no plans to use HTML5
↑ Pseudocoder: Why HTML5 won’t replace Flash
↑ Flash and the HTML5 <video> tag. Архивировано из первоисточника 26 августа 2012.
↑ Pardon Our Dust <video> tag. Архивировано из первоисточника 26 августа 2012.
↑ 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>
dic.academic.ru
Распространенные форматы видео файлов
Вы, наверное, обращали свое внимание, что разные видео файлы имеют различные форматы. Почему существует большое количество различных форматов видео файлов?
Потому что изначально эти форматы разрабатывались для различных целей. В некоторых форматах можно хранить несколько звуковых дорожек и субтитры, а в файлах другого формата нет такой возможности. Одни форматы больше подходят для трансляции, а другие форматы больше подходят для редактирования.
В этой статье будут кратко описаны наиболее популярные форматы видео файлов.
Стандарты видео файлов
Прежде всего, это стандарты, которые были разработаны различными международными организациями и которыми определяются кодирование и формат хранения данных медиа файла.
MPEG-1 (Moving Picture Experts Group 1) — это стандарты сжатия видео и аудио. Для видео используется формат Video CD, а для аудио формат MPEG audio layer 3, или сокращенно всем известный формат MP3. Это наиболее совместимый формат для проигрывания на компьютерах с CD/DVD оптическими приводами.
MPEG-2 (Moving Picture Experts Group 2) — этот стандарт используется в DVD и цифровом телевидении DBV. В этом формате снимают видео в различных устройствах для съемки видео.
MPEG-3 (Moving Picture Experts Group 3) — этот стандарт был разработан для телевидения высокой четкости HDTV, теперь стал частью стандарта MPEG-2.
MPEG-4 (Moving Picture Experts Group 4) — этот стандарт используется для сжатия цифрового видео и аудио. Состоит из нескольких стандартов, включает в себя многие возможности MPEG-1 и MPEG-2. В этом стандарте используются различные кодеки: DivX, Xvid, H.264 (AVC) и другие. Формат MP4 является одной из спецификаций этого стандарта.
Медиа файл имеет несколько характеристик, которыми определяется работа с этим файлом. Это кодек, которым закодирован этот медиа файл и тип контейнера, который определяет формат записи с использованием различной информации: видео и аудио данные, субтитры и прочая информация, помещенная в контейнер.
Пример кодеков — DivX, Xvid, H.264, Theora.
Пример контейнеров — Matroska, AVI, QuickTime, Ogg, 3GP.
Форматы видео файлов
А сейчас рассмотрим наиболее распространенные форматы видео файлов. После установки пакета кодеков K-Lite Codec Pack почти все рассмотренные в статье форматы должны будут воспроизводиться стандартным плеером – Windows Media Player, установленным в операционную систему Windows. Вместе с пакетом кодеков K-Lite Codec Pack устанавливается плеер Media Player Classic Home Cinema, который также будет проигрывать почти все эти форматы видео файлов.
3GP — этот контейнер был разработан для использования на мобильных телефонах, в сотовой связи третьего поколения. С помощью этого формата уменьшается размер аудио и видео файла, который используется на мобильном телефоне.
Открывается с помощью программ: VLC media player, MPlayer, QuickTime Player, RealPlayer.
ASF (Advanced Systems Format File) — контейнер разработанный корпорацией Microsoft для потокового аудио и видео. При использовании этого формата не требуется установки дополнительных кодеков.
Открывается с помощью программ: Windows Media Player, Media Player Classic Home Cinema, VLC media player.
AVI (Audio-Video Interleaved) — контейнер разработанный корпорацией Microsoft. Это один из самых распространенных форматов видео файлов. В этом формате можно использовать различные кодеки.
Открывается с помощью программ: Windows Media Player (Проигрыватель Windows Media), CyberLink PowerDVD, QuickTime Player, VLC media player, Winamp.
FLV (Flash Video) — видео формат созданный для передачи видео через Интернет. Это самый распространенный формат в сети Интернет. Широко используется на различных видеохостингах, которые предназначены для хранения видео файлов. Основными преимуществами являются: хорошее качество картинки при низком битрейте, возможность просматривать видео до полной загрузки видео файла, использование этого формата для различных операционных систем.
Открывается с помощью программ: браузерами с помощью Adobe Flash Player, FLV Player, VLC media player, Media Player Classic Home Cinema.
M2TS — видео файл формата Blu-ray.
Открывается с помощью программ: CyberLink PowerDVD, Sony Vegas, VLC media player.
M4V — видео файл iTunes.
Открывается с помощью программ: iTunes, QuickTime Player, RealPlayer, Media Player Classic Home Cinema.
MKV (Matroska) — контейнер, который может содержать видео, аудио, субтитры и прочее. Этот формат может содержать различные типы субтитров и поддерживает добавление нескольких звуковых дорожек в видео файл.
Открывается с помощью программ: Windows Media Player, VLC media player, Media Player Classic Home Cinema.
MOV — контейнер, разработанный корпорацией Apple для QuickTime. Это формат операционной системы Mac OS X. Проигрывается в операционной системе Windows. Файлы этого формата используются для хранения фильмов и различного видео. В этом формате может содержаться несколько видео и аудио дорожек, субтитры, анимация и панорамные изображения. Этот формат удобен для редактирования.
Открывается с помощью программ: QuickTime Player, CyberLink PowerDirector, Windows Media Player.
MP4 — видео файл одной из спецификаций стандарта MPEG-4. Этот формат очень близок к формату MOV и обладает почти такими же возможностями.
Открывается с помощью программ: QuickTime Player, Windows Media Player, VLC media player.
MTS — видео файл AVCHD (Advanced Video Codec High Definition), который содержит видео высокой четкости HD и применяется для сохранения видео файлов в видеокамерах Sony, Panasonic и других компаний.
Открывается с помощью программ: CyberLink PowerDVD, Sony Vegas, Corel VideoStudio, Corel WinDVD.
Ogg — бесплатный, универсальный и открытый формат, разработанный для хранения мультимедия файлов, закодированных различными кодеками.
Открывается с помощью программ: VLC media player, MPlayer.
RealMedia — формат, созданный компанией RealNetworks. Используется в основном для трансляции телевидения и потокового видео в Интернете. Файлы этого формата обычно имеют небольшой размер, низкий битрейт и соответственно имеют более низкое качество.
Открывается с помощью программ: RealPlayer, VLC media player, MPlayer.
SWF (Shockwave Flash или Small Web Format) — видео формат для флеш-анимации, векторной графики, видео и аудио в сети Интернет. Картинка, сохраненная в этом формате масштабируется без видимых искажений, видео ролик имеет небольшой размер, происходит более быстрая загрузка видео файла и его воспроизведение.
Открывается с помощью программ: браузерами с помощью Adobe Flash Player, VLC media player, Media Player Classic Home Cinema.
VOB (Versioned Object Base) — это данные с оптического диска DVD-Video, которые обычно находятся в папке VIDEO_TS. Эти файлы содержат видео в формате MPEG-2, аудио и субтитры.
Открывается с помощью программ: Windows Media Player, VLC media player, Media Player Classic Home Cinema, CyberLink PowerDVD и многими другими программами.
WMV (Windows Media Video) — Windows Media, разработанный корпорацией Microsoft. Для проигрывания не требуется установка дополнительных кодеков. Видео файл может быть защищен с помощью системы защиты DRM.
Открывается с помощью программ: Windows Media Player, CyberLink PowerDVD, MPlayer.
WebM — открытый формат предложенный корпорацией Google, в качестве замены стандарта H.264/MPEG4.
Открывается с помощью программ: браузерами, VLC media player, MPlayer.
Стандарты телевизионного изображения
Старые аналоговые стандарты:
NTSC — распространен в Северной Америке, часть Южной Америки, Японии и некоторые страны Азии.
PAL — распространен в Европе, Азии, Австралии, в части Африки и Южной Америки.
SECAM — распространен во Франции, в большей части стран бывшего СССР и в части стран Африки.
Новые цифровые стандарты:
ATSC — Северная Америка.
DBV — Европа, в том числе и Россия.
ISDB — Япония.
Существует еще довольно много аналоговых и цифровых форматов видеозаписи, большая часть которых была разработана конкретными производителями для выпускаемой ими техники.