Видео и аудио

video, audio, source, атрибуты controls/preload/loop, встроенные если трек и субтитры track, доступность медиа.

Уровень: средний 9 разделов 1,5 часа

1. Видео на странице

<video src="movie.mp4" controls></video> — основная семантика. controls показывает панель элементов управления; без неё видеоролик непотроенным — на некоторых устройствах вообще не запустится.

<video controls width="720" height="405">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>

несколько source — браузер берёт первый поддерживаемый;
форматы: MP4 (H.264) практик., WebM — дополнительно;
fallback-текст — для старых браузеров.

2. Атрибуты video

<video controls loop muted autoplay playsinline poster="frame.jpg">
  <source src="clip.mp4" type="video/mp4">
</video>
<video preload="none" controls>
  <source src="big.mp4" type="video/mp4">
</video>

autoplay почти везда требует muted;
playsinline — для iOS, чтобы не открывать во весь экран;
preload: auto/metadata/none — метаданные или ничего;
poster — постер до игра.

3. Аудио

<audio controls preload="metadata">
  <source src="interview.ogg" type="audio/ogg">
  <source src="interview.mp3" type="audio/mpeg">
</audio>

Аудио-тег аналогичен video, но без визуального кадра. Форматы: MP3 (везде), OGG, WAV — дополнительно (старые браузеры).

4. Субтитры track

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subs_ru.vtt" srclang="ru" label="Русский">
  <track kind="captions" src="subs_en.vtt" srclang="en" label="English (CC)">
</video>

WebVTT-файлы (.vtt) несут субтитры. kind=captions — для звука (нужен глухо-слышащим), subtitles — перевод. Доступность и мультиязычность.

5. Свой vs с CDN

свой хостинг — ваши битрейт-контроль и аналитика видео;
CDN — скорость доставки, но платите за трафик;
видеоплатформы (YouTube/Vimeo) — готовый плеер + боевые статсцены.

Для продакшена чаще берите CDN или хостинг видео. Начальный вариант — mp4 рядом со страницей — для учёбных примеров идеален.

6. Адаптивное медиа

.video-wrap {
  position: relative;
  padding-bottom: 56.25%;   /* 16:9 */
  height: 0;
}
.video-wrap iframe, .video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}

Классика: youtube-iframe тянет в 16:9 обёртке. Для video-тега проще max-width: 100%; height: auto.

7. Миниатюра (poster) и смазка загрузки

<video preload="metadata" poster="thumb.jpg" controls>
  <source src="talk.mp4" type="video/mp4">
</video>

preload="metadata" не грузит видео целиком — только рамки, а poster показывает кадр-заглушку. На медленном соединении страница не думает десятки МБ.

8. Доступность медиа

любительский всегда с контролем (controls);
субтитры доступны — track для video;
не начинайте аудио/видео автоматически без намерения;
text like лыжный — ускорьте: подсказки про длительность.

Autoplay со звуком — почти всегда плохо: пользователю не дано объяснить, браузеру пришлось блокировать. mutes + явный «включить звук» — единственно приемлемый паттерн.

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

controls есть, poster и размеры заданы;
несколько source по форматам;
предгрузка metadata на длинных роликах;
track/субтитры для видео;
адаптив через обёртку 16:9 или max-width.

Что дальше

Курс завершён.

← Вернуться к курсам