react-player

react-player는 영상을 실행하고, 컨트롤할 수 있는 라이브러리이다.

설치

npm i react-player

구현한 기능

☑️ 영상 실행 및 일시 정지

☑️ 버퍼링 시 영상 교체

☑️ 영상 실행 시간 컨트롤

☑️ 영상 시간 10초 전, 10초 후로 이동

☑️ progress bar 구현

props 및 Callback props

<ReactPlayer
    ref={playerRef}
    url={url}
    playing={playing}
    onReady={onReady}
    onProgress={onProgress}
    onBuffer={onBuffer}
    progressInterval={10}
/>

• url : 재생할 영상의 url
• playing : 미디어 실행 및 일시 정지
• progressInterval : onProgress 콜백 시간 (ms)
• onReady : 미디어가 로드되어 재생할 준비가 되면 호출
• onStart : 미디어가 재생이 시작되면 호출
• onProgress : 영상의 현재 실행 시간 호출
• onBuffer : 버퍼링이 시작되면 호출
• onBufferEnd : 버퍼링 종료되면 호출
• onEnded : 영상 재생 완료되면 호출
• onError : 영상 재생을 시도하는 동안 오류 발생하면 호출

Instance Methods

• playRef.current.seekTo : 영상의 실행 시간 변경
• playRef.current.getCurrentTime : 재생된 초 수 반환
• playRef.getDuration : 영상의 전체 시간 반환

영상의 실행 및 정지

playing으로 영상을 실행, 정지시킬 수 있다. playing이 true이면 실행, false이면 정지된다.

const [isPlay, setIsPlay] = useState('0');

const handlePlayClick = () => {
    setIsPlay(!isPlay);
};

return (
    <>                    
        <ControllerContainer
            isPlay={isPlay}
            handlePlayClick={handlePlayClick}
            handleTimeChange={handleTimeChange}
            />
        <ReactPlayer
          ref={playerRef}
            url={url}
            playing={playing}
            onReady={onReady}
            onProgress={onProgress}
            onBuffer={onBuffer}
            progressInterval={10}
        />
    </>
);

영상 시간 컨트롤

playRef.current.seekTo() 를 통해 원하는 영상 시간으로 돌릴 수 있다. input element를 사용하여 사용자가 직접 영상의 시간을 조절할 수 있도록 구현하였다.

const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
    if (playRef.current) playRef.current.seekTo(parseFloat(e.target.value));
};

return (
    <input
        type="range"
        className="progress-slider absolute cursor-pointer"
        step={0.001}
        value={value}
        min={0}
        max={duration}
        onChange={handleTimeChange}
        onMouseUp={onMouseUp}
        onMouseDown={onMouseDown}
        style={
          {
              '--progress': `${(Number(value) / duration) * 100 + '%'}`
          } as React.CSSProperties
        }
    />
)

영상 버퍼링 시 영상 교체

onBuffer 콜백 함수를 통해 버퍼링이 발생하면 url을 변경하여 영상을 바꿔주었다.

const [url, setUrl] = useState('');

const handleBuffer = () => {
    setUrl('');
    timeRef.current = Number(value);
    setIsPlay(false);
};

return (
    <ReactPlayer
        ref={playerRef}
        url={url}
        playing={playing}
        onReady={onReady}
        onProgress={onProgress}
        onBuffer={onBuffer}
        progressInterval={10}
    />
)

어려웠던 점

❗영상 변경 시 이전까지 봤던 시간 그대로 유지해서 재생하기

버퍼링이 발생하면 영상을 수정해야 했는데, 영상 시간을 유지한 채로 바꿔줘야 했다. 사용자가 영상을 11초까지 봤는데, 버퍼링이 발생한 경우에는 영상 url을 바꾸고, 11초부터 실행시켜야 하는 것이다.

url을 교체하면서 seekTo 메서드를 통해 영상 시간을 바꿔주면 된다고 생각했는데, 영상이 계속 처음부터 실행되었다. 이때, 주의할 점은 영상을 변경한 후에, onReady 상태 (영상이 실행 준비된 상태) 에서 시간을 바꿔야한다는 것이다. url을 바꾸고, onReady 콜백 함수가 호출되었을 때, 영상의 시간을 변경하면 이전의 영상 시간을 그대로 유지해서 실행시킬 수 있다.