SSV - Единый стандарт для видео

Определения

Стандарт SSV определяет требования к семантике, доступности и логике работы видео.

Структура и Семантика

Используется строгий набор атрибутов:

1. autoplay и muted - необходимы для автовоспроизведения, особенно это важно в Safari, который блокирует любое автовоспроизведение со звуком;
2. loop - обеспечивает зацикливание ролика;
3. playsinline - критически важен для iOS, чтобы видео воспроизводилось на странице, а не в полноэкранном режиме плеера.

Дополнительные атрибуты, такие как disablePictureInPicture и preload="auto", помогают точнее контролировать поведение и улучшить пользовательский опыт:

<video 
  autoplay
  muted
  loop
  playsinline
  disablePictureInPicture
  preload="auto"
  poster="preview.jpg"
  aria-hidden="true"
>
  <source src="bg.webm" type="video/webm">
  <source src="bg.mp4" type="video/mp4">
  <p>
    Ваш браузер не поддерживает видео. 
    <a href="bg.mp4">Скачать видео</a>
  </p>
</video>

Если видео это основной контент, то управление должно полностью отдаваться пользователю, здесь нужны атрибуты controls для отображения стандартного интерфейса плеера и preload="metadata", который экономит трафик, загружая только информацию о продолжительности и первом кадре, а звук можно включить только после явного действия пользователя (например, клика по кнопке воспроизведения):

<video
  controls
  preload="metadata"
  poster="preview.jpg"
>
  <source src="content.webm" type="video/webm">
  <source src="content.mp4" type="video/mp4">
</video>

Политика большинства браузеров запрещает автоматическое воспроизведение звука!

Не все форматы видео одинаково хорошо поддерживаются браузерами, нужно использовать комбинацию из WebM, современный формат с хорошим сжатием и MP4 как запасной вариант.

Формат MOV (QuickTime) стоит избегать из-за проблем с кодеками и воспроизведением вне экосистемы Apple.

Доступность

Видео должно быть доступно для всех пользователей, включая тех, кто использует скринридеры или имеет нарушения слуха, для этого используются субтитры, aria-атрибуты и текст внутри <video> если браузер не поддерживает видео(что бывает крайне редко):

<track 
	kind="captions" 
	src="captions.vtt" 
	srclang="ru" 
	label="Субтитры"
	default
>

Интерактивность и Визуальный отклик

Чтобы пользователь мог быстро и понятно заимодействовать с видео оно не должно много весить, не больше 5 МБ, при условии что сайт не является видеохостингом, также можно добавить постер с помощью атрибута poster="preview.jpg" и сделать видео адаптивным:

.bg-video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover; /* Обрезает видео, сохраняя пропорции */
	object-position: center;
}

Safari

Safari имеет строгую политику автовоспроизведения, для фонового видео всегда используйте связку muted + playsinline, если вам нужно автовоспроизведение со звуком (что редко бывает оправдано), его можно запустить только программно, в ответ на действие пользователя (клик, прокрутку).

Итоговые примеры

Фоновое видео

<video 
  class="bg-video"
  autoplay
  muted
  loop
  playsinline
  poster="sunset-preview.jpg"
  aria-hidden="true"
>
  <source src="header-bg.webm" type="video/webm">
  <source src="header-bg.mp4" type="video/mp4">
</video>

Интерактивное видео с субтитрами и описанием

<div class="tutorial">
  <video 
    controls
    preload="metadata"
    aria-label="Инструкция по сборке скейтборда"
    aria-describedby="video-description"
  >
    <source src="tutorial.webm" type="video/webm">
    <source src="tutorial.mp4" type="video/mp4">
    <track label="Субтитры" kind="captions" srclang="ru" src="tutorial-captions.vtt" default>
    <p>
      Ваш браузер не поддерживает элемент видео.
      <a href="tutorial.mp4">Скачать инструкцию</a>.
    </p>
  </video>
  <p class="sr-only" id="video-description">
    Пятиминутный ролик, в котором наш мастер показывает, как собрать скейтборд из готовых компонентов: подвесок, колес и деки.
  </p>
</div>

Плагин

Плагин Next Video