Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 1. Введение и HTML Занятие 11

Мультимедиа

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

Изучаем: video, audio, iframe
Результат: Вставляем видео или карту

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

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

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

<h2>Мой видеоплеер</h2>
<video controls width="320" poster="/images/rocket.svg">
  Твой браузер не поддерживает видео.
</video>
iframe {
  border: 0;
}

💡 Объяснение

Мультимедиа — это не только картинки

Современная страница может показывать видео, проигрывать музыку и даже встраивать кусочки других сайтов: карты, презентации, видеоролики. Всё это называется мультимедиа. HTML умеет это делать без всяких программ и плагинов.

Видео: <video>

<video src="video/cat.mp4" controls width="480" poster="images/cover.jpg">
  Твой браузер не поддерживает видео.
</video>
  • src — путь к видеофайлу. Самый универсальный формат — MP4.
  • controls — показать кнопки: пуск, пауза, громкость, полноэкранный режим. Без него видео будет «немым» прямоугольником без управления!
  • poster — картинка-обложка, пока видео не запущено.
  • width — ширина плеера.
  • autoplay — запуск сразу (браузеры разрешают автозапуск только со звуком, выключенным атрибутом muted);
  • loop — повтор по кругу.

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

Звук: <audio>

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

Работает так же, как видео, только без картинки. Формат — MP3. Без controls плеер вообще не будет виден.

Встроенные окна: <iframe>

<iframe> (inline frame — встроенная рамка) — это «окошко», в котором показывается другая страница. Так на сайты встраивают карты, ролики с видеохостингов, опросы, презентации.

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=…"
        width="600" height="400" title="Карта парка"></iframe>
  • src — адрес встраиваемой страницы;
  • width и height — размеры окна (можно в процентах: width="100%");
  • title — описание окна для программ чтения с экрана;
  • loading="lazy" — загружать окно, только когда до него докрутили страницу. Ускоряет сайт.

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

Писать адрес вручную не нужно — сервисы дают готовый код:

  1. Открой нужное место на карте (например, OpenStreetMap или Яндекс Карты) или нужный ролик.
  2. Найди кнопку «Поделиться».
  3. Выбери «Встроить» или «HTML».
  4. Скопируй код, начинающийся с <iframe, и вставь в свою страницу.

Не все сайты разрешают встраивать себя: многие (например, соцсети или банки) специально это запрещают, и окно будет пустым. Это нормально.

Хороший тон

  • Не включай автозапуск со звуком — посетитель может сидеть на уроке или в библиотеке.
  • Видеофайлы очень тяжёлые. Для своего сайта лучше встраивать ролик с видеохостинга, чем класть файл на 500 МБ.
  • Используй только те видео и музыку, которые разрешено использовать.

Безопасность

Не встраивай на свой сайт карту с домашним адресом или школой — лучше карту парка, музея или города. Встраивай содержимое только с проверенных сайтов.

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

  • Забыт controls — видео нельзя запустить.
  • Неправильный путь к файлу — плеер пустой.
  • Скопирован не весь код iframe (обрезан адрес).
  • Слишком большие размеры iframe — окно вылезает за экран телефона.

Проверь себя

  1. Что будет, если у <video> нет атрибута controls?
  2. Что такое iframe и какие вещи через него встраивают?
  3. Почему автозапуск видео со звуком — плохая идея?

⌨️ Практика

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

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

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

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход