Видео и аудио контент

Раньше в браузерах не было встроенных возможностей для поддержки аудио и видео контента, но с развитием интернет, поддержка мультимедийных элементов в качестве возможностей современных браузеров стала необходимостью. В HTML 5 были введены новые элементы <video>html5 (добавляет видео контент на страницу) и <audio>html5 (добавляет аудио контент на страницу), о которых и пойдет речь в этой статье.

В настоящеее время эти элементы поддерживаются во всех современных браузерах:

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<video>html5, <audio>html54.03.510.54.09.012.0

Добавление видео на HTML страницу

Для начала давайте определимся, что из себя представляет формат видеофайла. Формат видеофайла – это определённая структура, в которой видеозапись хранится на носителе (запоминающее устройство) и определяется двумя состовляющими: файлом-контейнером, в котором хранится сама видеозапись, и кодеками, которые используются для обработки звука и изображения.

В настоящее время существует 3 поддерживаемых формата видео для элемента <video>html5:

Браузер MP4 WebM Ogg
ChromeДАДАДА
Firefox ДАДАДА
Opera ДАДАДА
Safari ДАНЕТНЕТ
IEДАНЕТНЕТ
EdgeДАНЕТНЕТ

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

<!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>html5) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

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

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

Формат MIME-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/webm

Благодаря тегу <track>html5 добавили субтитры к видео:

Результат нашего примера:

Рис. 50 Добавление видео с субтитрами на страницу (HTML тег <video>).
Рис. 50 Добавление видео с субтитрами на страницу (HTML тег <video>).

Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>html5), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:

<video src = "123.mp4" width = "320" height = "240" poster = "10.jpg" controls>
	Ваш браузер не поддерживает этот видео формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот видео формат-->
	Вы можете скачать этот файл по ссылке.
</video>

Прочие, часто используемые атрибуты элемента <video>html5:

АтрибутЗначение атрибута
autoplayhtml5Задает автоматическое воспроизведение видеоролика (старайтесь не использовать этот атрибут без необходимости – раздражает, когда за тебя решают, когда должно начаться воспроизведение видео контента).
loophtml5Зацикливает воспроизведение видеоролика (наша песня хороша – начинай сначала).
mutedhtml5Воспроизведение видеоролика с отключенным звуком.

Добавление аудио на HTML страницу

Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио:

Браузер MP3 Wav Ogg
ChromeДАДАДА
Firefox ДАДАДА
Opera ДАДАДА
Safari ДАДАНЕТ
IEДАНЕТНЕТ
EdgeДАДАНЕТ

Элемент <audio>html5 использует те же атрибуты, что и элемент <video>html5, за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента <video>html5, вы можете предоставить несколько вариантов аудио форматов с помощью элемента <source>html5, как показано в примере ниже:

<!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>html5), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

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

Формат MIME-типы
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Результат нашего примера:


Рис. 51 Добавление аудио на страницу.
Рис. 51 Добавление аудио на страницу.

Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>html5), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:

<audio src = "sound.mp3" type = "audio/mp3" controls>
	Ваш браузер не поддерживает этот аудио формат. <!--Текст будет виден только тем у кого браузер не поддерживает этот аудио формат-->
	Вы можете скачать этот файл по ссылке. 
</audio>


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Добавьте на страницу произвольный видео файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>html5, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш видео файл автоматически запускался снова после завершения воспроизведения.
  • Подсказка: не используйте файл, предназначенный для просмотра зрителями возрастной категории 18+, это может затянуть изучение HTML 5.
  • Добавьте на страницу произвольный аудио файл, который поддерживает ваш браузер, в первом случае укажите путь к файлу, используя элемент <source>html5, во втором, используя сокращенный синтаксис. Сделайте так, чтобы ваш аудио файл запустился автоматически, как только он будет готов.