Мультимедиа — HTML

Кратко

HTML позволяет встраивать мультимедиа: <video> — видео, <audio> — звук, <iframe> — внешние страницы (YouTube, карты). Атрибуты controls, autoplay, loop, muted управляют поведением плееров.

Подробно

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

Атрибуты:

controls — показать панель управления
autoplay — автовоспроизведение (только с muted!)
loop — зациклить
muted — без звука (обязателен для autoplay)
poster="image.jpg" — обложка до воспроизведения
preload="none|metadata|auto" — предзагрузка

Тег <audio>: <audio src="podcast.mp3" controls></audio>

Атрибуты аналогичны video.

Важно:

YouTube: используйте embed-ссылку (не обычную)
frameborder="0" — убирает рамку
loading="lazy" — отложенная загрузка
Встраивайте только trusted контент!

Ментальная модель

Мультимедиа — как проектор в классе. video — проектор для фильмов. audio — колонка для подкастов. iframe — окно в другой мир (YouTube, Google Maps). controls — пульт управления проектором.

Примеры

**Самый простой:**

html

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

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

Базовые video и audio с панелью управления.

**Простой:**

html

<!-- Видео с обложкой и автопаузой -->
<video
  src="tutorial.mp4"
  controls
  muted
  loop
  poster="thumb.jpg"
  width="640"
  height="360"
>
  Видео не поддерживается.
</video>

<!-- YouTube -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
  allowfullscreen
></iframe>

Видео сposter и YouTube-iframe.

**Реальный пример:**

html

<article>
  <h2>Видео-урок: Основы HTML</h2>

  <video
    src="/videos/html-basics.mp4"
    controls
    preload="metadata"
    poster="/images/html-poster.jpg"
    width="800"
    height="450"
  >
    <track kind="subtitles" src="/subs/ru.vtt" srclang="ru" label="Русский">
    <track kind="subtitles" src="/subs/en.vtt" srclang="en" label="English">
    Ваш браузер не поддерживает видео.
  </video>

  <p>
    <a href="/videos/html-basics.mp4" download>Скачать видео</a>
  </p>
</article>

<!-- Карта -->
<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  title="Карта офиса"
></iframe>

Полноценный пример: видео с субтитрами, скачиванием и Google Maps.

Частые ошибки

**Неправильно:** Использовать autoplay без muted

**Почему:** Браузеры блокируют autoplay со звуком — это раздражает пользователей. Автопауз разрешён только без звука.

**Правильно:** Autoplay работает только с muted. Если нужен звук — добавьте controls.

**Неправильно:** Встраивать обычную ссылку YouTube вместо embed

**Почему:** Обычная ссылка (youtube.com/watch?v=...) не работает в iframe. Нужна embed-ссылка.

**Правильно:** YouTube:.embed-ссылка: youtube.com/embed/VIDEO_ID

**Неправильно:** Забывать alt-текст для iframe

**Почему:** iframe — это как img без alt. Скринридер не поймёт, что внутри. Используйте title.

**Правильно:** Добавляйте title к iframe: <iframe title="Описание контента">.

Важно запомнить

<video> и <audio> — нативные плееры HTML5
controls — панель управления, autoplay — автозапуск (только muted!)
poster — обложка видео до воспроизведения
<iframe> — встраивание внешнего контента (YouTube, карты)
Всегда добавляйте title к iframe

Связь

Назад: Вы знаете метаданные (H15) — мультимедиа обогащает содержимое ваших страниц.

Вперёд: В следующем уроке (H17) вы изучите интерактивный HTML: details/summary, dialog, progress и другие интерактивные элементы.