Видео в HTML

Обзор медиа указал вам на несколько семейств. Эта сессия фокусируется на одном: элемент video для клипов и демо, которые вы хостите сами. Дайте посетителям UI воспроизведения и паузы через controls, вместо того чтобы удивлять их автоматически запущенным звуком.

Что делает video

video говорит браузеру загрузить файл фильма и отрисовать его на странице. Можно указать один файл через src или перечислить несколько дочерних <source>, чтобы браузер выбрал поддерживаемый формат. Необязательные атрибуты резервируют размер (width / height), показывают статичный кадр до воспроизведения (poster) и открывают нативные элементы управления.

Прямой ответ

Используйте <video controls src="movie.mp4"> или вложите дочерние <source> для нескольких форматов. Добавьте изображение poster как кадр предпросмотра до воспроизведения. Внутри video оставьте короткий fallback-текст (и при желании ссылку на скачивание) для агентов, которые не могут воспроизвести медиа. Предпочитайте сжатые файлы разумного размера.

Простое video с controls

Одного MP4 плюс controls и ширина достаточно для многих учебных страниц.

Как читать простой пример

• controls просит браузер показать UI play/pause
• width="480" помогает зарезервировать место в вёрстке, пока файл грузится
• src указывает на файл фильма в вашей папке media
• Текст внутри video — fallback-контент, когда элемент не поддерживается

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

Браузеры различаются по комфорту с форматами. Перечислить WebM и MP4 с подсказками type плюс статичный poster — обычный практичный приём.

Как читать пример с несколькими источниками

• poster показывает изображение предпросмотра, пока воспроизведение не началось
• Каждый source называет файл и MIME-type
• Браузер выбирает первый источник, который может воспроизвести
• Ссылка на скачивание внутри помогает, когда воспроизведение недоступно

Размер файла и форматы

Огромные экспорты с камеры зависают на медленных сетях. Экспортируйте MP4 веб-размера (и при желании WebM), соответствующий учебной задаче — короткие демо лучше многогигабайтных мастер-копий на странице урока. Не нужны все контейнеры в первый день; сначала добейтесь одного понятного MP4, затем добавьте второй формат, если аудитория этого требует.

Autoplay: сначала освоите controls

Автозапуск со звуком часто блокируется и обычно считается плохими манерами. Приёмы muted autoplay существуют для маркетинговых героев, но новичкам сначала стоит освоить controls и воспроизведение по действию пользователя. Когда autoplay понадобится позже, внимательно читайте политики браузеров и оставляйте доступный путь к паузе.

Субтитры и доступность (привычка)

Если устная речь чему-то важному учит, планируйте субтитры или транскрипт — даже если полноценные элементы track подключены в следующем проходе. Не полагайтесь на изображение poster как на единственное доступное резюме урока «говорящая голова».

Width, height и вёрстка

Задание width (и согласованного height, когда известно соотношение сторон) уменьшает прыжок макета, пока грузятся метаданные видео. Растягивание с несовпадающими числами выглядит плохо; держите реальное соотношение сторон в уме так же, как для изображений.

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

1. Положите короткий .mp4 в папку media.
2. Встройте его с video + controls + разумной шириной.
3. Добавьте fallback-текст внутри элемента.
4. По желанию добавьте изображение poster и второй формат source.
5. Откройте страницу, воспроизведите и поставьте на паузу, затем при возможности протестируйте с ограничением сети — заметьте, почему размер файла важен.

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

• Нет controls, поэтому пользователи не могут легко воспроизвести
• Отправка огромных несжатых файлов, которые зависают на медленных сетях
• Забытый fallback-текст или ссылка на скачивание
• Стремление к autoplay со звуком до понимания основ
• Постановка alt на video так же, как на img (вместо этого используйте субтитры/транскрипты и видимые описания)
• Путаница хостинговых встраиваний YouTube (iframe) с самостоятельно хостимыми файлами video

Итог

• video встраивает файлы фильмов, которые вы хостите
• Используйте controls для UI воспроизведения
• Несколько тегов source улучшают поддержку форматов
• poster показывает кадр предпросмотра до воспроизведения
• Предпочитайте сжатые файлы и избегайте неожиданного autoplay со звуком