Как встроить видео в React

Встраивание видео в React-приложение кажется простой задачей — пока вы не столкнётесь с неработающим автовоспроизведением, нереспонсивным iframe или тегом <embed>, который попросту не работает. В этом руководстве рассматриваются два самых практичных подхода: нативный HTML5-элемент <video> для самостоятельно размещённых файлов и встраивание через <iframe> для платформ вроде YouTube и Vimeo. Сторонние библиотеки упоминаются там, где они действительно приносят пользу, а не как решение по умолчанию.

Метод 1: HTML5 Video в React для самостоятельно размещённых файлов

Если видеофайл находится под вашим контролем, нативный элемент <video> — это правильный инструмент. Никакая библиотека не нужна.

import myVideo from './assets/demo.mp4';

export default function VideoPlayer() {
  return (
    <video
      width="100%"
      style={{ aspectRatio: '16/9' }}
      controls
      playsInline
      muted
    >
      <source src={myVideo} type="video/mp4" />
      <track
        kind="subtitles"
        src="/captions/demo.en.vtt"
        srcLang="en"
        label="English"
        default
      />
      Your browser does not support the video tag.
    </video>
  );
}

Несколько моментов, на которые стоит обратить внимание:

• autoPlay требует muted для надёжной работы в современных браузерах. Chrome, Safari и Firefox по умолчанию блокируют автовоспроизведение со звуком. Не рассчитывайте, что оно заработает без muted. Обратите внимание, что в JSX атрибут пишется в camelCase как autoPlay, а не autoplay. Поддержка браузерами и политики автовоспроизведения задокументированы на Can I Use.
• playsInline обязателен на iOS, чтобы видео автоматически не открывалось в полноэкранном режиме.
• <track> добавляет субтитры или подписи. Это правильный способ обеспечить доступность видеоконтента, и о нём легко забыть.
• Резервный текст внутри <video> отображается только в очень старых браузерах, которые не распознают этот элемент. Тем не менее его стоит включать.

Для форматов адаптивного стриминга, таких как HLS (.m3u8), нативная поддержка браузерами различается. Safari обрабатывает HLS нативно, а Chrome и Firefox требуют библиотеку вроде hls.js для парсинга и воспроизведения потока.

Встраивание YouTube в React: использование iframe

Для YouTube или Vimeo стандартным подходом является <iframe>. Специальный React-пакет для этого не нужен.

export default function YouTubeEmbed({ videoId }) {
  return (
    <div style={{ aspectRatio: '16/9', width: '100%' }}>
      <iframe
        width="100%"
        height="100%"
        src={`https://www.youtube-nocookie.com/embed/${videoId}`}
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        style={{ border: 'none' }}
      />
    </div>
  );
}

Ключевые моменты:

• Используйте youtube-nocookie.com вместо youtube.com для URL встраивания. Это режим повышенной приватности от YouTube, который сокращает количество трекинговых cookie до момента, пока пользователь не начнёт взаимодействовать с плеером.
• title обязателен на iframe для программ чтения с экрана. Без него вспомогательные технологии не смогут описать встроенный контент.
• aspectRatio: '16/9' на обёртке вместе с width: 100% и height: 100% на iframe — это самый чистый респонсивный подход с использованием современного CSS. Никаких хаков с padding не требуется. Поддержка браузерами CSS-свойства aspect-ratio доступна на Can I Use.
• Формат URL для встраивания: https://www.youtube-nocookie.com/embed/{VIDEO_ID}. ID видео — это значение query-параметра v в стандартном URL YouTube (например, часть после ?v= в youtube.com/watch?v=VIDEO_ID).

Дополнительные параметры можно передавать через query-строку:

/embed/VIDEO_ID?controls=1&rel=0

Когда использовать React-библиотеку видеоплеера

Для большинства задач достаточно нативного элемента <video> или обычного iframe. Рассмотрите библиотеку вроде ReactPlayer, если вам нужно поддерживать несколько платформ (YouTube, Vimeo, Wistia, HLS, DASH) из единого компонента с унифицированным API, или если нужны callback-обработчики событий вроде onReady, onProgress или onEnded для разных провайдеров.

ReactPlayer добавляет ощутимый вес в бандл, поэтому стоит оценить, действительно ли вам нужна такая гибкость, прежде чем добавлять его как зависимость.

Заключение

Начинайте с самого простого инструмента, который решает задачу. Для самостоятельно размещённого видео используйте HTML5-элемент <video> с controls, playsInline и muted, если требуется автовоспроизведение. Для встраивания YouTube в React достаточно обычного <iframe> с указанием на youtube-nocookie.com и корректным атрибутом title. Обращайтесь к библиотеке только тогда, когда нативного подхода действительно недостаточно.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.