---
title: "再生設定"
slug: "vpe-tv-player-options"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-tv-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環境で利用できます。

プレイヤーの再生に関するオプションの設定方法をご案内します。

## 基本設定 - playlist

再生する動画を設定します。再生ソースは、MP4、HLS、DASH形式に対応しています。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## 複数の動画を再生

`playlist` プロパティで複数の再生ソースを送信することで、連続再生が可能です。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [
            {
                file: 'https://example.com/video1.m3u8',
                poster: 'https://example.com/poster1.jpg',
                description: { title: '1番目の動画' },
            },
            {
                file: 'https://example.com/video2.m3u8',
                description: { title: '2番目の動画' },
            },
        ],
        autostart: true,
    }}
    onBack={() => navigation.goBack()}
/>
```

## 動的プレイリストの構成

動画再生が完了した後、次に再生する動画を動的に追加できます。

```
const playerRef = useRef<PlayerHandle>(null);

// 単一の動画を追加
playerRef.current?.addNextSource({
    file: 'https://example.com/new_video.m3u8',
    description: { title: '新しい動画' },
});

// 複数の動画を同時に追加
playerRef.current?.addPrevSource([
    { file: 'https://example.com/video_1.mp4' },
    { file: 'https://example.com/video_2.mp4' },
]);
```

## autostart

`autostart` プロパティで動画を自動再生できます。デフォルト値は `true`です。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        autostart: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## muted

`muted` プロパティで初回再生時にミュート状態で再生できます。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        muted: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## playRateSetting

`playRateSetting` プロパティでユーザーが再生速度を選択できる UIを提供します。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playRateSetting: [0.5, 0.75, 1, 1.5, 2],
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## repeat

`repeat` プロパティで動画をループ再生できます。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        repeat: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## 字幕設定

`playlist.vtt` プロパティで字幕を提供できます。VTTおよび SMI形式に対応しており、SMIファイルの EUC-KRエンコードは自動的にデコードされます。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
            vtt: [
                { id: 'ko', file: 'https://example.com/ko.vtt', label: '韓国語', default: true },
                { id: 'en', file: 'https://example.com/en.vtt', label: 'English' },
                { id: 'ja', file: 'https://example.com/ja.smi', label: '日本語' },
            ],
        }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## lowLatencyMode(ライブ)

`lowLatencyMode` プロパティで LL-HLS低遅延モードを有効にできます。ライブストリームは自動的に検出されます。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        lowLatencyMode: true,
        playlist: [{
            file: 'https://example.com/live.m3u8',
            description: { title: 'ライブ配信' },
        }],
    }}
    onBack={() => navigation.goBack()}
/>
```

ライブと検出されると、次のように動作します。

- `TimeBtn`に赤い点と「LIVE」を表示
- 再生速度メニューを非表示
- `SeekBar` シークを無効化

## lowLatencyModeプラットフォーム別動作

`lowLatencyMode` の有効化時のプラットフォーム別動作は、次の通りです。

| プラットフォーム | 動作 |
| --- | --- |
| Android TV | ExoPlayer `targetOffsetMs: 2000`(ライブエッジ2秒目標) |
| tvOS | AVPlayer `preferredForwardBufferDuration: 2` |

5秒以上遅れると、自動的にライブエッジに戻ります。

## メタデータ設定

`playlist.description` プロパティで動画のメタ情報を表示できます。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
            description: {
                title: 'NAVERクラウドの紹介',
                created_at: '2024.01.01',
                profile_name: 'NAVERクラウド',
                profile_image: 'https://example.com/profile.png',
            },
        }],
    }}
    onBack={() => navigation.goBack()}
/>
```

## ウォーターマーク

`visibleWatermark` プロパティでウォーターマークを表示できます。

```
<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{ file: 'https://example.com/video.m3u8' }],
        visibleWatermark: true,
        watermarkText: 'SAMPLE@example.com',
        watermarkConfig: {
            randPosition: true,
            randPositionInterVal: 5000,
            opacity: 0.4,
        },
    }}
    onBack={() => navigation.goBack()}
/>
```