Управление audio и video из JavaScript

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

---

Разметка и поведение

Теги <video> и <audio> описаны в основных HTML-тегах — атрибуты src, controls, poster, вложенные <source>. Браузер рисует стандартные кнопки при controls.

JavaScript добавляет кастомный плеер, синхронизацию с галереей, аналитику просмотра, паузу вне экрана (наблюдатели DOM).

Для локализации плеера применяйте глобальные атрибуты:

• lang — язык контейнера;
• dir — направление текста интерфейса;
• translate="no" — метки и термины, которые нельзя переводить автоматически.

---

Базовый API элемента

<video id="player" preload="metadata" poster="/img/preview.jpg">
  <source src="/media/intro.webm" type="video/webm">
  <source src="/media/intro.mp4" type="video/mp4">
  <p>Ваш браузер не поддерживает видео.</p>
</video>

<button type="button" id="play">Смотреть</button>
<input type="range" id="seek" min="0" max="100" value="0">

Код ITЗагрузка примера кода…

---

Частые свойства

Свойство	Смысл
paused	на паузе
ended	воспроизведение завершено
currentTime	позиция в секундах
duration	длительность (после метаданных)
volume	0…1
muted	без звука
playbackRate	скорость (1 — норма)
readyState	сколько данных загружено

play() возвращает промис — браузеры требуют жест пользователя для автозапуска со звуком.

video.play().catch(() => {
  // autoplay заблокирован — показать кнопку "Включить звук"
});

---

События

Событие	Когда
loadstart	начало загрузки
loadedmetadata	известны размеры и длительность
loadeddata	первый кадр
canplay	можно начать воспроизведение
playing	воспроизведение идёт
waiting	буферизация
ended	конец
error	ошибка декодирования или сети

video.addEventListener('error', () => {
  const code = video.error?.code; // MediaError
  console.error('Media error', code);
});

---

<audio> — то же API

const audio = new Audio('/sounds/notify.mp3');
audio.volume = 0.5;
document.getElementById('bell').addEventListener('click', () => audio.play());

Конструктор Audio(url) создаёт элемент без вставки в DOM — удобно для коротких эффектов.

---

Субтитры и дорожки

<video id="v" src="/media/lecture.mp4" controls>
  <track kind="subtitles" src="/media/lecture.ru.vtt" srclang="ru" label="Русский" default>
</video>

Файл WebVTT (.vtt) — текст с таймкодами. Стили субтитров — псевдоэлемент video::cue в псевдоэлементах CSS.

Программно:

const track = video.textTracks[0];
track.mode = 'showing'; // 'hidden' | 'disabled'

---

Доступность и UX

• Не полагайтесь только на кастомные кнопки без controls до проверки клавиатуры и фокуса.
• prefers-reduced-motion: не автозапускайте тяжёлое видео; см. доступность в CSS.
• Пауза при уходе с экрана экономит трафик и батарею — IntersectionObserver в наблюдателях DOM.

---

Краткий итог

Медиаэлементы — обычные DOM-узлы с play / pause, currentTime, событиями жизненного цикла и <track> для субтитров. Кастомный UI строят поверх тех же свойств; стандартные controls оставляют для простых страниц и fallback.

---