Как приручить зоопарк видеоплееров в React-приложении

Представьте ситуацию: заказчик просит вставить на сайт видео с YouTube. Вы находите библиотеку, подключаете, всё работает. Через неделю концепция меняется, и теперь видео должны грузиться из Vimeo. Еще через месяц появляется стрим через HLS, а потом и вовсе прямые ссылки на mp4-файлы из S3. В итоге ваш код превращается в мешанину из разных SDK, обработчиков событий и костылей для управления громкостью.

Я сам через это проходил и знаю, как больно поддерживать пять разных API для управления банальной кнопкой «Play». Именно здесь на сцену выходит react-player. Это своего рода швейцарский нож, который оборачивает все популярные видеосервисы в один понятный React-компонент.

Что это за зверь

react-player — это библиотека, которая умеет играть видео и аудио практически из любого источника. Вам не нужно думать, как работает плеер Facebook или Twitch. Вы просто скармливаете компоненту ссылку, а он сам разбирается, какой плеер под капотом запустить.

Интересный факт: проект недавно перешел под крыло команды Mux. Это ребята, которые съели собаку на видео-технологиях (они же делают Video.js). Для нас это хороший знак — проект не забросят, а баги будут фиксить быстрее.

Почему это удобно

Главная фишка в единообразии. У вас есть один набор пропсов (playing, volume, muted) и один набор колбэков (onPlay, onPause, onProgress). Неважно, что сейчас на экране — ролик из YouTube или поток m3u8.

Ленивая загрузка из коробки

Библиотека довольно увесистая, если пытаться впихнуть в основной бандл поддержку вообще всех сервисов. Но разработчики предусмотрели крутую штуку — разделение кода. Если ваша система сборки поддерживает import(), вы можете подгружать только тот плеер, который нужен для конкретной ссылки в данный момент. Это сильно экономит мегабайты ваших пользователей.

Режим превью (Light mode)

Часто плееры YouTube или Vimeo тяжелые сами по себе — они тянут кучу скриптов и фреймов сразу при загрузке страницы. У react-player есть проп light. Если его включить, вместо плеера отрисуется просто картинка-превью. Настоящий тяжелый плеер загрузится только тогда, когда пользователь реально нажмет на кнопку воспроизведения.

<ReactPlayer 
  url='https://www.youtube.com/watch?v=dQw4w9WgXcQ' 
  light={true} 
/>

Можно даже передать свою картинку в light, если стандартная вам не нравится.

Как это работает в коде

Установка стандартная через npm или yarn. Базовый пример выглядит до неприличия просто:

import React from 'react'
import ReactPlayer from 'react-player'

const MyVideo = () => {
  return (
    <ReactPlayer 
      url='https://www.youtube.com/watch?v=LXb3EKWsInQ' 
      playing={false}
      controls={true}
      onPause={() => console.log('Пользователь поставил на паузу')}
    />
  )
}

Управление через рефы

Если вам нужно сделать что-то специфичное — например, перемотать видео на конкретную секунду, — придется использовать рефы. В третьей версии библиотеки методы постарались сделать максимально похожими на стандартный HTMLMediaElement.

const playerRef = useRef(null);

const seekToHalf = () => {
  const duration = playerRef.current.getDuration();
  playerRef.current.seekTo(duration / 2, 'seconds');
};

Кастомные контроллы

Родные контроллы YouTube на сайте с собственным дизайном часто выглядят как инородное тело. react-player позволяет скрыть интерфейс сервиса и поверх нарисовать свой.

Есть даже связка с Media Chrome — библиотекой готовых UI-компонентов для управления видео. Выглядит это примерно так: вы оборачиваете плеер в контроллер и расставляете кнопки в нужном порядке. Получается полностью кастомный плеер, который при этом играет видео из облачных сервисов.

Нюансы и «грабли»

Я бы выделил пару моментов, на которых можно споткнуться:

1. Автоплей. В Chrome и большинстве современных браузеров видео не запустится само со звуком. Это не баг библиотеки, это политика безопасности. Чтобы автоплей сработал, обязательно добавьте muted={true}.
2. Мобильные устройства. На iOS и Android плееры ведут себя капризно. Часто требуется прямое нажатие пальцем пользователя, чтобы видео вообще начало грузиться.
3. Версии. Сейчас актуальна третья версия, и она не совместима со второй. Если обновляете старый проект, загляните в Migration Guide, там поменялись некоторые импорты и логика работы с кастомными источниками.

Кому стоит попробовать

Если вы делаете простой лендинг с одним видео — возможно, вам хватит и обычного <iframe>. Но если у вас контентная платформа, онлайн-школа или просто проект, где видео может прийти из разных источников, react-player сэкономит вам недели разработки.

Библиотека закрывает вопрос совместимости API разных платформ и дает единый, предсказуемый интерфейс управления. Для React-экосистемы это, пожалуй, самый стабильный и проверенный временем вариант.

Потыкать живое демо и посмотреть, как плеер жует разные ссылки, можно на официальной странице проекта.