React Player의 SeekTo 기능 문제 분석 및 해결 방안

React Player의 SeekTo 기능 문제 분석 및 해결 방안

React Player를 사용해 비디오 재생 중 특정 구간으로 이동할 때, seekTo 메서드를 사용하여 해당 위치로 점프할 수 있습니다. 하지만 YouTube URL과 같이 일부 비디오 소스에서 seekTo를 사용하면 무한 로딩처럼 보이는 문제가 발생할 수 있습니다. 이번 글에서는 이 문제의 원인을 분석하고, 적절한 해결 방안을 제시합니다.

YouTube URL을 사용할 때 seekTo 메서드를 이용해 발생하는 문제와 그 해결 방법

---

1. 문제 설명: SeekTo 사용 시 무한 로딩처럼 보임

문제 상황:

• YouTube URL을 사용해 비디오를 재생 중 seekTo 메서드를 호출하면, 비디오가 특정 구간으로 이동해야 하는데 로딩 화면이 계속 보이며, 재생이 제대로 되지 않는 현상이 발생합니다.
• 문제는 m3u8 또는 mp4 파일은 정상적으로 seekTo 기능이 작동하지만, YouTube URL에서는 해당 문제가 발생한다는 것입니다.

문제 코드 예시:

useEffect(() => {
  if (isReady && isBuffering && seekPendingRef.current && state.duration > 0) {
    // 영상 로드 후 특정 위치로 이동 시도
    playerRef.current.seekTo(state.lastPlayedTime); 
    seekPendingRef.current = false;
    setIsLoading(false);
  }
}, [isReady, isBuffering, state.duration, isSubtitleInitialized]);

 

이 코드에서는 컴포넌트가 로드된 후 특정 구간으로 이동하는데, YouTube URL의 경우 seekTo가 호출되더라도 재생이 되지 않고 로딩 상태로 남아 있습니다.

---

2. 문제 원인 분석

이 문제는 주로 YouTube의 비디오 버퍼링 방식과 관련이 있습니다. YouTube는 자체적인 버퍼링과 네트워크 요청 최적화 기능을 갖추고 있기 때문에, 특정 위치로 이동하는 경우에도 비디오가 바로 로드되지 않거나, 무한 로딩처럼 보일 수 있습니다.

일반적인 mp4 파일은 클라이언트에서 바로 스트리밍이 가능한데 반해, YouTube API는 추가적인 버퍼링 과정이 필요합니다. 이로 인해 seekTo가 호출된 이후에도 비디오가 즉각적으로 재생되지 않고, 화면에 로딩 상태가 계속 유지되는 현상이 발생할 수 있습니다.

---

3. 해결 방안

3.1. 비디오가 준비되었는지 확인 후 seekTo 호출

YouTube와 같은 스트리밍 서비스에서는 비디오가 완전히 로드되고 나서 seekTo를 호출하는 것이 중요합니다. 이를 위해 비디오의 준비 상태를 확인하고, 준비 완료 후에 seekTo를 실행하는 방법을 사용할 수 있습니다.

useEffect(() => {
  if (isReady && !isBuffering && state.duration > 0) {
    // 비디오가 로드되고 나서만 seekTo 호출
    playerRef.current.seekTo(state.lastPlayedTime);
    setIsLoading(false);
  }
}, [isReady, isBuffering, state.duration]);

 

위 코드는 비디오가 로드된 후 버퍼링이 완료되었을 때 seekTo를 호출하도록 변경하여, 비디오 로딩 문제를 해결합니다.

---

3.2. seekTo 호출 시점 지연

비디오가 충분히 버퍼링되지 않은 상태에서 seekTo를 호출할 경우에도 문제가 발생할 수 있으므로, setTimeout을 사용해 seekTo 호출을 지연시키는 방법도 고려할 수 있습니다.

useEffect(() => {
  if (isReady && !isBuffering && state.duration > 0) {
    // 1초 지연 후 seekTo 호출
    setTimeout(() => {
      playerRef.current.seekTo(state.lastPlayedTime);
      setIsLoading(false);
    }, 1000);
  }
}, [isReady, isBuffering, state.duration]);

 

지연 시간을 주면 비디오 버퍼링이 더 안정적으로 완료된 후 seekTo를 호출할 수 있습니다.

---

3.3. 이벤트 리스너를 통한 해결

React Player는 여러 비디오 상태를 체크할 수 있는 이벤트 리스너를 제공합니다. onBufferEnd 이벤트를 활용하여 비디오가 버퍼링을 마친 후 seekTo를 호출하도록 설정할 수 있습니다.

<ReactPlayer
  url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
  ref={playerRef}
  onBufferEnd={() => {
    // 버퍼링 완료 후 seekTo 호출
    playerRef.current.seekTo(state.lastPlayedTime);
    setIsLoading(false);
  }}
  controls
/>

 

onBufferEnd 이벤트는 비디오가 더 이상 버퍼링되지 않고 재생 준비가 완료된 상태를 알려줍니다. 이 이벤트를 활용하여 seekTo가 정확한 타이밍에 호출되도록 설정할 수 있습니다.

---

4. 기타 추가 해결 방법

4.1. React Player 업데이트 확인

종종 라이브러리의 문제로 특정 기능이 제대로 동작하지 않을 수 있습니다. 이럴 때는 React Player의 최신 버전으로 업데이트하거나, GitHub 이슈 트래커를 확인하여 유사한 문제가 보고되었는지 파악하는 것도 좋은 방법입니다.

npm update react-player

 

4.2. seekTo의 옵션 값 확인

seekTo 메서드는 특정 시간으로 점프할 수 있지만, fraction(비율) 또는 seconds(초 단위) 값으로 지정할 수 있습니다. YouTube에서는 fraction 값을 사용하는 것이 좀 더 안정적일 수 있습니다.

playerRef.current.seekTo(0.5); // 비디오 재생의 50% 지점으로 이동

 

---

5. 결론

YouTube와 같은 스트리밍 플랫폼에서 seekTo 기능이 잘 동작하지 않는 문제는 주로 비디오의 버퍼링 및 로드 상태와 관련이 있습니다. 비디오가 완전히 로드되지 않으면 seekTo가 제대로 동작하지 않고, 무한 로딩 상태처럼 보일 수 있습니다.

이를 해결하기 위해, 비디오가 로드된 후 seekTo를 호출하는 방식을 채택하거나, 이벤트 리스너를 통해 버퍼링 완료 시점에 맞춰 seekTo를 호출하는 방법을 사용할 수 있습니다. 이러한 방법을 통해 보다 안정적인 비디오 플레이어를 구현할 수 있습니다.