react-player 사용기

Youtube 영상을 리액트 프로젝트에서 사용할 일이 있어서 관련 라이브러리를 찾던 중 발견했다.
Youtube뿐만 아니라 파일, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion, Kaltura등 이 라이브러리 하나로 손쉽게 영상을 import 할 수 있다.

react-player npm
react-player github

나는 Youtube의 영상을 사용했기 때문에 Youtube의 경우로 설명 할 예정이다.

데모

아래 링크에서 라이브러리 기능들을 테스트 해 볼 수 있다.
react-player 데모 페이지

설치

npm install react-player #or yarn add react-player

import

import React from 'react'
import ReactPlayer from 'react-player'
//한 가지 유형만 사용하는 경우 유형까지 적어주면 번들 크기를 줄여서 import 할 수 있다.
import  ReactPlayer  from  'react-player/youtube'
//lazy loading 또한 마찬가지이다.
import  ReactPlayer  from  'react-player/lazy' 

사용

// 기본적인 YouTube
<ReactPlayer url='https://www.youtube.com/watch?v=q3xy4p2JTfU' />

// 반응형 YouTube

//styled-component로 css를 정의해줬다.
const PlayerWrapper = styled.div`
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */;
  .react-player {
    position: absolute;
    top: 0;
    left: 0;
  }
`;

<PlayerWrapper>
  <ReactPlayer 
    className="react-player" 
    url="https://www.youtube.com/watch?v=q3xy4p2JTfU" 
    width="100%" 
    height="100%" 
    muted={true} //chrome정책으로 인해 자동 재생을 위해 mute 옵션을 true로 해주었다.
    playing={true} 
    loop={true} />
</PlayerWrapper>

ReactPlayer의 자세한 속성 목록은 아래 링크에서 확인 할 수 있다.
속성 목록

자동 재생

Chrome 66 버전부터 동영상이 음소거로 되어있어야만 자동으로 재생이된다. Facebook과 같은 일부 플레이어는 사용자가 비디오와 상호 작용할 때까지 음소거를 해제할 수 없으므로 사용자가 직접 음소거를 설정할 수 있도록 mute 속성을 지원한다.

muted={true}

마치며

간단히 react-player를 사용하는 방법을 알아봤다. 위에 적힌 속성들 외에도 pip이나 자막기능등 다양한 기능이 많으니 필요한 분들은 react-player의 npm이나 github을 확인해 커스터마이징하면 꽤 유용하게 사용될 것 같다.