[FE] react-player 로 video 플레이하기

🎨 구현 내용

react + typescript 환경에서 .mp4 파일 재생 구현

short-form 형태의 프로젝트를 구현 중 입니다. 다양한 video 재생 방법이 있는데, 그 중에서 가장 많이 사용되는 라이브러리인 react-player를 사용해서 페이지를 구현했습니다.

🤩 구현 방법

1. 설치하기

📚 react-player 페이지

npm install react-player

또는

yarn add react-player

2. 코드 작성하기

import ReactPlayer from 'react-player'

<ReactPlayer url={url} />

기본 코드는 이렇게 ReactPlayer 를 불러와서 영상의 경로를 적어주면 됩니다.

3. Props 설정하기

다양한 Props 들이 있습니다. (이미지를 클릭하시면 전체 Props 확인 가능합니다.)

이 중에서 저는 자동 재생, 반복, 뮤트, pip 기능을 사용했습니다.

const [playState, setPlayState] = useState<boolean>(true);

const playingHandler = () => {
  setPlayState((pre) => !pre);
};

<div css={VideoStyle} onClick={playingHandler}>
  <ReactPlayer
    url={ReelTest}			// url 경로
    width={'100%'}			// 너비
    height={'auto'}			// 높이
    playing={playState}		// 재생 여부 (정지)
    muted={true}			// 소리 여부
    loop={true}				// 반복 재생
	pip={false}				// pip 플레이어 여부
    />
</div>

스마트폰 플랫폼에서 서비스를 이용한다고 생각했을 때, 화면 너비에 영상이 맞아야 꽉 찬 느낌을 낼 수 있기 때문에 height: auto 를 적용했습니다.

playing 의 경우, 영상을 클릭하면 일시정지하도록 구현하기 위해서 state 를 할당하여 클릭에 따라 boolean으로 조절되도록 설정했습니다.

pip의 경우 처음에는 따로 적어주지 않았습니다. 그렇게 테스트해보니, 숏폼 페이지라기 보다는 동영상 플레이어같은 느낌이었습니다. (따로 플레이어가 팝업됨) 만약 작은 화면으로 floating 하는 기능이 필요하다면 pip={true} 하는 것이 좋겠지만, 저처럼 스와이프하는 숏폼 형식을 만드신다면 해제하는 것을 추천드립니다.

🐥 배운 점

그 외에도 callback 이나 method 들이 많은데, 추가 개발을 진행하면서 필요한 기능을 사용하고 관련 포스트를 작성하겠습니다.