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

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

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

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

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

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

---

Базовый 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">

const video = document.getElementById('player');
const playBtn = document.getElementById('play');
const seek = document.getElementById('seek');

playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

video.addEventListener('play', () => { playBtn.textContent = 'Пауза'; });
video.addEventListener('pause', () => { playBtn.textContent = 'Смотреть'; });

video.addEventListener('loadedmetadata', () => {
  seek.max = String(video.duration);
});

video.addEventListener('timeupdate', () => {
  if (!Number.isFinite(video.duration)) return;
  seek.value = String((video.currentTime / video.duration) * 100);
});

seek.addEventListener('input', () => {
  const ratio = Number(seek.value) / 100;
  video.currentTime = ratio * video.duration;
});

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

Свойство	Смысл
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.

---