Карта сайта

Урок 12: Мультимедиа в HTML

/Уроки по HTML/CSS/Урок 12: Мультимедиа в HTML
Урок 12: Мультимедиа в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

В 12 урое мы погрузимся в мир мультимедиа. Научимся добавлять видео и аудио на веб-страницы.

Раньше для вставки видео или музыки приходилось использовать Flash или сторонние плагины, но с приходом HTML5 всё стало проще. Теперь мы можем использовать встроенные теги <video> и <audio>, которые работают быстро, поддерживаются всеми современными браузерами и не требуют дополнительных инструментов. Давайте разберёмся, как ими пользоваться.

Встраивание видео через <video>

Тег <video> позволяет добавлять видеофайлы на страницу. Вот его основные атрибуты:

  • src — путь к файлу.
  • controls — добавляет элементы управления (пауза, громкость, полноэкранный режим).
  • autoplay — автоматическое воспроизведение (работает не во всех браузерах без muted).
  • loop — зацикливание видео.
  • muted — отключение звука.
  • preload — загрузка видео заранее (значения: auto, metadata, none).

Пример базовой вставки видео:

<video src="video.mp4" controls>  
  Ваш браузер не поддерживает тег video.  
</video>

Если браузер не поддерживает формат, покажется текст внутри тега.

Поддержка форматов

Не все браузеры работают с одними и теми же форматами. Самые популярные:

  • MP4 (H.264) — поддерживается везде.
  • WebM — открытый формат, подходит для Chrome и Firefox.
  • Ogg — альтернатива для старых версий браузеров.

Чтобы обеспечить совместимость, используйте несколько источников через <source>:

<video controls>  
  <source src="video.mp4" type="video/mp4">  
  <source src="video.webm" type="video/webm">  
  Ваш браузер устарел.  
</video>

Автовоспроизведение и звук

Из-за политики браузеров видео с автовоспроизведением и звуком часто блокируются. Чтобы обойти это, добавьте muted:

<video autoplay muted loop>  
  <source src="video.mp4" type="video/mp4">  
</video>

Встраивание аудио через <audio>

Тег <audio> работает аналогично <video>, но для звуковых файлов. Его атрибуты:

  • src — путь к файлу.
  • controls — кнопки управления.
  • autoplay — автоматическое воспроизведение.
  • loop — повтор трека.

Пример:

<audio src="music.mp3" controls>  
  Ваш браузер не поддерживает аудио.  
</audio>

Форматы аудио

Основные форматы:

  • MP3 — самый популярный.
  • WAV — высокое качество, но большой размер.
  • Ogg — открытый формат.

Используйте несколько источников:

<audio controls>  
  <source src="music.mp3" type="audio/mpeg">  
  <source src="music.ogg" type="audio/ogg">  
  Скачайте трек в MP3.  
</audio>

Доступность и дополнительные возможности

Субтитры для видео

Для добавления субтитров используйте тег <track> внутри <video>. Укажите язык и файл с текстом (формат .vtt):

<video controls>  
  <source src="lecture.mp4" type="video/mp4">  
  <track src="subtitles-ru.vtt" kind="subtitles" srclang="ru" label="Русский">  
</video>

Стилизация элементов

Элементы управления видео и аудио можно стилизовать через CSS! Например, изменить цвет кнопок:

video::-webkit-media-controls-play-button {  
  background-color: #ff5722;  
}

Практические задачи

Задача 1: Создайте страницу с видео, которое автоматически запускается без звука и зацикливается.

<video autoplay muted loop controls>  
  <source src="nature.mp4" type="video/mp4">  
</video>

Задача 2: Добавьте аудиоплеер с двумя источниками (MP3 и Ogg) и кнопками управления.

<audio controls>  
  <source src="song.mp3" type="audio/mpeg">  
  <source src="song.ogg" type="audio/ogg">  
</audio>

Задача 3: Вставьте видео с субтитрами на русском языке.

Заключение

Теперь вы умеете работать с мультимедиа в HTML! Это важный шаг для создания современных сайтов. Видео и аудио делают контент живым и интерактивным.

Не останавливайтесь! Полный курс «HTML/CSS для начинающих» с 30 уроками ждет вас здесь: https://max-gabov.ru/html-css-dlya-nachinaushih