HTML-тег <video>

Характеристики

• Тип: медиа, блочный, статичный, семантический
• Назначение: Воспроизводит видеоконтент на странице.
• Родители: Любые HTML-теги, которые могут содержать фразовый или встроенный контент.
• Потомки: Элементы <source>, <track>, альтернативный контент (текст).
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• src — URL видеофайла.
• controls — Показывает элементы управления воспроизведением.
• autoplay — Автоматически начинает воспроизведение видео.
• loop — Зацикливает воспроизведение видео.
• muted — Отключает звук видео по умолчанию.
• poster — Изображение-заставка, отображаемое до начала воспроизведения.
• preload — Указывает, как загружать видео (auto, metadata, none).
• width — Ширина видео.
• height — Высота видео.
• playsinline — Указывает, что видео должно воспроизводиться внутри контейнера на мобильных устройствах.
• crossorigin — Управляет поведением CORS для загрузки видео.
• disablepictureinpicture — Отключает режим «картинка в картинке».
• disableremoteplayback — Отключает удалённое воспроизведение видео.

Пример использования

<video src="video.mp4" controls width="640" height="360" poster="poster.jpg">
  Ваш браузер не поддерживает элемент <code>video</code>.
</video>

Использование в JavaScript

// Получение элемента <video>
const videoElement = document.querySelector('video');

// Воспроизведение видео
videoElement.play();

// Пауза видео
videoElement.pause();

// Изменение источника видео
videoElement.src = 'new-video.mp4';

Рекомендации по обеспечению доступности (a11y)

• Предоставляйте текстовые альтернативы для видео, такие как подписи или транскрипты.
• Используйте атрибут controls, чтобы обеспечить доступ к элементам управления воспроизведением.
• Избегайте автоматического воспроизведения видео со звуком.
• Отсутствие элементов управления может затруднить воспроизведение для некоторых пользователей.
• Автоматическое воспроизведение со звуком может нарушить комфорт пользователя.

Полезные ссылки