Звук и видео на веб-странице

Звук и видео на веб-странице

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

Мультимедиа объединяет текст, графику, звук и видео. В HTML5 для звука служит тег audio, для ролика — тег video. Атрибут src указывает путь к файлу, атрибут controls добавляет панель управления.

Результат урока

Объяснишь, как добавить звук и видео на веб-страницу; создашь папку MediaPage_10 с index.html, учебным mp3 и учебным mp4; запишешь <audio controls> и <video controls> с относительными путями; проверишь воспроизведение и диагностику сломанного пути; поймёшь, зачем нужна панель управления. autoplay и визуальные конструкторы сайтов сегодня не обязательны.

Перед началом

Работай в своей папке и соблюдай правила кабинета. Приглуши громкость колонок. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор и браузер. Интернет для практики не нужен.

На учебной странице размещай только учебные медиа: без личных аудиозаписей, домашних видео и чужих приватных файлов.

Вспомни: каркас HTML (уроки 9–12), изображения и src (урок 13), оформление CSS (уроки 14–15). Сегодня — звук и видео: те же идея файла и пути, плюс панель управления.

Основа — § 9 учебника. Несколько source и титры — осведомлённость; полный монтаж субтитров не требуется.

Звук: тег audio

Тег audio добавляет аудиозапись на страницу.

<audio controls src="school-bell.mp3">
  Браузер не поддерживает audio.
</audio>

Без controls кнопки могут отсутствовать — управлять воспроизведением неудобно. На учебной странице controls обязателен.

Видео: тег video

Тег video добавляет видеоролик. Ему тоже нужны src и controls.

<video controls src="school-clip.mp4" width="480">
  Браузер не поддерживает video.
</video>

Звук — без видимого «кадра»; видео показывает область изображения и кнопки под ней (или поверх).

Атрибут controls

controls даёт пользователю управление: пуск, пауза, ползунок времени, громкость.

Почему это важно:

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

autoplay (автозапуск) на обязательном маршруте урока не используем.

Относительный путь к файлу

Как и для изображений, медиафайл удобно хранить рядом со страницей:

MediaPage_10/
  index.html
  school-bell.mp3
  school-clip.mp4

Тогда в коде достаточно короткого относительного пути:

src="school-bell.mp3"
src="school-clip.mp4"

Не пиши полный путь вида C:\Users\... — на другом компьютере он сломается.

Несколько источников source

Иногда указывают несколько форматов — браузер выберет подходящий:

<audio controls>
  <source src="school-bell.mp3" type="audio/mpeg">
  <source src="school-bell.ogg" type="audio/ogg">
  Браузер не поддерживает audio.
</audio>

На уроке достаточно одного src, если формат файла известен. Несколько source — резерв и осведомлённость.

Сломанный путь

Если путь неверен, медиа не воспроизводится.

Учебный приём: намеренно укажи неверный путь, убедись, что файл «не найден», затем исправь и обнови страницу.

Доступность: титры и расшифровка

Медиа — не только «картинка со звуком».

• controls обязателен: пользователь управляет запуском.
• Краткие титры или текстовая расшифровка рядом с роликом помогают, если звук недоступен (шумный кабинет, особенности слуха).
• На этом уроке достаточно осознания: полный монтаж субтитров не требуется.

Сохранение файлов

Все файлы сохраняй в одну папку MediaPage_10 (10 — номер места): index.html, school-bell.mp3 (или другой учебный звук), school-clip.mp4 (или другой учебный ролик). Для HTML — тип «Все файлы», UTF-8, расширение .html.

Просмотр в браузере

Открой index.html в браузере. Проверь, что кнопки видны и воспроизведение запускается. После правки HTML сохрани файл и обнови страницу (F5). Интернет не нужен.

Чек-лист медиа

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти, проверь посадку и приглуши громкость. Затем переходи к своей папке.

Практика: MediaPage_10

Создай папку MediaPage_10 в своей рабочей папке.

Лист проверки

Критерии готовности

Шесть диагностических баллов: папка с index.html и медиафайлами; есть audio с controls и относительным src; есть video с controls и относительным src; кнопки видны и воспроизведение запускается; показан и исправлен сломанный путь; ученик объясняет роль controls и почему файлы лежат рядом со страницей. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: два source у audio; краткая текстовая расшифровка под видео; устно сравнить ошибку пути с ошибкой img.

Если результат отличается

Объясни самостоятельно

1. Какие теги добавляют звук и видео на страницу? Какой атрибут показывает кнопки управления?
2. Что записывают в src? Почему удобен относительный путь к файлу рядом со страницей?
3. Что проверить, если медиа не воспроизводится? Зачем нужен controls с точки зрения доступности?

Показать ответ после выполнения

Домашнее задание

§ 9, фрагмент о звуке и видео на веб-странице. Письменно: 1) чем audio отличается от video; 2) зачем controls; 3) что проверить при «файле не найден». По желанию — донастроить MediaPage. autoplay и визуальные конструкторы не задаются. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2, § 9 «Мультимедиа на веб-страницах». Содержание главы. Электронное приложение.

MDN Web Docs: HTML video and audio, <audio>, <video>.

MediaPage, лист и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора. Учебные mp3/mp4 — короткие placeholder без личных данных.