---
title: "Playback settings"
slug: "vpe-rn-player-options"
updated: 2026-09-17T09:22:36Z
published: 2026-09-17T09:22:36Z
canonical: "guide.ncloud-docs.com/vpe-rn-player-options"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Playback settings

Available in Classic and VPC

Explains how to configure player playback options.

Supported platforms: `Android` `iOS`

## Playback source

### Playlist default settings

Sets the video to play. mp4, hls, and dash formats are supported for playback sources.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>
```

### Multiple video playback

You can deliver multiple playback sources with this `playlist` property to enable continuous playback. You can also override the multiple video playback feature and configure a dynamic playlist for the next video.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
        poster: 'https://CDNdomain/example_image_01.png',
      },
      {
        file: 'https://CDNdomain/example_video_02.mp4',
        poster: 'https://CDNdomain/example_image_02.png'
      },
      {
        file: 'https://CDNdomain/example_video_03.mp4/index.m3u8',
        poster: 'https://CDNdomain/example_image_03.png'
      },
    ],
  }}
/>
```

### Dynamic playlist composition

You can dynamically add the next video to play after the current video finishes.

```
const playerRef = useRef(null);

return (
  <>
    <VpePlayer
      ref={playerRef}
      options={{
        playlist: [
          {
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
          },
        ],
      }}
    />

    <TouchableOpacity onPress={() => {
      playerRef.current.addNextSource({
        file: 'https://CDNdomain/example_video_02.mp4',
        poster: 'https://CDNdomain/example_image_02.png'
      });
    }}>
      Add the next video
    </TouchableOpacity>

    <TouchableOpacity onPress={() => {
      playerRef.current.addPrevSource({
        file: 'https://CDNdomain/example_video_02.mp4',
        poster: 'https://CDNdomain/example_image_02.png'
      });
    }}>
      Add the previous video
    </TouchableOpacity>
  </>
);
```

## Playback operation

### Autostart (auto playback)

The playback source starts automatically.

```
<VpePlayer
  options={{
    autostart: true, // Autoplay (false: Disable autoplay)
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>
```

### autoPause (auto pause)

When the app switches to the background, playback automatically stops.

              Note

              

Picture in Picture is enabled when this property is set to `autoPause: true`.

```
<VpePlayer
  options={{
    autoPause: true, // Auto pause (false: No auto pause)
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>
```

### muted (mute)

When the player is played for the first time, it starts in muted mode.

```
<VpePlayer
  options={{
    muted: true, // Muted on first play (false: Not muted)
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>
```

### repeat (repeated playback)

The video plays repeatedly.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    repeat: true, // Repeat (false: Disable repeat)
  }}
/>
```

### setStartTime (set the initial release date)

Set VOD so that all users watch the same section simultaneously, like a live broadcast.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    setStartTime: "2023-02-08 06:07:00+00:00", // Set initial release date
  }}
/>
```

## Playback control

### playbackRate (playback rate)

Adjust the playback speed. The default value is `1.0`, and you can set a smaller value for slower playback or a larger value for faster playback.

```
<VpePlayer
  options={{
    playbackRate: 0.5, // Playback speed control (default: 1.0)
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>
```

### playRateSetting (playback rate control UI)

Provide a UI that allows users to set the playback speed.

```
<VpePlayer
  options={{
    playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], // 0.5-2.0 x speeds
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>
```

### lowLatencyMode (ultra-low latency mode)

Apply a player optimized for Low Latency HLS. This is the officially supported mode for Low Latency HLS of the Live Station service.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    lowLatencyMode: true, // use LL-HLS (false: LL-HLS not used)
  }}
/>
```

## Subtitle settings (vtt)

This property links a subtitle file in vtt format. In this `playlist` item, you specify subtitle information in the `vtt` array.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
        vtt: [
          {
            id: 'ko',
            file: 'https://vpe.sgrsoft.com/ncp_overview_script_kr_v2.vtt',
            label: 'Korean',
            default: true,
          },
          {
            id: 'en',
            file: 'https://vpe.sgrsoft.com/ncp_overview_script_en_v2.vtt',
            label: 'English',
          },
        ],
      },
    ],
  }}
/>
```

## Metadata settings (description)

This property sets whether to display metadata at the top of the player. Metadata is displayed in the top right corner in full screen mode.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
        description: {
          title: "Introduction to NAVER Cloud",
          created_at: "2023.01.01",
          profile_name: "NAVER Cloud",
          profile_image: "https://CDNdomain/example_image_profile.png",
        },
      },
    ],
  }}
/>
```