Flutter 프로젝트를 진행하면서 두 개의 네트워크 비디오를 동시에 재생하려고 하였다. better_player_plus, chewie 등 다양한 패키지를 시도해 보았지만, 상황은 크게 나아지지 않았다.
특히 iOS에서는 정상적으로 잘 재생되던 영상들이 Android에서는 버퍼링이 심하게 발생하는 문제가 있었다.
네트워크 상태와 상관없이 AOS 기기에서는 끊김 현상이 빈번하게 발생해 안정적인 재생이 어려웠다.
그러나 예상보다 심각한 버퍼링과 동기화 문제를 경험하게 되었다.
해결 방법을 찾던 중, Stack Overflow에서 비슷한 문제를 겪은 개발자들이 CachedVideoPlayerPlus를 추천하는 것을 발견하였다.
바로 pub.dev에서 관련 문서를 찾아 읽어보았고, 이를 통해 문제 해결의 실마리를 얻을 수 있었다.
문제 상황
- 버퍼링 문제:
기본 VideoPlayerController로 재생할 때, 네트워크 환경에 따라 영상이 자주 끊기거나 딜레이가 발생. - 동기화 문제:
두 영상의 재생 위치가 점점 어긋나 일관성 없는 재생이 발생.
해결 방법
1. 버퍼링 문제 해결 🔄
CachedVideoPlayerPlusController 사용
VideoPlayerController 대신 CachedVideoPlayerPlusController를 사용하여 네트워크 비디오를 캐시하면서 재생하도록 변경하였다.
이를 통해 네트워크 버퍼링 문제를 현저히 줄일 수 있었다.
재생 전 지연 추가
비디오 초기화가 완료된 후, 약 0.5초 정도 대기한 뒤 재생을 시작하였다.
이 과정을 통해 네트워크 연결 안정성을 확보하고, 초기 버퍼링 문제를 예방할 수 있었다.
2. 동기화 문제 해결 ⏯️
동기화 작업 제어
동기화 작업이 진행 중일 때는 새로운 동기화 작업을 차단하여 중복 실행을 방지하였다.
버퍼링 완료 후 동기화
두 비디오 모두 버퍼링이 완료된 상태를 확인한 후에만 동기화를 시작하였다.
이 과정을 통해 네트워크 지연이나 로딩 중 끊김 없이 자연스러운 동기화를 구현할 수 있었다.
동기화 구현 과정
- 비디오 로드 및 초기화
- 첫 번째 단계는 두 개의 비디오를 CachedVideoPlayerPlusController를 사용해 네트워크에서 로드하는 것이다.
- CachedVideoPlayerPlusController는 비디오를 효율적으로 캐시하면서 스트리밍 할 수 있도록 도와주기 때문에 네트워크 비디오 재생에 적합하다.
- 각 비디오에 대해 initialize()를 호출하여 비디오 초기화를 기다린다.
- 버퍼링 최소화
- 비디오를 로드한 후 바로 동기화를 시작하는 대신, 약 0.5초 정도의 짧은 지연을 추가.
- 이렇게 하면 네트워크에서 비디오를 로드하면서 발생할 수 있는 초기 버퍼링을 최소화할 수 있다.
- 이 지연은 비디오 스트리밍의 안정성을 높이기 위한 예방적인 조치이다.
- 버퍼링 완료까지 대기
- 비디오 초기화가 끝났다고 해도, 버퍼링이 아직 진행 중일 수 있다.
- 따라서 각 비디오의 isBuffering 상태를 확인하고, 두 비디오 모두 버퍼링이 끝날 때까지 기다린다.
- 이는 비디오가 재생되기 전에 충분한 데이터를 버퍼링할 수 있도록 보장하는 단계다.
- 동기화 리스너 추가
- 버퍼링이 완료되면, 두 비디오의 재생 위치를 동기화하기 위해 리스너를 추가.
- 이 리스너는 비디오의 재생 상태를 실시간으로 감지하고, 두 비디오가 동일한 위치에서 재생되도록 조정한다.
마무리 🎯
- CachedVideoPlayerPlusController를 활용하여 네트워크 버퍼링 문제를 크게 개선할 수 있었다.
- 비디오 초기화 후 짧은 대기 시간을 추가하고, 버퍼링 상태를 체크함으로써 초기 재생 안정성을 높였다.
- 동기화 플래그를 통해 중복 동기화를 방지하고, 위치와 재생 상태를 주기적으로 맞추어 안정적인 동기화 재생을 구현하였다.