Встраивание видео и аудио: теги <video> и <audio>, атрибуты controls, src, poster

🎬 Видео в HTML: тег `<video>` и его возможности

Хотите добавить видео на сайт без сложных плагинов? Тег <video> — ваш лучший друг!

🔹 Базовая структура

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

src — путь к видеофайлу (MP4, WebM, Ogg).
controls — добавляет стандартные элементы управления (воспроизведение, громкость, полноэкранный режим).
Текст внутри тега — фолбэк для старых браузеров.

🔹 Расширенные атрибуты

<video 
  src="sunset.mp4" 
  controls 
  width="600" 
  poster="preview.jpg" 
  autoplay 
  loop 
  muted
>
</video>

poster — изображение-заставка до начала воспроизведения.
autoplay — автоматический старт (работает только с muted из-за политики браузеров).
loop — зацикливание видео.
width/height — контроль размера (сохраняет пропорции, если указать только одну сторону).

🎧 Аудио: тег `<audio>`

Для музыки или подкастов используйте <audio> — почти как <video>, но без видеочасти!

🔹 Минимальный пример

<audio src="track.mp3" controls></audio>

Поддерживаемые форматы: MP3, WAV, Ogg.

🔹 Дополнительные опции

<audio 
  src="sound.mp3" 
  controls 
  autoplay 
  loop 
  muted
>
  Ваш браузер устарел для аудио. 🎵
</audio>

Атрибуты autoplay, loop, и muted работают аналогично видео.

🌟 Продвинутые техники

🔹 Альтернативные источники (для кросс-браузерности)

<video controls width="500" poster="scene.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Ваш браузер не поддерживает HTML5 видео.  
</video>

Браузер выберет первый поддерживаемый формат из списка <source>.

🔹 Субтитры и доступность

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

<track> добавляет субтитры (формат WebVTT).
Атрибут kind может быть subtitles, captions, или descriptions.

💡 Важные нюансы

1. Автовоспроизведение:
Работает только с muted (например, для фоновых видео).

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

2. Оптимизация:
Сжимайте видео (инструменты: HandBrake, FFmpeg).
Используйте poster, чтобы скрыть загрузку.

3. Адаптивность:
Для мобильных устройств добавьте в CSS:

video { max-width: 100%; height: auto; }

🛠 Пример: Видео-галерея

<div class="gallery">
  <video controls poster="holiday.jpg">
    <source src="holiday.mp4" type="video/mp4">
  </video>
  <audio controls>
    <source src="interview.mp3" type="audio/mp3">
  </audio>
</div>

Теперь вы знаете, как оживить сайт мультимедиа! 🚀 Для глубокого погружения в HTML5 посмотрите курс Данилы Бежина.