---
title: "再生設定"
slug: "vpe-react-player-options"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
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",
          },
        ],
      }}
    />
  );
}
```

自動再生は、以下の条件のうち1つ以上を満たす場合にのみ動作します。

- ミュートになっているか、ボリュームが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(年齢区分表示)

再生開始時に年齢区分オーバーレイを表示します。 対応値: `&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://CDNドメイン/episode_01.m3u8",
            description: {
              title: "ドラマ シーズン1 EP.01",
            },
            ageRating: "15", // 15歳以上対象
          },
        ],
      }}
    />
  );
}
```

### contentWarnings(コンテンツ警告)

コンテンツに含まれるセンシティブな要素(暴力、扇情性など)について、視聴者にご案内する警告オーバーレイを表示します。 推奨キー: `&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://CDNドメイン/episode_01.m3u8",
            contentWarnings: ["violence", "language"],
          },
        ],
      }}
    />
  );
}
```