[클라우딩 어플리케이션 엔지니어링 TIL] 240309 - ReactJS 비디오 에디터 제작하기 프로젝트 (3)

Intro

---

오늘은 프로젝트에 필요한 비디오 플레이어 라이브러리인 video-react에 대해 알아보고 적용하였다.

일요일에는 열심히 놀아야해서 토요일에 프로젝트에 신경을 많이 썼다. ㅎㅎ

 

 

프로젝트 진행사항

---

video-react

• https://video-react.js.org/

Video-React - React Video Component

 

라이브러리 설치

npm install --save video-react

 

 

video-react의 루트 컴포넌트인 Player를 가져와 그 외 필요한 컴포넌트 BigPlayButton, LoadingSpinner, ControlBar 등을 자식 컴포넌트로 구현한다.

 

 

• Player: video-react 루트 컴포넌트
• BigPlayButton: 비디오 초기 재생 버튼
• LoadingSpinner: 비디오가 로딩되기 전 스피너
• ControlBar: 볼륨, 탐색, 재생 일시 중지/재개 등 비디오 제어 컴포넌트

 

 

Player는 상태 관리를 위해 Redux를 사용하고 있어 subscribeToStateChange 함수로 플레이어 상태를 구독할 수 있다.

 

• VideoPlayer.js

import React, { useContext, useEffect, useState } from 'react';
import { Player, BigPlayButton, LoadingSpinner, ControlBar } from 'video-react';
import { VideoFileContext } from '../App';

const VideoPlayer = ({ onPlayerChange, onPlayerStateChange }) => {
  const videoFile = useContext(VideoFileContext);
  const [player, setPlayer] = useState();
  const [playerState, setPlayerState] = useState();
  const [source, setSource] = useState();

  useEffect(() => {
    setSource(URL.createObjectURL(videoFile));
  }, [videoFile]);

  useEffect(() => {
    if (playerState) onPlayerStateChange(playerState);
  }, [playerState]);

  useEffect(() => {
    onPlayerChange(player);

    if (player) {
      // 플레이어 상태 변경 구독
      player.subscribeToStateChange(setPlayerState);
    }
  }, [player]);

  return (
    <div className={'video-player'}>
      <Player ref={player => setPlayer(player)} src={source} startTime={0}>
        <source src={source} />
        <BigPlayButton position="center" />
        <LoadingSpinner />
        <ControlBar disableCompletely></ControlBar>
      </Player>
    </div>
  );
};

export default VideoPlayer;

 

비디오 편집 기능을 구현할 때 다른 컴포넌트도 player과 playerState의 값이 필요하기 때문에 상위 컴포넌트에게 값을 전달하는 함수를 props로 받아왔다.

 

 

 

 

마무리

---

너무 쉽게 비디오를 제어할 수 있는 라이브러리를 알게 되어 좋았다.

앞으로도 유용하게 사용할 것 같다.

그리고 라이브러리 문서를 읽고 프로젝트에 적용하는 능력도 올라간 것 같아 뿌듯했다.