Видео и аудио в HTML\CSS. Курсы программирования

Видео и аудио контент на странице — рассмотрим в этой статье. Сначала разберемся с форматом видео файлов. Формат видеофайла— это структура, что имеют видео данные, как они хранятся на карте памяти и какими видео кодеками они зашифрованы.

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

Браузер	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″>

Ваш браузер не поддерживает видео тег.

</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	ДА	ДА	НЕТ

Элемент <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>

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

Добавили на страницу аудио-контент, атрибутом 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>

Мы постарались доступно объяснить вам как добавить аудио и видео в HTML\CSS. А проверить как вы усвоили эту тему вы можете — пройдя тест вверху страницы. А пройти курс HTML\CSS и создать собственный сайт вы можете у нас в офисе на м. Академгородок или в формате онлайн.