---
title: "再生設定"
slug: "vpe-rn-player-options"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
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(自動停止)

アプリがバックグラウンドに移行すると、自動的に再生が停止します。

              参考

              

Picture in Picture機能が有効になるには、`autoPause: true`になる必要があります。

```
<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: "NAVERクラウドの紹介",
          created_at: "2023.01.01",
          profile_name: "NAVERクラウド",
          profile_image: "https://CDNドメイン/example_image_profile.png",
        },
      },
    ],
  }}
/>
```