Аудио и видео в HTML5
Раньше нативные веб-технологии, такие как HTML, не позволяли встраивать видео и аудио в Web. Популярность получили технологии на основе плагинов для обработки такого контента, но у них было много проблем, включая плохую совместимость с возможностями HTML/CSS, а также проблемы безопасности и доступности. Позже спецификация HTML5 представила такие возможности с помощью элементов <video> и <audio>.
Элемент <audio> используется для встраивания аудиофайлов на веб-страницу, а элемент <video> — для встраивания видео.
Как добавить аудио на веб-страницу
До HTML5 аудиофайлы добавлялись на страницу путем интеграции фонового звука с помощью тега <bgsound>. Файл воспроизводился во время просмотра страницы, и пользователь не мог отключить звук. В HTML5 мы можем встраивать аудиофайлы с помощью тега <audio>, и нет необходимости подключать сторонние плагины. Элемент audio можно управлять с помощью HTML или Javascript и стилизовать с помощью CSS.
В коде атрибут src указывает на URL аудиофайла, а атрибут controls добавляет панель управления (кнопка запуска, полоса прокрутки, регулятор громкости).
Audio and Video in HTML5
<audio src="name.ogg" controls></audio>Аудиокодеки и форматы аудиофайлов
Поскольку не все браузеры поддерживают все аудиоформаты, аудиофайл кодируется/декодируется с помощью аудиокодека (цифрового электронного устройства или программного приложения на базе компьютера, которое помогает в сжатии и распаковке цифровых аудиоданных). Все форматы аудиофайлов добавляются одновременно через элемент <source> с атрибутом src.
При определении разных форматов файлов мы рекомендуем указывать MIME-type для каждого файла, чтобы браузер мог определить поддерживаемый файл. MIME-type задается с помощью атрибута type.
Пример добавления разных форматов аудиофайлов:
Example of Audio Codecs and Audio File Formats
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://ru.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://ru.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Наиболее популярные аудиоформаты следующие:
MP3 — самый популярный аудиоформат, который использует сжатие с потерями и позволяет уменьшить размер файла. Несмотря на популярность среди пользователей, телевизионные компании и радиостанции используют более современные кодеки ISO-MPEG, такие как AAC или MPEG-H.
AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним обеспечивает более высокое качество при той же или более сильной степени сжатия.
Ogg Vorbis — свободный формат с открытым кодом, поддерживаемый в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно поддерживается устройствами воспроизведения.
Как добавить видеофайлы
В предыдущей версии HTML видео встраивались на сайт через сторонние плагины, такие как QuickTime, RealPlayer или Flash. В HTML5 появился новый тег <video>, который используется для вставки видео на веб-страницу.
В коде это выглядит так:
Audio and Video in HTML5
<video src="example.webm" controls></video>Атрибут src указывает URL файла, а атрибут controls используется для отображения элементов управления.
Видеокодеки и форматы видеофайлов
Каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео во всех браузерах, видеофайл должен быть представлен в нескольких форматах. Как и в случае с аудиофайлами, все форматы видеофайлов включаются в элемент <source>, начиная с наиболее предпочтительного. Каждый видеофайл должен иметь свой MIME-type, который задается атрибутом type.
Чтобы убедиться, что браузер может обрабатывать видеофайлы, создайте файл .htaccess в папке, где расположен веб-сайт, и определите в нем MIME-types для видео.
Пример добавления разных форматов видеофайлов:
Example of Video Codecs and Video File Formats
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg" />
<source src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<p>Some information about video</p>
</body>
</html>Сегодня существует 3 основных видеоформата: MP4/MPEG-4, OGG и WebM. Для сжатия видеоданных и их воспроизведения мы используем кодеки.
Для видеофайла формата MPEG-4 используются видеокодек H.264 и аудиокодек AAC. Если вы хотите использовать эти кодеки, вам необходимо получить лицензию.
Для видеофайла Ogg используйте видеокодек Theora и аудиокодек Vorbis с открытым кодом.
Для видеофайлов формата WebM используйте видеокодек VP8 и аудиокодек Vorbis. В этом случае лицензия не требуется.
Большинство серверов не отдают медиафайлы Ogg или mp4 с правильными MIME-типами. Для этого вам может потребоваться добавить соответствующую конфигурацию.
Audio and Video in HTML5
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4Как добавить субтитры и заголовки
Субтитры и заголовки добавляются к аудио- и видеофайлам с помощью элемента <track>, который используется как дочерний элемент <audio> и <video>.
Пример добавления субтитров и заголовков к аудио- и видеофайлам:
Subtitles and Headings of the audio and video files
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="https://ru.w3docs.com/build/videos/arcnet.io(7-sec).vtt" />
</video>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>TIP
Чтобы выровнять видеоплеер на странице, поместите элемент <video> в контейнер <div>, назначьте ему класс, а затем задайте для него ширину и высоту, соответствующие размеру вашего видео.
Атрибуты аудио и видео
| Attribute | Description |
|---|---|
| autoplay | Позволяет аудио/видео автоматически начинать воспроизведение, пока загружается остальная часть страницы. |
| controls | Позволяет управлять воспроизведением аудио/видео, включая громкость, паузу/возобновление воспроизведения. |
| loop | Позволяет аудио/видео воспроизводиться снова после завершения. |
| muted | По умолчанию воспроизводит медиафайл с выключенным звуком. |
| preload | Указывает буферизацию больших файлов. Может иметь одно из следующих значений: "none" (не буферизует файл), "auto" (буферизует медиафайл) или "metadata" (буферизует только метаданные файла). |
| src | URL аудио/видео для встраивания. Необязательный атрибут. |
| poster | URL изображения, отображаемого перед воспроизведением видео. |
| width | Указывает ширину области отображения видео в пикселях CSS. |
| height | Указывает высоту области отображения видео в пикселях CSS. |
Практика
Какие теги используются для встраивания аудио- и видеофайлов в HTML5?