Видео и аудио контент
Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью.
В HTML 5 были введены новые элементы <video>
(добавляет видео контент на страницу) и <audio> (добавляет аудио контент на страницу), о которых и пойдет речь в этой статье.
В настоящеее время эти элементы поддерживаются во всех современных браузерах:
| Тег |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| <video>, <audio> | 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
Добавление видео на 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> <h1>Видео в HTML5</h1> <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.
Результат нашего примера:
Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <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> <h1>Аудио в HTML5</h1> <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 |
Результат нашего примера:
Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:
<audio src = "sound.mp3" type = "audio/mp3" controls> Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат--> Вы можете скачать этот файл по ссылке. </audio>
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Добавьте на страницу произвольный видео файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш видео файл автоматически запускался снова после завершения воспроизведения.
Подсказка: не используйте файл, предназначенный для просмотра зрителями возрастной категории 18+, это может затянуть изучение HTML 5.
- Добавьте на страницу произвольный аудио файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш аудио файл запустился автоматически, как только он будет готов.