🧱

Модуль 1. Введение и HTML

Занятие 11
Мультимедиа

Сегодня мы оживим страницу: вставим карту, видео и звук.

👀

Сегодня сделаем вот такое

🎬

Страница, которая звучит и двигается

  • 🎥 <video> — видео
  • 🎵 <audio> — музыка и звуки
  • 🪟 <iframe> — окно с другим сайтом: карта, ролик

Мультимедиа = текст + картинки + звук + видео.

🎥

Видео: <video>

  • src — файл (MP4)
  • controls — кнопки управления
  • poster — обложка
  • muted autoplay loop — без звука, сам, по кругу

Без controls — видео не запустить!

<video controls width="320"
       poster="/images/rocket.svg">
  Браузер не умеет показывать видео.
</video>
🎵

Звук: <audio>

  • Как video, только без картинки
  • Формат — MP3
  • Без controls плеер невидим
<p>🎶 Моя любимая мелодия:</p>
<audio controls></audio>
🪟

<iframe> — окно в другой сайт

  • src — адрес страницы
  • width, height — размер окна
  • title — описание

Справа — живая карта внутри нашего слайда!

<iframe width="100%" height="260"
  title="Карта Красной площади"
  src="https://www.openstreetmap.org/export/embed.html?bbox=37.615%2C55.751%2C37.627%2C55.757&amp;layer=mapnik">
</iframe>
📤

Где взять код iframe

  1. Открой карту или ролик
  2. Нажми «Поделиться»
  3. Выбери «Встроить» / HTML
  4. Скопируй код <iframe …> целиком
  5. Вставь в свою страницу
🤝

Правила хорошего тона

  • 🔇 Никакого автозапуска со звуком
  • 🐘 Видеофайлы тяжёлые — лучше встраивать ролик
  • ©️ Только разрешённая музыка и видео
  • 🏠 Не встраивай карту с домашним адресом
🐞

Почему не работает?

Видео не запускается, а музыку не видно. Что забыли?

<video src="video/cat.mp4" width="320"></video>
<audio src="music/song.mp3"></audio>
🃏

Запомни!

  • <video controls>Видео с кнопками
  • <audio controls>Аудиоплеер
  • <iframe src="…">Встроенный сайт/карта
  • width / heightРазмеры окна
  • poster="img.jpg"Обложка видео
⌨️

Практика: Вставляем видео или карту

  1. Вставь карту OpenStreetMap своего города (Поделиться → HTML).
  2. Задай iframe ширину 100% и высоту 300 пикселей.
  3. Добавь заготовку видеоплеера с controls и обложкой poster.
  4. Подпиши каждый блок заголовком h2.

🚀 Со звёздочкой: Узнай, что делает атрибут loading="lazy" у iframe и зачем он нужен большим сайтам.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Найди карту или видео, которые подойдут для твоего будущего проекта.