react-player

ReactPlayer는 단일 인터페이스를 사용해 다양한 소스에서 미디어 재생을 임베드할 수 있는 React 컴포넌트입니다. 미디어 URL을 받아 재생에 필요한 마크업 또는 외부 SDK를 자동으로 로드합니다. 지원 소스에는 표준 HTML5 비디오/오디오 파일 경로, hls.js를 통한 HLS 스트림, dash.js를 통한 DASH 스트림, mux-player 요소를 통한 Mux 비디오, YouTube iFrame Player API를 통한 YouTube, Vimeo Player API를 통한 Vimeo, Wistia Player API를 통한 Wistia가 포함됩니다. 컴포넌트는 src, playing, loop, controls, volume, muted, playbackRate, width, height, preload, playsInline, crossOrigin, disableRemotePlayback 및 가능한 경우_picture-in-picture 지원과 같은 재생 제어를 위한 풍부한 props 집합을 노출합니다. onReady, onStart, onPlay, onPlaying, onProgress, onTimeUpdate, onDurationChange, onPause, onWaiting, onSeeking, onSeeked, onRateChange, onEnded, onError 및 picture-in-picture 진입/종료 이벤트를 포함한 일반적인 플레이어 이벤트를 위한 콜백 props도 제공합니다. config prop을 통해 YouTube, Vimeo, HLS에 대한 소스별 설정을 허용합니다. ReactPlayer에는 URL이 재생 가능한지 테스트하는 canPlay와 같은 정적 도우미와 커스텀 플레이어 구현을 등록하기 위한 addCustomPlayer 및 removeCustomPlayers가 포함되어 있습니다. ref를 통해 접근하는 인스턴스 메서드는 HTMLMediaElement 인터페이스와 호환되는 것을 목표로 합니다. 성능을 위해 컴포넌트는 동적 import를 지원하는 빌드 시스템에서 플레이어 청크의 지연 로딩을 지원하여 주 번들 크기를 줄이고 주어진 소스에 필요한 플레이어만 로드합니다. 추가 기능으로는 사용자 상호작용 후 전체 플레이어를 로드하기 전에 썸네일을 먼저 표시하는 라이트 모드, 커스텀 썸네일 지원, width, height, aspect-ratio 스타일을 통한 반응형 크기 조정, Media Chrome과 같은 커스텀 제어 UI와의 호환성이 있습니다. 버전 3부터 ReactPlayer는 기본 HTML 비디오 및 오디오 요소와 유사한 방식으로 여러 소스 및 트랙 자식 요소를 지원하여 대체 형식과 자막 트랙을 가능하게 합니다. README에 따르면 버전 3은 주요 아키텍처 업데이트로 버전 2와 되먹互換성이 없으며, 유지보수는 오픈 소스를 유지하면서 Mux에서 담당합니다.