Медиа в HTML

Карты изображений сделали кликабельными области одной картинки. Медиа в вебе шире: статичные изображения, звук, движущиеся кадры и иногда вложенные страницы или сторонние плееры. HTML даёт специализированные теги, чтобы браузеры могли показывать или воспроизводить эти ресурсы с элементами управления и точками доступности. Эта сессия — ваша карта, прежде чем уроки Video, Audio, YouTube и Plug-ins углубят каждую тему.

Что здесь значит «медиа»

В повседневном языке курса медиа — это контент не только из абзацев и заголовков: фото, иконки, голосовые клипы, демо и встраивания. Правильный элемент помогает браузеру показать нативный интерфейс воспроизведения, загрузить нужный тип ресурса и дать вспомогательным технологиям более ясную роль, чем загадочный <div>, набитый скриптами.

Прямой ответ

• Изображения → img (и иногда picture для нескольких файлов)
• Звук → audio
• Фильмы и клипы → video
• Вложенный просмотр (карты, плееры других сайтов) → часто iframe
  Предпочитайте элемент, который соответствует задаче. Давайте пользователям controls на audio и video, если у вас нет сильного и доступного кастомного плеера. Когда медиа несёт важную информацию, заранее планируйте текстовую альтернативу, субтитры или транскрипт.

Строительные блоки кратко

Крошечный пример

img вы уже знаете. Вот как audio и video стоят рядом с ним на первой учебной странице — пути условные; дома подставьте файлы, которые у вас реально есть.

Как читать пример

• img по-прежнему нужны src и осмысленный alt
• audio и video используют src (или вложенные дочерние source в следующих уроках) и выигрывают от controls
• width на video может зарезервировать место в вёрстке, пока файл грузится
• Пустые файлы или неверные пути ломаются так же, как другие ресурсы — проверяйте папки заранее

Controls — привычка новичка

Атрибут controls просит браузер показать воспроизведение, паузу и связанный UI. Автозапуск звука без явного действия пользователя часто блокируется и обычно раздражает. Начинайте с видимых элементов управления. Кастомные плееры появятся позже, если проект действительно в них нуждается.

Выбор правильного инструмента

• Подкаст или голосовая заметка → audio
• Запись экрана или клип → video
• Фото или схема → img / picture
• Виджет карты или страница стороннего плеера → часто iframe (с учётом производительности и безопасности)
  Не заталкивайте видео в тег изображения и не прячьте целое внешнее приложение в загадочный скриптовый блок, когда есть нативный элемент.

Доступность и смысл

Если медиа чему-то учит, спланируйте, как человек, который не слышит или не видит его, всё равно поймёт идею: alt для информативных изображений, субтитры для говорящего видео, транскрипт для длинного аудио. Декоративное движение без информации не должно ловить фокус и громко автозапускаться. Специализированные уроки позже углубят тему; закрепите привычку сейчас.

Цена iframe (превью)

iframe встраивает другой контекст просмотра. Это мощно для карт и хостинговых плееров, но также приносит скрипты, cookie и вес вёрстки чужой страницы в вашу. Используйте его, когда вложенность — реальная цель, а не как умолчание для каждого медиафайла, который вы хостите сами. Для своих файлов нативные audio / video / img остаются проще.

Как стыкуются следующие уроки

После этой карты: Video и Audio учат атрибутам, нескольким источникам и практичным привычкам с файлами. Plug-ins и YouTube покрывают старые или хостинговые схемы. Iframe углубляет встраивание. Считайте эту страницу каталогом, а те — мастерскими.

Практика в редакторе

1. По таблице назовите, какой элемент выберете для файла подкаста (audio).
2. Добавьте один img на учебную страницу с понятным alt (это вы уже умеете).
3. Если есть небольшой mp3 или mp4, добавьте audio или video с controls.
4. Запишите одну строку в заметках: «субтитры/транскрипты для речевого контента».
5. Просмотрите названия следующих медиа-сессий, чтобы дорожная карта стала привычной.

Типичные ошибки

• Автозапуск звука без controls или явного жеста пользователя
• Встраивание огромных видео без мысли о размерах и без плана текстовой альтернативы
• Использование iframe для каждого файла, когда хватило бы нативных audio/video/img
• Забывать, что iframe импортирует безопасность и производительность чужой страницы
• Считать этот обзор «достаточным навсегда» и пропускать специализированные уроки, когда вы реально публикуете медиа

Итог

• HTML-медиа охватывает изображения, audio, video и встраивания
• Предпочитайте элемент, соответствующий задаче
• Давайте пользователям controls и планируйте альтернативы, когда медиа несёт смысл
• Нативные теги для своих файлов; iframe, когда вы действительно вкладываете другую страницу или хостинговый плеер
• Следующие уроки специализируют каждый тип — эта страница карта