Аудио и видео в HTML5

До появления HTML5 звуковые файлы добавляли на веб-страницы, интегрируя фоновый звук при помощи тега <bgsound>. Файл проигрывался во время просмотра страницы, и у пользователя не было возможности выключить. С появлением в HTML5 нового тега <audio> звуковые файлы добавляются со встроенным программным интерфейсом, и нет необходимости подключать сторонние модули.

Как добавлять аудио на веб-страницу

Для добавления аудиофайлов на веб-страницу используется элемент <audio>. Путь к аудиофайлу указывается атрибутом src, а атрибут controls добавляет панель управления (кнопка запуска, прокрутка, регулятор громкости).

В коде выглядит это так:

<audio src="name.ogg" controls></audio>

Аудио кодеки и форматы звуковых файлов

Так как не все браузеры поддерживают все аудиоформаты, то аудифайл кодируют с помощью специальных кодеков (программ для преобразования цифровых данных в формат звукового файла или звукового потока) и добавляют файлы одновременно через тег <source> с атрибутом src.

При указании различных форматов файлов мы рекомендуем указывать MIME-тип для каждого файла, чтобы дать возможность браузеру локализировать поддерживаемый им файл. Задается MIME-тип при помощи атрибута type.

<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
</audio>

Самыми популярными аудио форматами являются следующие:

MP3 - самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Несмотря на популярность среди пользователей, телевизионные компании и радиостанции используют более современные кодеки ISO-MPEG, такие как AAC или MPEG-H.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, обеспечивает более высокое качество звучания при той же или более сильной степени сжатия.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, однако недостаточно широко поддерживается аппаратными проигрывателями.

Как добавлять видео файлы

До появления стандарта HTML5 для добавления видео на сайт использовались сторонние плагины вроде QuickTime, RealPlayer или Flash. В HTML5 появился новый тег <video>, который используется для вставки вставки видео на веб-страницу.

В коде это выглядит так:

<video src="example.webm." controls></video>

Атрибут src указывает путь файла, а атрибут controls используется для отображения элементов управления. (Подробнее об атрибутах тега <video>).

Видео кодеки и форматы видео файлов

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

Чтобы убедиться, что браузер умеет обрабатывать видеофайлы, создайте файл .htaccess в папке, где находится веб-страница, которая определяет MIME-типы для видео:

Пример

<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4"><!-- для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- для старых версий браузеров Firefox и Opera -->
</video>

На данный момент существует 3 основных формата видео: MP4/MPEG-4, OGG и WebM +. Для сжатия видеоданных и их восстановления используются кодеки.

Для видео файла формата MPEG-4 используются видео кодек Н.264 и аудио кодек ААС. Для использования кодеков необходимо получить лицензию.

Для видео файла Ogg используются видео кодек Theora и аудио кодек Vorbis с открытым кодом.

Для видео файлов в формате WebM + используются видео кодек VP8 и аудио кодек Vorbis. Для их использования не требуется лицензии.

Как добавлять субтитры и заголовки

Субтитры и заголовки к аудио и видео файлам добавляется при помощи элемента <track>, который используется в качестве дочернего элемента <audio> и <video>.