---
title: "Playback settings"
slug: "vpe-react-player-options"
updated: 2026-09-17T09:22:36Z
published: 2026-09-17T09:22:36Z
canonical: "guide.ncloud-docs.com/vpe-react-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

              Note

              

- For descriptions of properties to set options, see the option reference.
- The available options may vary depending on your subscription plan.

## Playback operation

### Autostart (auto playback)

The playback source starts automatically.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autostart: true, // Autoplay (false: Disable autoplay)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

Autoplay works only when one or more of the following conditions are met:

- When muted or when the volume is set to 0
- When a user's input such as click, touch, or key press occurs
- When set to whitelist page in the settings
- When iframe that supports autoplay and the relevant document are set

### autoPause (auto pause)

Playback automatically stops when switching tabs or minimizing the window.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      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.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      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.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        repeat: true, // Repeat (false: Disable repeat)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

### setStartTime (set the initial release date)

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

              Note

              

Available only with the standard plan.

- This applies only to VOD.
- Date format supports UTC format.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true,
        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. If not specified, the default value is `1.0`.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true,
        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.

              Note

              

Available only with the standard plan.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true,
        playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
        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.

              Note

              

Available only with the standard plan.

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (HLS)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4/index.m3u8",
          },
        ],
        lowLatencyMode: true, // use LL-HLS (false: LL-HLS not used)
      }}
    />
  );
}
```

## OTT settings

Configure features such as intro/opening/ending skip, age rating display, and content warnings on the `playlist` item basis for OTT services.

              Note

              

For detailed usage instructions, see [OTT-specific features](https://developer.vpe.naverncp.com/docs/react/ott-features) documentation.

### Configure intro, opening, and ending skip

When you set the start time and duration of each section, a skip button is automatically displayed at that point.

```
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        autostart: true,
        muted: true,
        playlist: [
          {
            file: "https://CDNdomain/episode_01.m3u8",
            intro: {
              start: "00:00:00", // HH:MM:SS format
              duration: 5,       // in seconds
            },
            opening: {
              start: "00:00:05",
              duration: 90,
            },
            ending: {
              start: "00:45:00",
              duration: 60,
            },
          },
        ],
      }}
    />
  );
}
```

### ageRating (age rating indication)

Display an age rating overlay at the start of playback. Supported values: `&quot;all&quot;` `&quot;12&quot;` `&quot;15&quot;` `&quot;19&quot;`

```
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        autostart: true,
        muted: true,
        playlist: [
          {
            file: "https://CDNdomain/episode_01.m3u8",
            description: {
              title: "Drama season 1 EP. 01",
            },
            ageRating: "15", // Ages 15 and up
          },
        ],
      }}
    />
  );
}
```

### contentWarnings (content warning)

Display a warning overlay that informs viewers of sensitive elements in the content (such as violence or sexual themes). Recommended key: `&quot;sexuality&quot;` `&quot;violence&quot;` `&quot;language&quot;` `&quot;drugs&quot;` `&quot;horror&quot;` `&quot;imitation&quot;` `&quot;provocative&quot;`

```
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        autostart: true,
        muted: true,
        playlist: [
          {
            file: "https://CDNdomain/episode_01.m3u8",
            contentWarnings: ["violence", "language"],
          },
        ],
      }}
    />
  );
}
```