HTMLVideoElement

Управление <video> из JS: те же API что и HTMLAudioElement, плюс размеры кадра и полноэкранный режим.

Что это

Наследует HTMLMediaElement — общий контракт с HTMLAudioElement (play/pause/currentTime/events). Добавляет videoWidth/videoHeight, метод requestFullscreen, PiP, и работает с Canvas через drawImage(video, ...).

Базовое использование

const video = document.querySelector('video');

video.play();
video.currentTime = 10;
video.playbackRate = 2;
video.volume = 0.8;

// Custom controls (JS30)
const playPause = () => video.paused ? video.play() : video.pause();
video.addEventListener('click', playPause);

video.addEventListener('timeupdate', () => {
  progressBar.style.width = `${(video.currentTime / video.duration) * 100}%`;
});

// Seek по клику на прогресс-бар
progressContainer.addEventListener('click', (e) => {
  const rect = progressContainer.getBoundingClientRect();
  const ratio = (e.clientX - rect.left) / rect.width;
  video.currentTime = ratio * video.duration;
});

// Полноэкранный
await video.requestFullscreen;

// Picture-in-Picture (Chrome/Safari/Edge)
await video.requestPictureInPicture;

Уникальные свойства

Свойство Что
videoWidth / videoHeight Реальный размер кадра в пикселях
poster URL заглушки до play
requestFullscreen Полноэкранный
requestPictureInPicture PiP-окно

Поддержка

  • Все современные браузеры
  • Форматы: MP4/H.264 — везде, WebM/VP9 — почти везде, AV1 — растёт
  • requestPictureInPicture — нет в Firefox по умолчанию

Подводные камни

  • autoplay без muted блокируется во всех браузерах (autoplay policy)
  • videoWidth/Height = 0 до события loadedmetadata
  • В Safari playsinline обязателен чтобы видео не запускалось fullscreen на iPhone
  • Для рисования кадра на canvas: ctx.drawImage(video, 0, 0) — работает только если CORS правильный

Используется в bootcamp

  • JS30 — HTML5 Video Player (#11) — кастомный плеер: play/pause toggle, скраббер, кнопки skip ±10s, регуляторы громкости и скорости

Ссылки

См. также