React Player – 비디오 플레이어 컴포넌트 구현 및 기능 설명

React Player – 비디오 플레이어 컴포넌트 구현 및 기능 설명

React Player는 React 애플리케이션에서 다양한 비디오 플레이어 기능을 간편하게 구현할 수 있는 라이브러리입니다. 이 라이브러리를 사용하면 YouTube, Vimeo, SoundCloud 등의 여러 플랫폼에서 비디오를 재생할 수 있으며, 커스텀 기능도 손쉽게 추가할 수 있습니다.

이번 글에서는 React Player를 사용하여 비디오 플레이어 컴포넌트를 구현하는 방법과 그 기능들을 하나씩 설명하고, 예제 코드를 통해 실습할 수 있도록 안내하겠습니다.

React Player 를 사용한 비디오 플레이어의 다양한 기능

---

1. React Player 설치

React Player는 npm 또는 yarn을 사용해 쉽게 설치할 수 있습니다.

npm install react-player

yarn add react-player

 

설치 후, React Player를 프로젝트에 불러와 사용할 준비를 합니다.

---

2. 기본 React Player 컴포넌트 구현

React Player는 다양한 비디오 플랫폼을 지원하며, 기본적인 재생, 일시정지, 볼륨 조절 등의 기능을 제공합니다. 아래는 가장 기본적인 React Player 컴포넌트 사용 예제입니다.

import React from 'react';
import ReactPlayer from 'react-player';

function VideoPlayer() {
  return (
    <div className='player-wrapper'>
      <ReactPlayer 
        url='https://www.youtube.com/watch?v=ysz5S6PUM-U' // 비디오 URL
        width='100%' 
        height='100%' 
        controls={true} // 재생/일시정지 버튼 표시
      />
    </div>
  );
}

export default VideoPlayer;

설명:

• url: 재생할 비디오의 URL을 지정합니다. 여기서는 YouTube 링크를 사용했습니다.
• controls: 비디오 컨트롤(재생/일시정지 버튼 등)을 표시할지 여부를 설정합니다.
• width/height: 플레이어의 크기를 설정합니다.

---

3. React Player 주요 기능

재생/일시정지 기능

controls 속성을 사용하면 기본적으로 제공되는 재생 및 일시정지 기능을 사용할 수 있습니다. 이를 통해 사용자는 비디오를 재생하거나 중지할 수 있습니다.

볼륨 조절 및 Mute 토글

React Player에서는 볼륨 조절 및 음소거 기능도 제공합니다.

function VideoPlayerWithVolume() {
  return (
    <div className='player-wrapper'>
      <ReactPlayer 
        url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
        controls={true}
        volume={0.5} // 기본 볼륨 설정 (0.0 ~ 1.0)
        muted={false} // 음소거 상태 여부
      />
    </div>
  );
}

싱크 슬라이더

React Player에서는 seekTo 메서드를 사용해 특정 지점으로 비디오 재생 위치를 이동할 수 있습니다.

function VideoPlayerWithSeek() {
  const playerRef = React.useRef(null);

  const handleSeek = () => {
    playerRef.current.seekTo(30); // 30초로 이동
  };

  return (
    <div>
      <ReactPlayer 
        ref={playerRef}
        url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
        controls={true}
      />
      <button onClick={handleSeek}>30초로 이동</button>
    </div>
  );
}

배속 조절

비디오 배속을 설정하여 영상 속도를 조절할 수 있습니다.

function VideoPlayerWithSpeed() {
  return (
    <ReactPlayer 
      url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
      playbackRate={1.5} // 1.5배속으로 재생
      controls={true}
    />
  );
}

자막 지원

React Player는 vtt 형식의 자막 파일을 지원합니다. 자막을 설정하면 비디오와 함께 자막이 표시됩니다.

function VideoPlayerWithSubtitles() {
  return (
    <ReactPlayer 
      url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
      config={{
        file: {
          attributes: {
            crossOrigin: 'anonymous'
          },
          tracks: [
            { kind: 'subtitles', src: 'subtitles.vtt', srcLang: 'en', default: true }
          ]
        }
      }}
      controls={true}
    />
  );
}

전체화면 기능

React Player 자체에서 기본적인 전체화면 기능은 지원하지 않으나, 브라우저의 기본 전체화면 API와 함께 사용할 수 있습니다.

시청 시간 계산

onProgress 함수를 통해 시청 시간을 계산할 수 있습니다.

function VideoPlayerWithProgress() {
  const handleProgress = (state) => {
    console.log('Played seconds: ', state.playedSeconds);
  };

  return (
    <ReactPlayer 
      url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
      controls={true}
      onProgress={handleProgress}
    />
  );
}

onProgress 함수는 비디오가 재생될 때마다 진행 상황을 반환하며, 이를 통해 현재 재생 시간을 계산할 수 있습니다.

키보드 액션 및 워터마크

키보드 액션을 지원하고, div 태그 안에 워터마크 같은 커스텀 UI를 추가할 수 있습니다. CSS를 이용해 영상 위에 워터마크를 넣을 수 있습니다.

function VideoPlayerWithWatermark() {
  return (
    <div className='player-wrapper'>
      <ReactPlayer 
        url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
        controls={true}
      />
      <div className='watermark'>My Watermark</div>
    </div>
  );
}

.player-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.watermark {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 20px;
  color: white;
  opacity: 0.8;
}

---

4. React Player의 확장 가능성

React Player는 다양한 비디오 플랫폼을 지원하며, 커스텀 기능을 추가해 확장성이 뛰어납니다. 이를 통해 간단한 비디오 플레이어부터 복잡한 기능을 포함한 플레이어까지 구현할 수 있습니다.

---

결론

React Player는 React 애플리케이션에서 비디오 플레이어를 손쉽게 구현할 수 있는 강력한 라이브러리입니다. 기본적인 재생, 일시정지, 볼륨 조절부터 배속, 자막 지원 등 다양한 기능을 제공하여 사용자에게 최적의 비디오 경험을 제공합니다.

이 글에서는 React Player를 사용한 다양한 기능 구현 예제와 함께 코드 설명을 제공하였으니, 여러분의 프로젝트에 적용해 보세요!