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

# 재생 설정

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

플레이어 재생과 관련된 옵션을 설정하는 방법을 설명합니다.

지원 플랫폼: `Android` `iOS`

## 재생 소스

### 플레이리스트 기본 설정

재생할 영상을 설정합니다. 재생 소스는 mp4, hls, dash 형식을 지원합니다.

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

### 여러 영상 재생

`playlist` 속성으로 여러 개의 재생 소스를 전달하여 연속 재생할 수 있습니다. 또한 여러 영상 재생 기능을 재정의(Override)할 수 있으며, 다음 재생할 영상을 동적 플레이리스트로 구성할 수 있습니다.

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

### 동적 플레이리스트 구성

영상 재생이 완료된 후 다음에 재생할 영상을 동적으로 추가할 수 있습니다.

```
const playerRef = useRef(null);

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

    <TouchableOpacity onPress={() => {
      playerRef.current.addNextSource({
        file: 'https://CDN도메인/example_video_02.mp4',
        poster: 'https://CDN도메인/example_image_02.png',
      });
    }}>
      다음 영상 추가
    </TouchableOpacity>

    <TouchableOpacity onPress={() => {
      playerRef.current.addPrevSource({
        file: 'https://CDN도메인/example_video_02.mp4',
        poster: 'https://CDN도메인/example_image_02.png',
      });
    }}>
      이전 영상 추가
    </TouchableOpacity>
  </>
);
```

## 재생 동작

### autostart (자동 재생)

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

```
<VpePlayer
  options={{
    autostart: true, // 자동 재생(false: 자동 재생 안 함)
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
  }}
/>
```

### autoPause (자동 정지)

앱이 백그라운드로 전환될 시 자동으로 재생을 정지합니다.

참고

`autoPause: true`가 되어야 Picture in Picture 기능이 활성화됩니다.

```
<VpePlayer
  options={{
    autoPause: true, // 자동 정지(false: 자동 정지 안 함)
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
  }}
/>
```

### muted (음소거)

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

```
<VpePlayer
  options={{
    muted: true, // 처음 재생 시 음소거(false: 음소거 안 함)
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
  }}
/>
```

### repeat (반복 재생)

영상을 반복 재생합니다.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
    repeat: true, // 반복 재생(false: 반복 재생 안 함)
  }}
/>
```

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

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

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
    setStartTime: "2023-02-08 06:07:00+00:00", // 최초 공개일 설정
  }}
/>
```

## 재생 제어

### playbackRate (재생 속도)

재생 속도를 조절합니다. 기본값은 `1.0`이며, 이보다 작은 값으로 느리게, 큰 값으로 빠르게 설정할 수 있습니다.

```
<VpePlayer
  options={{
    playbackRate: 0.5, // 재생 속도 조절(기본값: 1.0)
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
  }}
/>
```

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

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

```
<VpePlayer
  options={{
    playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], // 0.5배속 ~ 2배속
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
  }}
/>
```

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

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

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
      },
    ],
    lowLatencyMode: true, // LL-HLS 사용(false: LL-HLS 사용 안 함)
  }}
/>
```

## 자막 설정 (vtt)

VTT 형식의 자막 파일을 연결합니다. `playlist` 항목의 `vtt` 배열에 자막 정보를 지정합니다.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
        vtt: [
          {
            id: 'ko',
            file: 'https://vpe.sgrsoft.com/ncp_overview_script_kr_v2.vtt',
            label: '한국어',
            default: true,
          },
          {
            id: 'en',
            file: 'https://vpe.sgrsoft.com/ncp_overview_script_en_v2.vtt',
            label: 'English',
          },
        ],
      },
    ],
  }}
/>
```

## 메타데이터 설정 (description)

플레이어 상단에 메타데이터 표시 여부를 설정합니다. 풀스크린 시 오른쪽 상단에 메타데이터가 표시됩니다.

```
<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDN도메인/example_video_01.mp4',
        description: {
          title: "네이버클라우드 소개",
          created_at: "2023.01.01",
          profile_name: "네이버클라우드",
          profile_image: "https://CDN도메인/example_image_profile.png",
        },
      },
    ],
  }}
/>
```