react-player

ReactPlayer — это React-компонент для встраивания воспроизведения медиаконтента из широкого спектра источников через единый интерфейс. Он принимает URL медиафайла и автоматически загружает необходимую разметку или внешнюю SDK для воспроизведения. Поддерживаемые источники включают стандартные пути HTML5 видео и аудио, HLS-потоки через hls.js, DASH-потоки через dash.js, видео Mux через элемент mux-player, YouTube через YouTube iFrame Player API, Vimeo через Vimeo Player API и Wistia через Wistia Player API. Компонент предоставляет обширный набор пропсов для управления воспроизведением, таких как src, playing, loop, controls, volume, muted, playbackRate, width, height, preload, playsInline, crossOrigin, disableRemotePlayback, а также поддержку picture-in-picture там, где это доступно. Также предусмотрены callback-пропсы для распространённых событий плеера: onReady, onStart, onPlay, onPlaying, onProgress, onTimeUpdate, onDurationChange, onPause, onWaiting, onSeeking, onSeeked, onRateChange, onEnded, onError и события входа/выхода из режима picture-in-picture. Пропс config позволяет задавать параметро-специфичные настройки для YouTube, Vimeo и HLS. ReactPlayer включает статические вспомогательные функции, такие как canPlay для проверки, является ли URL воспроизводимым, а также addCustomPlayer и removeCustomPlayers для регистрации пользовательских реализаций плееров. Методы экземпляра, доступные через ref, стремятся к совместимости с интерфейсом HTMLMediaElement. Для производительности компонент поддерживает ленивую загрузку чанков плеера, когда build-система поддерживает динамические импорты, что снижает размер основного бандла за счёт загрузки только необходимого плеера для конкретного источника. Дополнительные возможности включают light mode, который сначала показывает миниатюру и загружает полный плеер только после взаимодействия пользователя, поддержку пользовательских миниатюр, адаптивное масштабирование через стили width, height и aspect-ratio, а также совместимость с пользовательскими UI управления, такими как Media Chrome. Начиная с версии 3, ReactPlayer также поддерживает несколько дочерних элементов source и track аналогично нативным HTML-элементам video и audio, что позволяет использовать альтернативные форматы и дорожки субтитров. В README указано, что версия 3 является крупным архитектурным обновлением и не обратно совместима с версией 2, а поддержка теперь осуществляется компанией Mux, при этом проект остаётся открытым.