LL-HLS Video Player 권장 옵션

Classic/VPC 환경에서 이용 가능합니다.

Live Station LL-HLS 환경에서 안정적인 저지연 재생을 구현하기 위한 Video Player Enhancement의 권장 옵션을 설명합니다.

1. VPE V2 React SDK 사용 권장

LL-HLS 재생 시에는 VPE V2 React SDK 환경 사용을 권장합니다. 개발자 가이드는 다음 가이드를 참조해 주십시오.

• VPE2.0 개발자 가이드 소개

2. lowLatencyMode 활성화

Player Option에서 lowLatencyMode를 true로 설정해 주십시오. 이 설정은 LL-HLS 재생을 위해 우선 적용해야 하는 설정입니다.

<VpePlayer
hls={Hls}
accessKey={"..."}
options={{
  playlist: [
    {
      file: "https://.../playlist.m3u8",
    },
  ],
  autostart: true,
  lowLatencyMode: true,
}}
/>

3. hlsConfig 추가 설정

lowLatencyMode: true 설정만으로 원하는 수준의 지연 시간이나 재생 안정성이 확보되지 않는 경우, 아래와 같이 hlsConfig를 추가하여 조정할 수 있습니다.

<VpePlayer
hls={Hls}
hlsConfig={{
  liveSyncDuration: 3,
  maxLiveSyncPlaybackRate: 1.2,
}}
options={{
  lowLatencyMode: true,
  ...
}}
/>

주요 설정값은 다음과 같습니다.

liveSyncDuration

• 라이브 엣지 기준 목표 지연시간(초)을 설정해 주십시오.
• LL-HLS 지연시간에 가장 직접적으로 영향을 주는 값입니다.
• 값을 작게 설정할수록 라이브 엣지에 가깝게 재생할 수 있으나, 서버에 아직 준비되지 않은 PART를 요청할 가능성이 높아져 리버퍼링 또는 재생 불안정 위험이 증가할 수 있습니다.

maxLiveSyncPlaybackRate

• 라이브 엣지와의 간격이 벌어진 경우 플레이어가 따라잡기 위해 사용할 수 있는 최대 재생 배속입니다.
• 예시의 1.2 설정은 최대 1.2배속까지 허용하여 라이브 엣지로 복귀하도록 하는 설정입니다.

따라서 lowLatencyMode를 우선 적용한 뒤, 실제 재생 환경에 따라 liveSyncDuration과 maxLiveSyncPlaybackRate 값을 조절하면서 테스트하는 것을 권장드립니다.

4. 플레이어 기준 지연시간 측정

플레이어 내부에서는 현재 재생 위치와 라이브 엣지의 차이를 이용해 지연시간을 측정할 수 있습니다.

const delay =
video.seekable.end(video.seekable.length - 1) -
video.currentTime;

timeupdate 이벤트마다 위 값을 계산하면 현재 플레이어가 라이브 엣지에서 몇 초 뒤에 재생되고 있는지 확인할 수 있습니다. VPE 데모의 useLiveDelay() 역시 동일한 방식으로 측정하고 있으며, 설정한 liveSyncDuration이 실제 재생 과정에서 어느 정도 유지되고 있는지 확인하는 용도로 활용할 수 있습니다.
단, 해당 값은 플레이어가 인식하는 라이브 엣지 대비 지연시간으로, 인코더 → 패키저 → CDN까지의 전송 구간에서 발생하는 지연시간은 포함되지 않습니다.
우선 lowLatencyMode: true를 적용하여 확인한 후 추가적인 지연시간 단축이 필요한 경우 hlsConfig 값을 조정하면서 테스트해 주십시오.