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

Прокрутить вниз

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

На сегодняшний момент существует 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″>

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

Элемент <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><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 и создать собственный сайт вы можете у нас в офисе на м. Академгородок или в формате онлайн.