---
title: "OTT 特化機能"
slug: "vpe-react-ott"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-react-ott"
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.
# OTT 特化機能
Classic/VPC環境で利用できます。
OTTサービスに必要なイントロ/オープニング/エンディングのスキップ機能、年齢区分表示、コンテンツ警告機能を提供します。各機能は `playlist` アイテム単位で設定します。
## イントロ/オープニング/エンディングのスキップ
各 `playlist` アイテムに、`intro`、`opening`、`ending` のセクションを指定すると、その時点でスキップボタンが自動的に表示されます。
### オプション
すべてのスキップオプションは、`playlist[]` アイテムに設定します。
| 名前 | タイプ | デフォルト値 | 説明 |
| --- | --- | --- | --- |
| `intro` | `{ start: string; duration: number }` | `undefined` | イントロセクション。再生開始時にスキップボタンを表示 |
| `opening` | `{ start: string; duration: number }` | `undefined` | オープニングセクション。当該セクションに進入すると、自動的にスキップされるか、スキップボタンを表示 |
| `ending` | `{ start: string; duration: number }` | `undefined` | エンディングセクション。当該セクションに進入すると、自動的にスキップされるか、スキップボタンを表示 |
各セクションにおけるオブジェクトのフィールドは次の通りです。
| フィールド | タイプ | 説明 |
| --- | --- | --- |
| `start` | String | セクション開始時点。`"HH:MM:SS"` 形式(例: `"00:00:05"`、`"00:01:30"` |
| `duration` | Integer | セクション継続時間(秒) |
### タイプの定義
```
// playlistアイテムの構造
{
file: "string",
poster: "string",
// ...その他のプロパティ
// OTTのスキップセクション
intro: { start: "HH:MM:SS", duration: number },
opening: { start: "HH:MM:SS", duration: number },
ending: { start: "HH:MM:SS", duration: number },
}
```
### 基本ユースケース
```
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export default function OttPlayer() {
return (
);
}
```
### 動作方式
オープニング/エンディングのセクションは、自動スキップに対応しています。動作方式は次の通りです。
- ユーザーが直接 seekしてオープニング/エンディングのセクションに入った場合、自動スキップはバイパスされます。
- 内部スキップ(イントロスキップなど)によってオープニングセクションに進入した場合、自動スキップは維持されます。
スキップボタンの UIは、コントロールバーの表示有無にかかわらず固定オーバーレイとしてレンダリングされ、`center` レイアウトの下部からのオフセットを基準に位置が同期されます。
### スキップイベント
各セクションをスキップすると、次のイベントが発生します。`onEvent` propを通じて受信できます。
| イベント | 説明 |
| --- | --- |
| `introSkip` | イントロセクションをスキップした時に発生 |
| `openingSkip` | オープニングセクションをスキップした時に発生 |
| `endingSkip` | エンディングセクションをスキップした時に発生 |
```
{
switch (event.type) {
case "introSkip":
console.log("イントロをスキップ");
break;
case "openingSkip":
console.log("オープニングをスキップ");
break;
case "endingSkip":
console.log("エンディングをスキップ");
break;
}
}}
/>
```
## 年齢区分表示
`playlist` アイテムの `ageRating` 値を設定すると、再生開始後に年齢区分オーバーレイが自動的に表示されます。
### 対応区分
| 値 | 説明 | i18nキー |
| --- | --- | --- |
| `"all"` | 全年齢対象 | `ageRating.noticeAll` |
| `"12"` | 12歳以上対象 | `ageRating.notice12` |
| `"15"` | 15歳以上対象 | `ageRating.notice15` |
| `"19"` | 19歳以上対象(青少年は鑑賞不可) | `ageRating.notice19` |
### オーバーレイ動作
- 再生開始から3秒経過した時点で1回表示されます。
- fade + slideモーションで表示されます。
- 上部に黒のグラデーション(`opacity 0.3 → 0`)が適用されます。
- 多言語をサポートします。サポート言語は `ko`、`en`、`ja`です。
### 基本ユースケース
```
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export default function AgeRatedPlayer() {
return (
);
}
```
## コンテンツ警告
PlaylistItemの `contentWarnings` 配列を設定すると、再生開始時に当該コンテンツに含まれるセンシティブな要素(暴力、扇情性など)について視聴者にご案内する警告オーバーレイが表示されます。
### サポート警告タイプ
| 値 | 説明 |
| --- | --- |
| `"sexuality"` | 扇情性 |
| `"violence"` | 暴力性 |
| `"language"` | 言語(悪口/卑語) |
| `"drugs"` | 薬物 |
| `"horror"` | ホラー |
| `"imitation"` | 模倣のリスク |
| `"provocative"` | 扇情的な刺激 |
参考
上記の7つが推奨キーですが、任意の文字列も使用できます。
### 基本ユースケース
```
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export default function ContentWarningPlayer() {
return (
);
}
```
## 総合ユースケース
イントロ/オープニングエンディングのスキップ、年齢区分表示、コンテンツ警告をすべて適用したユースケースです。
```
"use client";
import Hls from "hls.js";
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";
import { useRef, useCallback } from "react";
export default function FullOttPlayer() {
const playerRef = useRef(null);
const handleEvent = useCallback((event: any) => {
switch (event.type) {
case "introSkip":
console.log("イントロをスキップ");
break;
case "openingSkip":
console.log("オープニングをスキップ");
break;
case "endingSkip":
console.log("エンディングをスキップ — 次のエピソードへ移動");
// playerRef.current?.next();
break;
}
}, []);
return (
);
}
```