Кодеки html5: Поддерживаемые форматы аудио и видео

Содержание

Нужно ли указывать кодеки в видео HTML5?

Нужно ли указывать такие кодеки в видео html5 :

<video preload controls>
<source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="pr6.mp4" />
</video>

Или это нормально просто сделать следующее :

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

Последний метод, кажется, отлично работает в браузерах, в чем же преимущество первого метода? Эта информация взята из http://diveintohtml5.info/video.html , который также должен иметь видео mp4 первым в списке для iDevices.

html

video

Поделиться

Источник


Jizbo Jonez    

27 апреля 2013 в 07:11

3 ответа


  • Аудио / видео кодеки для платформы Android

    Я ищу, либо с открытым исходным кодом, либо коммерчески доступный, аудио-и видеодекодер & декодер для Android для приложения, которое я хочу написать для Android. Для аудио я хочу иметь возможность как кодировать-декодировать форматы AMR/AD-PCM/AAC, так и для видео H.263/H.264 & MPEG4. Из…

  • Как я могу добавить новые кодеки для matlab?

    Есть ли какой-нибудь способ загрузить новые кодеки для matlab? Он поддерживает только базовые кодеки и фильтры. Мне нужно использовать uncompperessed видео в matlab



3

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

Поделиться


Mauricio    

27 апреля 2013 в 07:18



2

Прямо из MDN, codecs помогают браузерам принимать более разумные решения, но это необязательно

Источник

Поделиться


Mr. Alien    

27 апреля 2013 в 07:14



-1

Его обеспечивают безопасность для кроссбраузерного обнюхивания при декодировании..

Прочтите эту статью:

http://en.wikipedia.org/wiki/ HTML5_video

Поделиться


PraJen    

27 апреля 2013 в 07:16


Похожие вопросы:

Создание видео в HTML5 / Chrome

Можно ли создать видео в Chrome либо с помощью HTML5/Javascript, либо с помощью NaCl+OpenCV? Меня больше всего беспокоят кодеки с маршрутом NaCl+OpenCV. Я ищу выход VP8 или MPEG4. В основном у меня…

Нужно получить название видео HTML5 <video> s и <audio> s

Я пытаюсь получить метаданные видео/аудио (в частности, название) из HTML5 <video>’s и <audio>’s., но мне не удалось найти ничего об этом — правильно ли я понимаю, что это невозможно…

Какие кодеки использовались при перекодировании видео с помощью ffmpeg

Во время перекодирования видео как я могу выяснить, какие кодеки были использованы ffmpeg для декодирования и перекодирования видео? Например. когда я это сделаю ffmpeg -i input.mp4 output.avi Как я…

Аудио / видео кодеки для платформы Android

Я ищу, либо с открытым исходным кодом, либо коммерчески доступный, аудио-и видеодекодер & декодер для Android для приложения, которое я хочу написать для Android. Для аудио я хочу иметь…

Как я могу добавить новые кодеки для matlab?

Есть ли какой-нибудь способ загрузить новые кодеки для matlab? Он поддерживает только базовые кодеки и фильтры. Мне нужно использовать uncompperessed видео в matlab

Могу ли я конвертировать видео с помощью javascript?

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

Если HTML5 стремится уменьшить потребность во внешних плагинах, то как могут работать различные аудио/видео кодеки?

Я заметил, что одна из целей HTML5 состоит в том, чтобы уменьшить потребность во внешних плагинах — например, Flash. Учитывая, что браузеры также нуждаются во внешних плагинах для поддержки многих…

HTML5 видео, предпочитаемые кодеки и непрямая доставка

в настоящее время я пытаюсь создать страницу видео html5 с ограничительным доступом к видео. Поэтому я хочу поместить видео из веб-корня и иметь какой-то скрипт, проверяющий учетную запись…

Запрещенные аудио / видео форматы/кодеки в App Store

Какие аудио / видео форматы / кодеки запрещены в App Store? Я знаю только одного-ААК. Есть ли другие запрещенные форматы?

как получить доступ к функции декодирования видео HTML5?

HTML5 имеет элемент <video/> , который загружает видео с сервера, декодирует его и рендерит. Часто, если не всегда, они используют аппаратное ускоренное декодирование (если таковое имеется)….

Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 3.0+ 10.50+ 3.1+ 3.5+ 2.0+ 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры
Браузер Internet Explorer Chrome Opera Safari Firefox
Аудио кодеки
ogg/vorbis
wav
mp3
AAC
Видео кодеки
ogg/theora
H.264
WebM

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

Синтаксис

<video>
 <source src="URL">
</video>

Атрибуты

autoplay
Видео начинает воспроизводиться автоматически после загрузки страницы.
controls
Добавляет панель управления к видеоролику.
height
Задает высоту области для воспроизведения видеоролика.
loop
Повторяет воспроизведение видео с начала после его завершения.
poster
Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
preload
Используется для загрузки видео вместе с загрузкой веб-страницы.
src
Указывает путь к воспроизводимому видеоролику.
width
Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video controls="controls" poster="video/duel.jpg">
   <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
   <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.

Статьи по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно.
Воспользуйтесь сервисом cssdeck.com или jsfiddle.net,
сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Учебник HTML 5. Статья «Видео и аудио контент»

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

Теперь самое время рассмотреть пример в котором мы добавим видео-контент на веб-страницу и поговорим о некотрых нюансах:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <video></title>
	</head>
	<body>
		<h2>Видео в HTML5</h2>
		<video width = "320" height = "240" poster = "10.jpg" controls>
			<source src = "123.mp4" type = "video/mp4">
			<source src = "123.ogg" type = "video/ogg">
			<track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English">
			<track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default>
			Ваш браузер не поддерживает видео тег.
		</video>
	</body>
</html>

В этом примере мы:

Добавили на страницу видео (тег <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>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш аудио файл запустился автоматически, как только он будет готов.

YouTube и Vimeo выбирают кодек H.264 вместо Ogg / Theora

Ниже я воспроизвожу заявление Mozilla относительно решения YouTube и Vimeo о выборе кодека H.264 вместо Ogg, при этом пользователи браузеров, таких как Firefox и Opera, пострадали от этого решения, а также все пользователи Интернета, к риску патентов и необходимости платить за пользовательскую лицензию как на создание контента, так и на его отображение.

Заявление Mozilla:

Можете ли вы представить себе возможность наслаждайтесь всем контентом в Интернете, просто используя свой браузер? ¿Без установки дополнительных приложений, плагины или кодеки? Что ж, это одна из целей, которые новый стандарт HTML5 с аудио и видео В сети. В настоящий момент, большинство браузеров реализуют этот новый тег видео что позволяет показывать аудиовизуальный контент без необходимости чего-либо еще, без использования Flash, без установки кодеков.

История не такая красивая, как кажется, поскольку мы сталкиваемся с большой проблемой, когда ответственное лицо (W3C) создания спецификации HTML5 сделал черновик, уточнил, что формат видео должен идти в Theora, бесплатный видеокодек без патентов, но некоторые компании, входящие в W3C, сильно жаловались (особенно Apple), поскольку они деловые интересы использовать свои собственные кодеки, и, в конце концов, не было указано никакого конкретного кодека для использования с тегом «видео».

Какие браузеры это реализуют?

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

  • Presto / Opera: HTML5 через GStreamer (включает только Ogg / Theora).
  • WebKit / Chrome: HTML5 с использованием ffmpeg (Ogg / Theora и H.264 / MP4).
  • Gecko / Firefox: HTML5 с Ogg / Theora.
  • WebKit / Epiphany: HTML5 через GStreamer (гарантировано Ogg / Theora).
  • WebKit / Safari: HTML5 через QuickTime (H.264 / MOV / M4V, можно воспроизводить Ogg / Theora с компонентами XiphQT).

Мы видим, что некоторые выбрали бесплатный кодек Ogg / Theora, а другие — кодек. H.264 запатентовано MPEG-LA (которой принадлежат Apple и Microsoft) и который не может быть использован в программе, использующей его без оплаты MPEG-LA, и с 2010 г. все Тот, кто хочет его использовать (даже если вы загружаете видео с этим кодеком на свой сайт), должен будет платить уна лицензия использования, а это значит, что вы не сможете бесплатно показывать свои видео в этом формате.
Ставка на платный кодек для Интернета неверна и ломает представление о том, чем является и чем был Интернет, по словам Асы Доцлер:

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

Мультимедийные порталы

На этой неделе у нас был сюрприз, в котором оба Youtube как Vimeo объявил, что они начнут использовать тег HTML5 «video» в качестве альтернативы показу ваших видео вместо Flash. Радость длилась недолго, когда мы увидели, что они будут реализовывать это только для кодека H.264, оставив Теору в стороне. Причины, по которым они не используют бесплатный кодек, заключаются в том, что он имеет более низкое качество и что у них уже есть все в H.264, что мы не понимаем, поскольку было показано, что Качество Theora аналогично к которому предлагается прямо сейчас на Youtube в сравнение Theora и H.264 и что уже есть другие распространители контента, которые Они выбрали для бесплатных форматов, таких как видеопортал Dailymotion, который показал мощь видео тега с бесплатными кодеками.

Обновлено: La Фонд свободного программного обеспечения попроси нас проголосовать на странице предложений Google по внедрению Ogg / Theora на Youtube.

Отражение

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

Google может позволить себе платить миллионы долларов в год за использование H.264 на YouTube или в своем браузере Chrome, и, возможно, Mozilla тоже может, но это принципиально то, что браузеры Mozilla выбирают бесплатные форматы, из-за того, что они представляют, потому что это основа Интернета, и потому что код браузера должен иметь возможность использовать третьи стороны, которым не нужно платить за лицензии третьей стороне. Как вы думаете, могло бы сообщество разработать Firefox, если бы в то время ему пришлось заплатить миллионы долларов за использование таких технологий, как HTML, CSS или JavaScript?

Браузеры и контент-порталы должны делать ставку на Ogg / Theora в качестве кодека для тега видео, поскольку он дает преимущества для всех (кроме того, он реализован в наибольшем количестве браузеров в настоящее время)

Давайте не позволим Интернету развиваться в зависимости от патентов, которые замедляют инновации. Да бесплатным форматам, да открытой паутине!

Другие мнения в мире Mozilla:

Как насчет? Гугл показывает ворс? Неужели это лучший способ начать уничтожать firefox, потому что хром, хотя он и очень хорош, не достигает пяток firefox 3.6, не говоря уже о версии 3.7?

Скажем, h.264 лучше, чем Ogg / TheoraХотя, скорее всего, это правда, но разве это просто повод не играть на свободных программах? Если Google действительно делает ставку на бесплатное программное обеспечение, не следует ли ему выделять ресурсы на улучшение? Ogg / Theora вместо того, чтобы выбросить его?

Что вы думаете? Оставляйте нам свои комментарии!

Видно в | Испаноязычная Mozilla

Атрибут type | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 8.0+ 10.50+ 3.1+ 4.0+ 2.0+ 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Задает MIME-тип источника, а также аудио и видеокодек — так называется алгоритм хранения воспроизводимых данных.

Синтаксис

<audio>
 <source src="URL" type='MIME-тип; codecs="кодек"'>
</audio>
<video>
 <source src="URL" type='MIME-тип; codecs="кодек"'>
</video>

Значения

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

Значения для некоторых типов приведены в табл. 1.

Табл. 1. Значение атрибута type в зависимости от кодеков
Видеокодек Аудиокодек Контейнер Атрибут type
  Vorbis Ogg type=’audio/ogg; codecs=vorbis’
  Speex Ogg type=’audio/ogg; codecs=speex’
  FLAC Ogg type=’audio/ogg; codecs=flac’
  MP3   type=»audio/mpeg»
H.264 AAC MP4 type=’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘
Theora Vorbis Ogg type=’video/ogg; codecs=»theora, vorbis»‘
Theora Speex Ogg type=’video/ogg; codecs=»theora, speex»‘
Theora Vorbis Matroska type=’video/x-matroska; codecs=»theora, vorbis»‘
VP8 Vorbis WebM type=’video/webm; codecs=»vp8, vorbis»‘

Значение по умолчанию

Нет.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно.
Воспользуйтесь сервисом cssdeck.com или jsfiddle.net,
сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)

22.08.2019

Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.

В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорит «mp4-стриминг».

Термины

HTML5-видео — это когда вы вставляете в веб-страницу тег <video> и указываете ему какой-то src.

Пример HTML-5 видео

<video>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает видео тэг.
</video>

HTML5-стриминг — это то же HTML5-видео, но когда в src не готовый файл, а постоянно обновляющийся видеопоток. Ролик на Ютубе — это HTML5-видео, трансляция в Твитче — HTML5-стриминг. Кстати, HTML5 произносится как аш-ти-эм-эль5, а не хтмл5.

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

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

Протокол обычно подразумевает хотя бы команду Play (начать проигрывание), но иногда есть и расширенные варианты: пауза, продолжение, публикация, перемотка и т.п.

Примеры протоколов: RTSP, RTMP, HTTP, HLS, IGMP.

Транспорт, или транспортный контейнер, или контейнер — это то, как сжатое видео упаковывается в байты для передачи от одного участника к другому (по какому-то протоколу).

Примеры контейнеров: MPEG-TS, RTMP, RTP.

Обратите внимание, что RTMP оказался и в протоколах, и в транспортах. Это потому, что в описании RTMP есть спецификация и того, что должныслать друг другу стороны, чтобы видео потекло (т.е. протокол), и того, какупаковывать видео (т.е. транспорт). Так бывает не всегда. Например в протоколе RTSP видео упаковывается в транспорт RTP.

Кодек — многозначный термин. Здесь он означает способ сжать сырое видео. Разница между кодеком и транспортом в том, что кодек — это про подготовку видео, а транспорт — про передачу видео по протоколу. Видео, сжатое одним кодеком, можно пересылать по разными протоколам и разными транспортами. Большинство видеостриминговых серверов не залезают глубже кодированного видео и оперируют только протоколами и транспортами.

Примеры кодеков: h364, aac, mp3.

Из-за того, что термин многозначный, возникает путаница с названиями. Например, H.264 — это стандарт того, как упаковать поток огромных сырых видеокадров в очень мало > байтов, libx264 — это библиотека для сжатия по этому стандарту, а ещё есть одноимённый софт под Винду, который умеет декодировать h364 и проигрывать его на экране.

Итак, в спецификации HTML5 не описаны протоколы, транспорты и кодеки. Поэтому авторы браузеров сами выбирают, что поддерживать, а под «HTML5-стримингом» подразумевают разные вещи.

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

HLS

HLS — это h364-видео и aac- или mp3-аудио, упакованное в транспорт MPEG-TS. Поток разбивается на сегменты, описанные в m3u8-плейлистах, и раздается по HTTP. HLS поддерживает мультибитрейтные потоки, Live/VOD. Вариант очень простой, но в то же время имеет много деталей, из-за чего на разных устройствах работает по-разному.

Разработали HLS в Эппле, поэтому изначально он работал только в Сафари на Айос и Маке. До сих пор даже Сафари на Винде не умеет играть HLS. Тем не менее, сейчас HLS умеют проигрывать все телевизионные приставки и даже почти все устройства на Андроиде.

Но не всё гладко. Производители сторонних плееров плюнули на стандарт Эппла в части донесения разных аудиодорожек и добавили проигрывание всего что есть в обычном MPEG-TS: mpeg2 video, mpeg2 audio и т. п. Из-за этого приходится отдавать разные форматы плейлистов для разных плееров.

MPEG-DASH

MPEG-DASH — обычно это h364/h365-видео и aac-аудио, упакованное в транспорт mp4, или vp8/vp9, упакованное в WebM, хотя стандарт и не привязан к конкретным кодекам, протоколам и транспортам. Как и в HLS, поток может разбиваться на сегменты, но это необязательно. Вместо плейлистов — MPD-манифест в XML.

MPEG-DASH во многом похож на HLS. Возможно, он даже популярнее, ведь такие гиганты как Ютуб и Нетфликс уже несколько лет используют его как основной способ раздачи контента.

MPEG-DASH хорош тем, что в большинстве браузеров работает нативно, через MSE (о том, что это такое, — чуть ниже). Для него даже нет реализации на Флеше — это честный, бескомпромиссный HTML5.

Определенно, MPEG-DASH — самый настоящий HTML5-стриминг, за ним будущее.

MSE

Когда стало ясно, что Флеш всё-таки умрёт (после сотни ложных похорон), ребром встал вопрос о том, что придёт ему на смену. Хорошо было бы получить в браузерах возможность проигрывать видео по качеству и удобству близко к тому, что умеет Флеш (а он это делает всё-таки хорошо).

Во Флеше давно появился очень удобный механизм для универсального проигрывания разных вариантов — appendBytes. Суть в том, что пользовательский код сам как хочет скачивает кадры сжатого видео, упаковывает в оговоренный контейнер (с Флешем это flv) и засовывает в видеопроигрыватель. Т. е. протокол и транспорт реализуются в пользовательском коде, запускаемом в браузере.

MSE (Media Sources Extensions) — это расширение спецификации HTML5, которое позволяет делать то же, что делает appendBytes во Флеше. К сожалению, MSE намного сложнее как в понимании, так и в реализации.

MPEG-DASH, созданный на его базе, ещё хитрее, поэтому работать с ними то ещё удовольствие: тонны XML, парсинг бинарных контейнеров в Яваскрипте, непродуманные на этапе дизайна вопросы нарезки на сегменты — всё как мы любим, всё что нужно для единой безглючной реализации во всех браузерах.

Интересно, что MSE работает не только с MPEG-DASH, но и с HLS. Существует реализация hls.js, которая скачивает HLS-плейлисты, скачивает MPEG-TS-сегменты, перепаковывает их в нужный для MSE формат и играет через MSE. Эппл даже сделала шаг в сторону совместимости с MPEG-DASH — использование mp4-контейнеров в HLS.

К концу 2017 года Флеш скорее всего умрёт окончательно, и уже сегодня можно смело начинать проект с MPEG-DASH.

WebRTC

Во Флеше была сделана годная попытка в одной технологии реализовать и риалтайм-общение, и массовый броадкастинг. К сожалению, в HTML5 так не вышло. Для просмотра трансляций у нас есть MSE, а для видеозвонков — WebRTC.

WebRTC — это SIP в браузере: способ организовать аудио- и видеоканал и канал данных между двумя браузерами при посредничестве сервера.

Технология не предназначена для стриминга, но в принципе может и его, так что было бы неправильно забыть про него. WebRTC тоже считается HTML5, потому что вроде как ничего кроме Яваскрипта в браузере не требует. Зато требует наличия последних версий обоих популярных браузеров, а с Эджем пока вообще не совместимо.

Путаницу в понимании WebRTC вносит его использование в торрент-доставке телевидения. Суть в том, что браузеры через WebRTC организуют сеть каналов данных, а дальше по этой сети раздаются HLS- или MSE-сегменты видео, а проигрывание происходит через Флеш или MSE. Т.е. WebRTC — для доставки, MSE — для проигрывания. Важно не путать это с использованием WebRTC для проигрывания видео.

Так что там с mp4-стримингом?

Любой современный браузер скорее всего сможет по протоколу HTTP запросить файл, упакованный в транспорт mp4 и содержащий внутри видео, сжатое кодеком h364/aac. И даже попытаться проиграть его. Это самый удобный, понятный и стандартный вариант проигрывания файлов. Лежит себе файлик на диске, nginx его отдает. Код, проигрывающий mp4 в браузерах достаточно хорош. Например, он умеет даже скачивать куски видео по необходимости (в отличие от Флеш-плеера, который скачивает видео целиком).

Вокруг h364 сложилось немало шумихи по поводу его «закрытости» и «несвободности». Так что есть «открытая» альтернатива, которую форсит Гугл — видеокодеки vp8 и vp9, упакованные в транспорт WebM. WebM — это подмножество транспорта mkv (a.k.a. Матрёшка), который очень похож на mp4 по сути, но отличается от него своей «бинарностью».

Именно отсюда растут ноги у такого явления как «mp4-стриминг», который устроен как WebM. Дело в том что в обычном mp4 в самом начале указывается размер всего контейнера. Поэтому, если мы хотим отдать по обычному mp4 прямой эфир, у нас ничего не получится. А чтобы всё-таки получилось и можно было создавать mp4 без фиксированного конца, придуман следующий ход: сначала пишется mp4 без кадров, а потом в конце подписываются блоками по несколько секунд фрагменты с кадрами. Это называется mp4 fragmented, или mp4 streaming.

По сути это никакой не стриминг, а костыль, позволяющий создать его видимость. Mp4 — отличный формат для скачивания видео, но негодный для стриминга, так что про него можно просто забыть и никогда не использовать термин «mp4-стриминг».

Выводы

  • Хорошие варианты HTML5-стриминга: MPEG-DASH и HLS. Они подходят и для мобильных устройств, и для ПК, и для приставок.
  • Флеш всё-таки умрет, и MSE уже сейчас занимает его место.
  • WebRTC — HTML5 технология, в первую очередь, для общения, а не для телевизионного вещания.
  • Не приносите в веб старые кодеки и не пытайтесь доставлять mp2video и mp2audio по HLS, даже если ваш плеер это умеет.
  • Никогда не говорите «mp4 стриминг». Пожалуйста.

Это может быть интересно:

  1. How to make IPTV service from scratch
  2. Флюссоник DVR

Только 360p на Youtube с HTML5

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

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

С Flask все в порядке, если вы всегда получаете его прямо с сайта Adobe, никогда не загружайте его просто потому, что на экране что-то написано, нажмите здесь, чтобы обновить его, скорее всего, вы получите установку вредоносного ПО. Проверьте на сайте Adobe перед обновлением и всегда используйте их сайт, чтобы сделать это.

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

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

Насколько мне известно, Mozilla (Firefox), Adobe (Firefox) и Microsoft все работают и тесно общаются, чтобы идти в ногу с современными тенденциями потоковой передачи видео и звука в Интернете, чтобы извлечь из них максимум возможного. Причина, как я указал для пакета кодеков вместо Flash, в основном является альтернативой использованию Flash. Кодеки в HTML5 могут работать медленно, если внутренняя шина компьютера не работает и дает постоянный поток изображений, но звук пропадает каждые несколько секунд. Причиной этого может быть низкая скорость сети или интенсивное использование беспроводной сети в доме, телефонах, других ноутбуках, планшетах и ​​т. Д. Использование фиксированного кодека уменьшит нагрузку на основной интернет-поток, обеспечивая лучший прием как звука, так и изображения. без отставания или распада.

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

Видеокодеков для HTML 5

H.264, WebM, Ogg, три кодека реализованы для тега

Бесплатный видеоформат Ogg Theora теперь распознается Firefox, Opera и Chrome.
Это не Internet Explorer, но пользователь может добавить его, установив кодек в систему. Есть также плагины для IE, такие как VLC.

WebM на самом деле призван заменить его, предлагая лучшее качество изображения. Он распознается всеми браузерами, кроме Internet Explorer, только в том случае, если пользователь сам устанавливает кодек на свой компьютер.

H.264 распознается IE, Chrome и Safari, но не Firefox или Opera из-за лицензионных сборов.

WebM и Ogg не подлежат никакому патенту в отличие от H.264. Фактически, Google подписал соглашение с держателями патентов на H.264, чтобы никто не мог быть привлечен к суду (в США.S.) для патентов, возможно, связанных с VP8, видеоформатом WebM.

Даже если участвующие фирмы (в основном Google, Apple и Mozilla) не достигли соглашения по стандартному формату видео для HTML 5, ogg распознается по тегу видео, и его очень просто использовать с таким кодом:

    

Это файл, хранящийся локально на сайте.

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

    

Это лучше заменяет весь код флеш-плеера и позволяет использовать дополнительные функции с этим тегом. Например:

   

Всегда можно поместить код во flash вместо сообщения между тегами, поскольку браузер не поддерживает HTML 5.Это можно делать динамически.

В руководстве Theora содержится дополнительная информация об использовании формата. Theora является уровнем кодека H.263 и значительно превосходит по качеству новые форматы.

Сайт и инструменты для Ogg

Эти сайты размещают видео в формате Ogg: Dailymotion, Archive.org.

Google особенно обеспокоен кодеком, связанным с тегом video , поскольку он содержит основную платформу для видео, Youtube. Который имеет раздел для HTML 5 в подкаталоге / html5 /.
Поэтому в 2010 году компания купила кодек VP8 компании On2 Technologies и сделала его открытым и бесплатным для использования.

Кодек имеет контейнер Matroska, например Ogg имеет Theora. Кодек для тега

Плагины

доступны для IE и Safari, другие браузеры не нуждаются в этом больше, чем программное обеспечение, такое как VLC и Miro.

Пример кода:

   

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

Было обнаружено небольшое преимущество перед WebM по качеству изображения, но оно будет зависеть больше от реализации, чем от формата, и реализация со временем может улучшиться.

Его преемник H.265 защищен множеством патентов, которые затрудняют популяризацию.

В качестве альтернативы H.265 компания Cisco, которая уже разрешила использование H.264 без лицензионных отчислений, запустила новый кодек с участием специалистов по кодированию видео и юристов, чтобы избежать проблем с патентами.Thor полностью бесплатен и имеет открытый исходный код.
Cisco в этом случае должна использовать значительные ресурсы для предотвращения повторного использования уже реализованных принципов, что ставит под сомнение реальную полезность патентов!

  • Тор. На GitHub. Используйте команду thorenc для кодирования видео в новом формате.

© 2010-2015 Xul.fr

Какие форматы мне нужны для видео HTML5?

Когда дело доходит до встраивания видеоконтента в Интернет, тег в HTML5 — это колени пчелы.Он позволяет воспроизводить видео в собственном формате во всех современных браузерах (включая мобильные!), А это означает, что большинству зрителей не понадобится такой плагин, как Flash. Мы рассмотрели ту же тему еще в 2010 году, но с тех пор многое изменилось как в браузерах, так и в устройствах. Хотя HTML5 и видеоэлементы прошли долгий путь с 2010 года, многие из них по-прежнему остаются непростыми для издателей. По-прежнему нет серебряной пули кодека, который поддерживают все браузеры, а улучшение мобильных устройств означает разные уровни поддержки видео.В этом посте мы рассмотрим, какие выходы лучше всего подходят для Интернета, поддержки мобильных устройств и коснемся рекомендаций по битрейту. В конечном итоге лучший результат для вас зависит от ваших потребностей, но вот базовое руководство по началу работы с видео HTML5.

Подождите … почему не использовать Flash?

=====================

Одна из лучших особенностей видео HTML5 заключается в том, что (большинству) пользователей не нужно использовать Flash для воспроизведения. . Вы можете спросить: «Что такого плохого во Flash? Кажется, буквально вчера на нем строились целые сайты!» На то есть масса причин, но в конечном итоге все сводится к лучшему опыту пользователя.Видео в формате HTML5 загружается быстрее, чем плагин Flash, и использует меньше системных ресурсов, кроме того, его гораздо проще использовать с точки зрения веб-разработчика. Мобильные устройства также имеют разрозненную поддержку Flash, но ни iOS, ни Android (начиная с версии 4.1) не поддерживают ее. При этом Flash по-прежнему играет важную роль в Интернете. Многие старые браузеры не поддерживают видео в формате HTML5, поэтому для их поддержки вам потребуется резервное копирование Flash. Большинство видеоплееров HTML5 (например, Video.js) справятся с этим за вас. С этого момента мы будем работать в предположении, что стараемся по возможности избегать загрузки резервной версии Flash.

Какие форматы?

=============

Существуют три формата видео, которые изначально работают в современных браузерах. К сожалению, ни один из них не работает во всех браузерах, поэтому вам понадобится комбинация как минимум двух для полноценной поддержки видео HTML5.

Минимум

——-

Как минимум, вам понадобится файл .mp4 с H.264 + AAC (или MP3). H.264 изначально поддерживается большинством браузеров и может воспроизводиться с использованием резервной флэш-памяти в браузерах, где это не так.H.264 High Profile обеспечивает высочайшее качество, но Baseline имеет наибольшую поддержку, особенно среди мобильных устройств (подробнее об этом позже). Поддерживаемые настольные браузеры

  • Safari 3.1+
  • Chrome 3.0+
  • Internet Explorer 9.0+
  • Firefox 21, 24 (по умолчанию отключено в 24, зависит от системного кодека)

Поддерживаемые мобильные браузеры

  • Браузер Android 3.0+
  • Safari (iOS) 3.1+
  • Firefox (Android) 17.0+
  • Internet Explorer (Windows Phone) 9.0+

Несколько форматов

—————-

Если вы хотите обеспечить собственное воспроизведение в максимально возможном количестве браузеров , вам также необходимо будет включить представление OGV (Ogg Theora + Vorbis) или WebM (VP8 + Vorbis). Вы можете включить оба для максимального охвата, но большинство браузеров, поддерживающих один, будут поддерживать другой. Поддерживаемые настольные браузеры WebM

  • Chrome 6.0+
  • Firefox 4.0+
  • Opera 10.60+

Ogg

  • Chrome 3.0+
  • Firefox 3.5+
  • Opera 10.50+

Поддерживаемые мобильные браузеры

  • (оба) Браузер Android 2.3+

В 2010 году Ogg поддерживалось в 44,64% браузеров, а WebM — только в 9,35%. В 2013 году их поддержка практически идентична. По состоянию на декабрь 2012 года Ogg поддерживается в 58,85% браузеров, а WebM поддерживается в 58.03%. Если вы собираетесь выбирать между двумя, мы предлагаем использовать WebM. Еще в 2010 году мы заявили, что думаем, что WebM — это будущее открытого видео, и по-прежнему считаем, что это так. WebM — лучший кодек, у него большой импульс, поэтому мы думаем, что он будет только расти. Рекомендация : MP4 + WebM (или MP4 + WebM + Ogg для максимального охвата)

А как насчет мобильных устройств?

—————————

Как и на рабочем столе, нет единого профиля, который работал бы на каждом мобильном устройстве.Большинство современных устройств поддерживают H.264, но, к сожалению, существует множество вариантов поддерживаемого ими профиля H.264. К счастью, вы можете покрыть большинство современных мобильных устройств всего несколькими выходами. Основные различия между устройствами — это поддерживаемое разрешение и профиль H.264. Более высокие профили (основной и высокий) приведут к лучшему качеству при определенном размере файла, но их труднее декодировать, а это означает, что старые устройства не могут их поддерживать. Базовый уровень — самый простой, но он поддерживается большинством устройств.

  1. Большинство современных мобильных устройств поддерживают MP4 / H.264. Это включает в себя всю серию iOS (iPhone, iPod, iPad, Apple TV и т. Д.), Большинство устройств Android, Windows Phone 7, современные телефоны Blackberry и т. Д. Примечание , что вы можете использовать один и тот же файл как для современных мобильных устройств, так и для web, поэтому, если вы хотите уменьшить количество версий, вы можете обойтись только одной. Если вы хотите поддерживать старые мобильные устройства (в терминах iPhone, 3GS и старше), вам нужно придерживаться профиля Baseline. Новейшие устройства (например, iPhone 4S и 5) поддерживают High, но более старые поколения (например, iPhone 4) поддерживают только до Main.
  2. Используйте 3GP / MPEG4 для гораздо более старых мобильных устройств. Большинство Blackberry и некоторые устройства Android также поддерживают 3GP, и 3GP обычно даже воспроизводится на iPhone / iPod (поскольку iOS воспроизводит MP4 / MPEG-4, а 3GP — это лишь подмножество MP4).
  3. Современные устройства Android (Android 2.3.3+) поддерживают WebM.

Рекомендация: Минимум, MP4, 640 × 480 или 480 × 360 для самой широкой поддержки. Максимально четыре версии MP4 (480 × 360, 640 × 480, 720p + основной и 1080p + высокий профиль) плюс одна версия 3GP (320 × 240).В зависимости от вашей аудитории, вам, скорее всего, понравится набор выходных данных где-то посередине, но см. Наш предыдущий пост для конкретных настроек кодирования.

А как насчет нескольких битрейтов?

Предоставляя несколько воспроизведений большого видео с разными размерами и битрейтом, вы можете поддерживать пользователей с различной скоростью подключения к Интернету. Если вы предоставляете видео в формате HD (или близком к нему), вы, вероятно, захотите предоставить несколько вариантов. Скажем, самая качественная версия видео, которую вы предоставляете, — 1280×720, вы также можете предоставить версию 640×480.Если максимальное качество составляет 1920×1080, вы можете увеличить количество воспроизведений, чтобы также обеспечить 640×480 и 1280×720. Имейте в виду, что элемент видео HTML5 ничего не знает о выборе битрейта, необходимого вашему пользователю, поэтому вам нужно либо написать свою собственную логику, чтобы угадать, какое представление лучше, либо позволить пользователю выбрать. Как правило, мы предлагаем предоставить пользователю представление на более низком уровне, а затем позволить ему выбрать версию более высокого качества, если они этого захотят.

TL; DR

  1. Минимум: MP4 / H.264 + WebM. При необходимости представление MP4 используется в качестве резервной копии Flash.
  2. Для мобильных устройств тот же MP4 сверху (с использованием профиля Baseline) займет у вас много времени. Использование 2-3 воспроизведений с разными разрешениями и профилями обеспечит более широкую совместимость устройств и качество видео.

Рекомендации Вот несколько предлагаемых конфигураций. Zencoder поддерживает все эти форматы, и если вам интересно, как создать оптимальные выходные профили с помощью Zencoder, просто свяжитесь с нами.Если вы хотите увидеть несколько примеров запросов API для HTML5 и конкретных устройств, ознакомьтесь с шаблонами в конструкторе запросов

  1. Просто запустите его
    • HTML5, Flash, Mobile: MP4 / H.264, базовый профиль, 640 × 480
    • HTML5: WebM
  2. Немного округлите
    • HTML5, Flash: MP4 / H.264, высокий профиль
    • HTML5: WebM
    • для мобильных устройств: MP4 / H.264, базовый профиль, 480 × 360 или 640 × 480
  3. Хорошо поддерживает все
    • HTML5, Flash: MP4 / H.264, высокий профиль
    • HTML5: WebM
    • HTML5: Ogg
    • Мобильный: MP4 / H.264, базовый профиль, 480 × 360, для старых мобильных устройств
    • Мобильный: MP4 / H.264, основной профиль, 1280 × 720, для старых устройств iOS (iPhone 4 и более старых iPad / Apple TV). Новейшие устройства (iPhone 5 и т. Д.) Могут поддерживать воспроизведение высокого профиля рабочего стола.
    • Мобильный: 3GP / MPEG4, 320 × 240 и / или 177 × 144, для не смартфонов *

* Выход 3GP в настоящее время находится в стадии бета-тестирования в Zencoder.Свяжитесь с нами, чтобы попробовать.

html — поддержка видеокодека HTML5

Спецификация не требует определенных кодеков.

Долгое время между производителями браузеров существовал сильный разрыв. Firefox не будет реализовывать H.264 из-за проблем с патентами. Apple не будет внедрять Ogg Theora из-за опасений по поводу отсутствия аппаратной реализации и проблем с пропускной способностью, а также из-за некоторых неопределенных опасений по поводу патентов на подводные лодки. Google сказал, что они не будут кодировать видео YouTube в Ogg Theora из-за проблем с качеством и пропускной способностью, хотя они реализовали как H.264 и Ogg Theora в Chrome. Я считаю, что Opera также была обеспокоена патентами H.264, а Microsoft была за H.264 и против Theora.

Затем Google купил On2 и создал WebM, спецификацию, включающую видео VP8 и аудио Ogg Vorbis в контейнере Matroska. Firefox, Chrome и Opera — все привержены поддержке WebM. Microsoft и Apple еще не приняли его, хотя Microsoft заявила, что они будут поддерживать видео VP8, «когда пользователь установит кодек VP8». Это похоже на ситуацию, аналогичную ситуации в Safari; вы можете установить плагины QuickTime для поддержки других кодеков, таких как Ogg Theora или VP8 / WebM, но он не поддерживает их из коробки.

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

Вероятный ответ — какое-то время не будет одного стандартного кодека.Лучший способ получить видео, которое будет воспроизводиться повсюду, — это закодировать в Ogg Theora и H.264 и использовать два элемента для ссылки на них. Поскольку браузеры все больше поддерживают WebM (Firefox 4, Chrome 6), вы, вероятно, захотите перейти на кодирование как в H.264, так и в WebM. Теперь вы можете начать кодирование всех трех, но это немного избыточно, поскольку большинство браузеров, поддерживающих WebM, также поддерживают Ogg Theora.

html — атрибут кодеков видеокодеков html5

Кодек Параметр указан в RFC 6381.В частности, значение значений avc1 и mp4a см. В разделе 3.3.

В случае avc1.4D401E , avc1 обозначает видео H.264, за которым следует точка и три двухзначных шестнадцатеричных числа, определенных стандартом H.264:

  1. profile_idc
  2. — байт, содержащий флаги constraint_set (в настоящее время constraint_set0_flag с по constraint_set5_flag и reserved_zero_2bits )
  3. level_idc

Некоторые примеры:

  • avc1.42E01E : ограниченный базовый профиль H.264, уровень 3
  • avc1.4D401E : H.264, основной профиль уровня 3
  • avc1.64001E : H.264, высокий уровень профиля 3

Это также второй, третий и четвертый байты набора параметров последовательности и окна конфигурации AVC в файле MP4. Вы можете сбросить эти байты с помощью такой программы, как mp4file : mp4file --dump movie.mp4 . Найдите поле avcC (конфигурация AVC) и шестнадцатеричные значения для AVCProfileIndication , profile_compatibility и AVCLevelIndication .

Что касается mp4a.40.2 , mp4a обозначает звук в формате MPEG-4. За ним следует точка и шестнадцатеричное значение ObjectTypeIndication ( objectTypeId в выходных данных mp4file ), которые можно найти на сайте регистрации MPEG4. Если это шестнадцатеричное значение — 40 (ISO / IEC 14496-3 Audio), за ним следует другая точка и десятичный тип аудиообъекта. Они перечислены в стандарте ISO / IEC 14496-3 и в Википедии и соответствуют первым 5 битам DecoderSpecificInfo ( decSpecificInfo ) (если эти биты не равны 31, и в этом случае добавьте 32 к следующим 6 битам. ). mp4a.40.2 обозначает аудио AAC LC, которое обычно используется с видео H.264 HTML5.

Например, codecs = "avc1.42E01E, mp4a.40.2" будет правильным для фильма ниже:

  $ mp4file --dump movie.mp4
...
    введите avcC (moov.trak.mdia.minf.stbl.stsd.avc1.avcC) ◀ ━━ avc1
     configurationVersion = 1 (0x01)
     AVCProfileIndication = 66 (0x42) ◀ ━━ 42
     profile_compatibility = 224 (0xe0) ◀ ━━ E0
     AVCLevelIndication = 30 (0x1e) ◀ ━━ 1E
...
    введите esds (moov.trak.mdia.minf.stbl.stsd.mp4a.esds) ◀ ━━ mp4a
     версия = 0 (0x00)
     флаги = 0 (0x000000)
     ESID = 2 (0x0002)
     streamDependenceFlag = 0 (0x0) <1 бит>
     URLFlag = 0 (0x0) <1 бит>
     OCRstreamFlag = 0 (0x0) <1 бит>
     streamPriority = 0 (0x00) <5 бит>
     decConfigDescr
      objectTypeId = 64 (0x40) ◀ ━━ 40
      streamType = 5 (0x05) <6 бит>
      upStream = 0 (0x0) <1 бит>
      зарезервировано = 1 (0x1) <1 бит>
      bufferSizeDB = 0 (0x000000) <24 бита>
      maxBitrate = 78267 (0x000131bb)
      avgBitrate = 78267 (0x000131bb)
      decSpecificInfo
       info = <2 байта> 11 90 |.. | ◀ ━━ 2 (первые 5 бит в десятичном виде)
...
  

Как добавить недостающую поддержку видео HTML5 в ваш браузер

Когда вы посмотрите на поддержку видео HTML5 в пяти самых популярных веб-браузерах, вы заметите, что нет ни одного браузера, поддерживающего два формата WebM и H.264. В зависимости от выбора браузера вы получите либо один, либо другой, но не оба.

Проблемы возникнут у пользователей Интернета, когда в Интернете возрастет признание и использование видео в формате HTML5.На данный момент явным победителем является Adobe со своей технологией Flash, поскольку она используется в качестве запасного варианта на многих сайтах. Распространенное заблуждение связано с H.264. Многие пользователи считают, что он может заменить Flash в Интернете. Однако это невозможно, учитывая, что H.264 — это видеокодек, а Flash Player — среда выполнения мультимедиа. Видео, закодированные в H.264, необходимо загружать в проигрыватель, например Flash в Интернете или настольный видеоплеер.

Независимо от этого, по-прежнему верно, что Flash используется в качестве запасного варианта, если веб-браузер не поддерживает видеоформат HTML5, встроенный в страницу.Перефразируя: проигрыватели на основе Flash являются наиболее распространенными для воспроизведения содержимого H.264, а Flash может использоваться как резервный вариант, если браузер не поддерживает формат или WebM.

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

WebM Test Video

H.264 Test Video

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

Microsoft недавно опубликовала расширения для веб-браузера Mozilla Firefox и Google Chrome, которые добавляют в браузер поддержку H.264. Следует отметить, что расширение будет работать только под Windows 7, предыдущие операционные системы несовместимы.

Расширение HTML5 проигрывателя Windows Media для Chrome [загрузить]
Расширение HTML5 для подключаемого модуля Windows Media Player Firefox [загрузить]

Google, с другой стороны, создал подключаемый модуль для Internet Explorer 9, который добавляет WebM в веб-браузер.

WebM Video для Microsoft Internet Explorer 9 (предварительная версия) [загрузить]

Вместо поддержки обоих кодеков в своем веб-браузере Microsoft и Google приняли решение создавать плагины для браузеров друг друга, чтобы добавить поддержку видеокодеков, которые они благосклонность и поддержка.

Некоторое время назад Microsoft объявила, что Internet Explorer 9 будет поддерживать кодек VP8 в Windows 7, если он был установлен в пользовательской системе.

Сообщите нам в комментариях, успешно ли вы загрузили кодек VP8 и впоследствии смогли воспроизвести видео WebM в Internet Explorer 9.

Объявление

1. Элементы аудио и видео HTML5: по умолчанию

Болтовня аудио- и видеофайлов и элемент источника в
Деталь

Говоря о типах медиафайлов, мы действительно говорим о двух
отдельные компоненты: программное обеспечение, используемое для кодирования и декодирования аудио или
видеопоток (кодек , сокращение от
компрессор-декомпрессор или
кодер-декодер ), и
контейнер , который представляет собой формат оболочки, содержащий
медиапотоки и информация о том, как данные и метаданные
сосуществовать.Примером контейнера является Ogg с открытым исходным кодом (от
Xiph.Org), а примером кодека является VP8, а
с потерями формата сжатия видео от On2 (и Google).
Технически кодек можно использовать с множеством разных контейнеров, и
контейнеры могут содержать множество различных кодеков, но мы склонны думать о парах
контейнеров / кодеков, когда речь идет о поддержке браузером.

Аудиофайлы — это контейнеры, содержащие один тип мультимедийных данных,
аудиопоток, но видеофайлы обычно содержат два разных медиапотока:
потоки видео- и аудиоданных.Кроме того, контейнеры могут также
поддерживать субтитры и подписи, а также информацию, чтобы все
data отслеживает синхронно.

Аудиокодеки / контейнеры HTML5 и сжатие без потерь и сжатие с потерями

Так же, как с контейнерами изображений, такими как JPEG и PNG, аудио и
видеокодеки могут быть без потерь или
с потерями . Видео- или аудиокодек без потерь сохраняет
все данные исходного медиафайла после его сжатия.Потерянный
методы сжатия, однако, теряют данные каждый раз, когда данные
закодировано.

Хотя у большинства из нас есть пропускная способность для загрузки изображений без потерь
таких как PNG, видео без потерь выходит за рамки даже самых щедрых
широкополосный доступ, поэтому для видео HTML5 поддерживаются только кодеки.
кодеки с потерями. Аудио, однако, другое. Элемент audio поддерживает несжатый звук.
файлы, а также аудиофайлы с потерями и без потерь
кодеки.

Одним из наиболее старых и знакомых форматов аудиофайлов является
Waveform Audio File Format (WAVE), широко известный как WAV для
расширения даются аудиофайлы ( .wav ).
Хотя файлы WAV могут поддерживать сжатие, большинство файлов WAV содержат звук.
в несжатом представлении импульсно-кодовой модуляции (ИКМ), которое
означает, что файлы обычно довольно большие.

Safari, Chrome, Firefox и Opera поддерживают несжатый WAV
файлы.Однако размер файлов WAV не позволяет им быть
популярный формат аудиофайлов HTML5.

Другой широко известный и распространенный формат аудиофайлов — это MPEG-1.
Audio Layer 3, широко известный как MP3 из-за данного расширения
Файлы MP3 (.mp3). Это не контейнер и не кодек, как мы знаем,
вещи. Вместо этого это аудиофайл со сжатием с потерями.
метаданные вставлены стратегически.

В настоящее время единственный аудиоформат, поддерживаемый Microsoft в
IE9 и выше по умолчанию — MP3.Кроме того, формат также
поддерживается Safari и Chrome. Однако Firefox и Opera отказались
с самого начала поддерживать MP3 из-за проблем с патентами и
требования по роялти.

MP3 поддерживается в большинстве операционных систем, а MP3
файлы являются популярным резервным вариантом, когда они связаны на странице. Хотя
файл не будет воспроизводиться изначально в браузере, нажатие на ссылку приведет к
запускать какой-либо медиаплеер в большинстве сред:

 <цикл автовоспроизведения аудио>
      
      
      

Резервный вариант аудиофайла

Примечание

Safari требует установки QuickTime и поддерживает
любые типы носителей, которые QuickTime изначально поддерживает в системе.
Поскольку QuickTime поддерживает MP3 и WAV, Safari поддерживает MP3 и
WAV.

Когда мультимедийные элементы были впервые добавлены в HTML5,
спецификация включала требование, чтобы все пользовательские агенты поддерживали
Контейнер с открытым исходным кодом Ogg.Контейнер Ogg был разработан
Фонд Xiph.Org, который также разработал соответствующий аудиокодек,
называется Ворбис. Кодек Vorbis — это метод сжатия с потерями, который
бесплатно для всех и, по словам сотрудников
Xiph.Org, свободный от патентов (насколько они определены). В
надеюсь, что в то время, когда элементы СМИ были впервые определены, было то, что это
Башни болтовни, которая есть у нас для аудио и видео, можно избежать, если
обеспечение поддержки одного контейнера и одного кодека, ни один из которых не
обременены патентами или требованиями роялти.

Примечание

Узнайте больше о контейнере / кодеке Ogg Vorbis на веб-сайте
официальный сайт поддержки http://www.vorbis.com/.

Apple и другие компании, однако, возражали против Ogg Vorbis
требования из-за отсутствия поддержки оборудования, их уверенность в том, что
Кодек Vorbis уступал другим кодекам, и проблемы потенциально
скрытые патенты (известные как подводные патенты )
относящиеся к кодеку.

Хотя Xiph.Org Foundation приложил все усилия для поиска
среди патентов, чтобы гарантировать, что Vorbis свободен от патентов, нет возможности
гарантировать это, если это не будет оспорено в суде. Это
Уловка-22 без какого-либо жизнеспособного решения, поэтому раздел в
спецификация, требовавшая поддержки Ogg Vorbis, была удалена.

Хотя Ogg Vorbis больше не является обязательным требованием, несколько браузеров
поддерживаю это. Firefox, Opera и Chrome поддерживают Ogg Vorbis, а
Safari и IE этого не делают.

Кодек сжатия с потерями Advanced Audio Coding (AAC) был
изначально считался преемником MP3, но не получил
широкое признание. Он томился, малоизвестный, пока Apple не выбрала его
в качестве формата файлов в его магазине iTunes. Контейнер это
наиболее часто используется контейнер MPEG-4 Part 14, известный как MP4 для
.mp4 расширение файла. Хотя большинство из нас полагает, что файлы MP4
видео, они могут быть только аудио. Фактически, еще одно распространенное расширение файла
используется с аудиофайлами MP4.m4a, опять же в первую очередь из-за Apple
влиять. Safari, Chrome и IE поддерживают MPEG-4 AAC.

WebM — контейнер на основе профиля для Matroska
Мультимедийный контейнер. WebM с самого начала разрабатывался как
без патентов и роялти. Google сыграл важную роль в формировании
организация, стоящая за WebM, но отказалась от всех без исключения патентных претензий
в контейнер.

Поддержка кодеков в WebM довольно проста: WebM поддерживает только Vorbis
для аудио и VP8 для видео (о чем я расскажу в следующем разделе).Причины такой простой поддержки кодеков приведены в FAQ по адресу
Веб-сайт WebM:

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

WebM поддерживается Chrome, Firefox и Opera. Нет
в настоящее время поддерживается IE и Safari. Однако люди могут гарантировать, что
Файлы WebM работают в браузере IE9 при установке подключаемого модуля WebM.
для IE9 (находится на http://tools.google.com/dlpage/webmmf). Однако, поскольку
мы, как авторы, дизайнеры и разработчики страниц, не можем быть уверены, что
Плагин WebM установлен, необходимо обеспечить поддержку браузеров
которые в настоящее время не поддерживают WebM.

Примечание

Люди обычно думают, что WebM — это исключительно видеофайл.
формат. Однако вы можете создать файл WebM, состоящий только из
один поток данных Vorbis, и он работает в аудиоэлементе. В
source element’s type setting is
аудио / webm . Узнайте больше о WebM на
веб-сайт проекта http://www.webmproject.org/.

Я рассмотрел популярные типы аудио- и видеофайлов, но как сделать
браузеры знают, является ли MP4 аудиофайлом или видеофайлом? Если это
файл — это Ogg, а это WebM? Ну, они могут открыть файл и
убедитесь сами.Или мы можем предоставить информацию прямо в
медиа-элемент.

Предоставление информации о кодеке в атрибуте type

Ранее я заявлял, что файл MP4 может быть аудио или видео. Так как
знает ли браузер или другое приложение, какой это тип файла?
Или какой кодек используется в контейнере MP4? Собственно, какой кодек
используется в любом из контейнеров?

Один из подходов — использовать популярное и уникальное расширение файла, например
в качестве.m4a, а затем добавьте MIME-тип на свой веб-сервер для расширения.
Вы можете добавить тип MIME непосредственно в файл mime.types для сервера Apache или
вы можете добавить в каталог MIME-тип. htaccess файл (при условии, что вы используете
Linux):

 AddType audio / mp4 m4a.
Добавить тип видео / ogg ogg oga
AddType video / webm webm 

Вы также должны использовать type
атрибут в исходном элементе. Атрибут типа предоставляет информацию для
браузеры и другие пользовательские агенты о контейнере и кодеке, а также
как тип файла, указанный в src
атрибут.Синтаксис для типа
Атрибут — это тип файла, за которым следует тип контейнера. В
Пример 1-4,
контейнер и тип медиафайла для каждого аудиофайла добавляются к каждому из
четыре исходных элементов.

Пример 1-4. Веб-страница HTML5 со встроенным аудиоэлементом с четырьмя отдельными
типы аудио, каждый со своим конкретным типом MIME, указанным в
Атрибут типа исходного элемента

 

 Аудио 




<управление звуком>
   
   
   

 

Конечно, последний файл, WAV, никогда не воспроизводится, по крайней мере
не в наших целевых браузерах. IE, Chrome и Safari забирают MP3,
в то время как Firefox и Opera забирают файл Ogg. Каждый браузер проходит
исходные элементы до тех пор, пока не найдет файл, который можно воспроизвести, а затем остановится.
Как минимум, вы можете предоставить аудиофайл в формате MP3 и Ogg или WebM, который
охватывает все пять целевых браузеров, помимо iOS и
Android.

Таблица 1-2
содержит сводку различных аудиокодеков и контейнеров
охвачены, а также поддержка современных браузеров, общие расширения файлов,
и тип установки .

Таблица 1-2. Поддержка аудиоконтейнера / кодека в популярном современном браузере
версии

Vorbis

Контейнер / кодек

Тип

Расширение (я)

30

5+

Chrome

Opera 11+

WAV

audio / wav или
аудио / волна

.wav

Нет

Да

Да

Да

Да

MP3

MP3

Да

Нет

Да

Да

Нет

Огг
Vorbis

audio / ogg

.ogg
.oga

Нет

Да

Нет

Да

Да

MPEG-4
AAC

audio / mp4

.m4a

Да

Нет

Да

Да

аудио / webm

.webm

Нет

Да

Нет

Да

Да

HTML5 Video Element Codecs

Как указано в разделе I / Контейнеры видео файлы слишком большие
для обслуживания в любом другом формате, кроме сжатого с потерями. Как и в случае с
аудиокодеки, ни один видеокодек не работает во всех браузерах.

Один из самых популярных видеокодеков с потерями — MPEG-4 Part 10,
широко известный как H.264. H.264 — популярный формат высокого качества.
это распространено в Интернете и поддерживается в YouTube и iTunes. Это
также является одним из трех обязательных кодеков, поддерживаемых Blu-Ray
игроков. Это зрелый кодек, впервые стандартизированный группой MPEG в
2003. H.264 также является спорным выбором из-за имеющихся патентов.
на кодеке организации MPEG-LA. Хотя видео файлы закодированы
в H.264, которые распространяются бесплатно, не подлежат
роялти, инструменты, кодирующие или декодирующие H.264 действительно должны платить роялти.
Стоимость этих лицензионных отчислений обычно перекладывается на инструмент.
покупатель.

Видеокодек H.264 комбинируется с AAC или MP3
аудиокодек в контейнере MPEG-4. Эта комбинация обычно
известный как MP4, и файлы обычно имеют расширение .mp4. Вы будете
также см. файлы с расширением .m4v для H.264. Apple iTunes использует
.m4v с видео, но они также защищены DRM и
не будет воспроизводиться в видеоэлементах HTML5.

Кодек H.264 — единственный видеокодек, поддерживаемый Microsoft.
для IE. Он также поддерживается Safari. Chrome больше не поддерживает
H.264, а Firefox и Opera никогда не поддерживали его из-за
патентные вопросы.

Firefox, Opera и Chrome поддерживают другой кодек, Theora,
от той же организации (Xiph.Org), которая предоставила контейнер Ogg
и аудиокодек Vorbis, описанный в последнем разделе. Огг Теора
контейнер / кодек изначально был обязательным кодеком и контейнером для
видеоэлементы в HTML5, пока Apple и другие компании не возражали против
ограничение.Однако ни IE, ни Safari не поддерживают Ogg Theora.
есть плагины, которые можно установить, чтобы обеспечить поддержку как в
браузеры.

Note

Xiph.Org предоставляет плагин, который обеспечивает поддержку
Кодеки Theora и Vorbis в QuickTime, что косвенно позволяет
поддержка Safari. Доступ к
плагин по адресу http://www.xiph.org/quicktime/about.html. Другой
плагин OpenCodecs обеспечивает более общую поддержку Ogg
Vorbis, Ogg Theora, WebM и различные другие пары контейнер / кодек Ogg, доступ к которым можно получить по адресу
http: // xiph.org / dshow / downloads /.

Последний видеоконтейнер, о котором я расскажу, — это WebM, который я представил.
в разделе аудиокодеков. В отличие от многих других контейнеров,
WebM поддерживает только один аудиокодек Vorbis и один видеокодек VP8.
VP8 была создана компанией On2, которую позже купила
Google, который быстро открыл исходный код кодека VP8.

WebM поддерживается Chrome, Firefox и Opera. Здесь нет
встроенная поддержка WebM в Safari и IE, но, как упоминалось ранее,
есть подключаемый модуль для поддержки WebM для обоих браузеров.

Поскольку Chrome, Firefox и Opera поддерживают как Ogg Theora, так и
WebM, что вам следует использовать? Ответ: это зависит от обстоятельств.

Оба должны поддерживаться в обозримом будущем.
Сообщество открытого исходного кода, включая Википедию, по-прежнему в основном
поддерживает Ogg Theora, но, поскольку Google использует открытый исходный код VP8, это может измениться
в будущем. VP8 обычно считается лучшим кодеком, чем Theora,
но я никогда не видел особой разницы в качестве, когда дело доходит до видео
размер и оптимизация для Интернета.Впрочем, я не привередливый видеофил,
или.

Обеспечение полной поддержки видеокодеков

Вы не можете предположить, что на ваших читателях веб-страниц установлены плагины
для воспроизведения видео Ogg или WebM в Safari или IE. Чтобы гарантировать, что
видео доступно во всех целевых браузерах, вам необходимо
предоставить как минимум два разных элемента source для вашего видеоэлемента.
Пример 1-5 показывает
Веб-страница HTML5 с элементом видео, содержащим два разных видео
Источники: один в H.264 (необходимо для IE и Safari) и один в WebM
(для Firefox, Opera и Chrome). Кроме того, если вы хотите, чтобы
что браузеры, не поддерживающие HTML5, имеют доступ к видео, вы
также необходимо предоставить запасной вариант. В приведенном ниже примере
запасной вариант — это видео с YouTube. Другой выбор может быть Flash или другой
плагин.

Пример 1-5. Веб-страница HTML5 с видео, которая работает во всех целях
браузеры

 

    Видео о Big Buck Bunny 
   


   <элементы управления видео>
      
      
      
   
 

Рис. 1-2.
показывает видео, воспроизводимое в Chrome, который поддерживает встроенный HTML5
видео. Рисунок 1-3
показывает видео YouTube, воспроизводимое в IE9 с включенным режимом совместимости
включен, имитируя более старую версию IE, не поддерживающую HTML5.
видео.

Примечание

Если вы не знаете, как структурировать резервный контент в
элемент видео для обеспечения доступа к видео во всех пользовательских агентах и
браузеров, рекомендую прочитать статью Крока Камена «Видео для
Все »на http://camendesign.com/code/video_for_everybody.

Таблица 1-3
предоставляет краткое описание трех видеокодеков, которые я рассмотрел в
эта секция.

Таблица 1-3. Поддержка видеоконтейнера / кодека в популярном современном браузере
версии

Контейнер / кодек

Тип

Расширение (я)

30

5+

Chrome

Opera
11+

MP4 + H.264 + AAC

видео / mp4

.mp4,
.m4v

Да

Нет

Да

Нет

Нет

Ogg + Theora 9 ogg
.ogv

Нет

Да

Нет

Да

Да

Рисунок 1-2.Воспроизведение видео в Chrome с поддержкой видео HTML5

Рисунок 1-3. Воспроизведение видео в IE9 в режиме совместимости с запуском
Резервный YouTube

Прежде чем я вернусь к элементам мультимедиа, есть еще один
атрибут, поддерживаемый в источнике
элемент, хотя и редко используется: атрибут media . В
media Атрибут предоставляет предполагаемый медиаисточник
для элемента. Значение по умолчанию: все ,
Это означает, что медиа-файл предназначен для всех медиа-источников.Там
— несколько других допустимых значений, но два из них имеют наибольший смысл.
(кроме все ) для медиаэлементов,
особенно видео, это портативный и
экран . В сочетании с носителями
запросы
в CSS, веб-страница может обслуживать как рабочий стол
и портативные устройства.

Однако мне не очень нравится пытаться заставить одну страницу работать
в двух совершенно разных средах.На многих сайтах есть мобильные
только версия контента, обычно обозначаемая подкаталогом m
настройки (например, http://m.burningbird.net). В
в конце, может быть проще просто предоставить отдельно отформатированный
сайты, особенно с системами управления контентом (CMS), которые обслуживают все
содержимого из базы данных.

Note

Drupal, CMS, которую я использую, имеет специальный модуль под названием Domain Access
(доступно по адресу http://drupal.org/project/domain), что позволяет нам
назначить другую тему, страницу и структуру контента для страниц
подается с
м подобласть.Большинство других инструментов CMS предлагают
что-то сопоставимое.

Аудио / Видео — Проекты Chromium

third_party / blink / renderer / core / html / media / html_media_element. {Cpp, h, idl} — базовый класс медиаэлементов

third_party / blink / renderer / core / html / media /html_audio_element.{cpp,h,idl} — реализация аудиоэлемента

third_party / blink / renderer / core / html / media / html_video_element. {cpp, h, idl} — реализация видеоэлемента

Особенно интересных битов

51 9000 медиа / база / mime_util.cc — определяет поведение canPlayType () и сопоставление расширения файла.

media / blink / buffered_data_source. {cc, h} — Основная реализация источника данных Chromium для конвейера мультимедиа

media / blink / buffered_resource_loader. {cc, h} — Реализует стратегия буферизации скользящего окна (см. ниже)

third_party / blink / public / platform / web_media_player.h — Интерфейс медиаплеера Blink для обеспечения функциональности аудио / видео HTML5

media / blink / webmediaplayer_impl. {cc, h} — основная реализация Chromium из WebMediaPlayer

Как все создается?

WebFrameClient :: createMediaPlayer () — это API для внедрения Blink для создания WebMediaPlayer и передачи его обратно в Blink.Каждый элемент аудио / видео HTML5 попросит устройство для внедрения создать WebMediaPlayer.

Для Chromium это обрабатывается в RenderFrameImpl.

GN Flags

Есть несколько GN-флагов, которые могут изменить поведение реализации аудио / видео HTML5 в Chromium.

ffmpeg_branding

Переопределяет, какую версию FFmpeg использовать.

По умолчанию: $ (брендинг)

Значения:

Chrome — включает дополнительные проприетарные кодеки (MP3 и т. Д.) Для использования с Google Chrome

Chromium — строит набор по умолчанию кодеков

proprietary_codecs

Изменяет список кодеков, поддерживаемых Chromium, что влияет на поведениеи canPlayType ()

По умолчанию: 0 (gyp) / false (gn)

Значения:

0 / false —и canPlayType () предполагают набор кодеков по умолчанию

1 / true —и canPlayType () предполагают, что они поддерживают дополнительные проприетарные кодеки

.

Оставьте комментарий

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