---
title: "재생 설정"
slug: "vpe-react-player-options"
updated: 2026-09-17T09:08:03Z
published: 2026-09-17T09:08:03Z
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.

# 재생 설정

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

참고

- 옵션을 설정하는 속성에 대한 설명은 옵션 레퍼런스를 참고해 주십시오.
- 이용 중인 요금제에 따라 설정 가능한 옵션이 다를 수 있습니다.

## 재생 동작

### autostart (자동 재생)

재생 소스를 자동으로 시작합니다.

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

// 동영상(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autostart: true, // 자동 재생(false: 자동 재생 안 함)
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

자동 재생은 다음 조건 중 하나 이상을 만족할 때만 동작합니다.

- 음소거이거나 볼륨이 0인 경우
- 클릭, 터치, 키 입력 등 사용자의 입력이 발생한 경우
- 환경 설정에서 화이트리스트 페이지로 설정된 경우
- 자동 재생을 지원하는 iframe과 해당 문서가 설정된 경우

### autoPause (자동 정지)

탭 전환 또는 창 최소화 시 자동으로 재생을 정지합니다.

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

// 동영상(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true, // 자동 정지(false: 자동 정지 안 함)
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

### muted (음소거)

플레이어를 처음 재생 시 음소거 상태로 재생합니다.

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

// 동영상(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true, // 처음 재생 시 음소거(false: 음소거 안 함)
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

### repeat (반복 재생)

영상을 반복 재생합니다.

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

// 동영상(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        repeat: true, // 반복 재생(false: 반복 재생 안 함)
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

### setStartTime (최초 공개일 설정)

라이브 방송처럼 VOD를 모든 사용자가 동시에 동일 구간을 시청하도록 설정합니다.

참고

Standard 요금제에서만 사용할 수 있습니다.

- VOD에만 적용됩니다.
- 날짜 포맷은 UTC 형식을 지원합니다.

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

// 동영상(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true,
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4",
          },
        ],
        setStartTime: "2023-02-08 06:07:00+00:00", // 최초 공개일 설정
      }}
    />
  );
}
```

## 재생 제어

### playbackRate (재생 속도)

재생 속도를 조절합니다. 미지정 시 기본값은 `1.0`입니다.

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

// 동영상(MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true,
        playbackRate: 0.5, // 재생 속도 조절(기본값: 1.0)
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

### playRateSetting (재생 속도 조절 UI)

사용자가 재생 속도를 설정할 수 있도록 UI를 제공합니다.

참고

Standard 요금제에서만 사용할 수 있습니다.

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

// 동영상(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://CDN도메인/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}
```

### lowLatencyMode (초저지연 모드)

Low Latency HLS에 최적화된 플레이어를 적용합니다. Live Station 서비스의 Low Latency HLS를 공식 지원하는 모드입니다.

참고

Standard 요금제에서만 사용할 수 있습니다.

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

// 동영상(HLS)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            file: "https://CDN도메인/example_video_01.mp4/index.m3u8",
          },
        ],
        lowLatencyMode: true, // LL-HLS 사용(false: LL-HLS 사용 안 함)
      }}
    />
  );
}
```

## OTT 설정

OTT 서비스에 필요한 인트로/오프닝/엔딩 스킵, 연령 등급 표시, 콘텐츠 경고 기능을 `playlist` 아이템 단위로 설정합니다.

참고

자세한 사용 방법은 [OTT 특화 기능](https://developer.vpe.naverncp.com/docs/react/ott-features) 문서를 참조해 주십시오.

### 인트로/오프닝/ 엔딩 스킵

각 구간의 시작 시점과 지속 시간을 설정하면 해당 시점에 스킵 버튼이 자동으로 표시됩니다.

```
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://CDN도메인/episode_01.m3u8",
            intro: {
              start: "00:00:00", // HH:MM:SS 형식
              duration: 5,       // 초 단위
            },
            opening: {
              start: "00:00:05",
              duration: 90,
            },
            ending: {
              start: "00:45:00",
              duration: 60,
            },
          },
        ],
      }}
    />
  );
}
```

### ageRating (연령 등급 표시)

재생 시작 시 연령 등급 오버레이를 표시합니다. 지원 값: `"all"` `"12"` `"15"` `"19"`

```
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://CDN도메인/episode_01.m3u8",
            description: {
              title: "드라마 시즌1 EP.01",
            },
            ageRating: "15", // 15세 이상 관람가
          },
        ],
      }}
    />
  );
}
```

### contentWarnings (콘텐츠 경고)

콘텐츠에 포함된 민감한 요소(폭력성, 선정성 등)를 시청자에게 안내하는 경고 오버레이를 표시합니다. 권장 키: `"sexuality"` `"violence"` `"language"` `"drugs"` `"horror"` `"imitation"` `"provocative"`

```
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://CDN도메인/episode_01.m3u8",
            contentWarnings: ["violence", "language"],
          },
        ],
      }}
    />
  );
}
```