Youtube 영상을 리액트 프로젝트에서 사용할 일이 있어서 관련 라이브러리를 찾던 중 발견했다.
Youtube뿐만 아니라 파일, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion, Kaltura등 이 라이브러리 하나로 손쉽게 영상을 import 할 수 있다.
나는 Youtube의 영상을 사용했기 때문에 Youtube의 경우로 설명 할 예정이다.
아래 링크에서 라이브러리 기능들을 테스트 해 볼 수 있다.
react-player 데모 페이지
npm install react-player #or yarn add react-player
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을 확인해 커스터마이징하면 꽤 유용하게 사용될 것 같다.