LL-HLS Video Player recommended options

Available in Classic and VPC

This guide describes the recommended options for Video Player Enhancement to implement stable low latency playback in a Live Station LL-HLS environment.

1. Using VPE V2 React SDK recommended

We recommend using the VPE V2 React SDK environment for LL-HLS playback. For the developer guide, see the following guides:

• Introduction to VPE 2.0 developer guide

2. Enable lowLatencyMode

Set lowLatencyMode to true in Player Option. This setting must be applied first for LL-HLS playback.

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

3. Additional hlsConfig settings

If the desired level of latency or playback stability is not secured by only setting lowLatencyMode: true, you can adjust it by adding hlsConfig as follows:

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

The main settings are as follows:

liveSyncDuration

• Set the target latency (seconds) based on the live edge.
• This value has the most direct impact on LL-HLS latency.
• Setting a lower value allows playback closer to the live edge, but it may increase the risk of rebuffering or playback instability by increasing the likelihood of requesting a PART that is not yet ready on the server.

maxLiveSyncPlaybackRate

• The maximum playback speed the player can use to catch up when the gap with the live edge increases.
• For example, the 1.2 setting allows a maximum of 1.2x speed to return to the live edge.

Therefore, we recommend first applying lowLatencyMode and then testing while adjusting liveSyncDuration and maxLiveSyncPlaybackRate values according to the actual playback environment.

4. Latency measurement based on the player

Latency can be measured within the player by using the difference between the current playback position and the live edge.

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

By calculating the above value for each timeupdate event, you can check how many seconds behind the live edge the current player is playing. The useLiveDelay() in the VPE demo is also measured in the same way, and it can be used to check how well the set liveSyncDuration is being maintained during the actual playback process.
Note that this value is the latency relative to the live edge recognized by the player and does not include latency occurring in the transmission section from the encoder to the packager to the CDN.
First, apply lowLatencyMode: true to check, and if additional latency reduction is required, test by adjusting the hlsConfig value.