--- title: "OTT 特化機能" slug: "vpe-tv-ott" updated: 2026-09-17T09:22:05Z published: 2026-09-17T09:22:05Z canonical: "guide.ncloud-docs.com/vpe-tv-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アイテム単位で設定します。 ## イントロ/オープニング/エンディングのスキップ 各 PlaylistItemに、`intro`、`opening`、`ending` のセクションを指定すると、その時点でスキップボタンが自動的に表示されます。 ### オプション すべてのスキップオプションは、`playlist[]` アイテムに設定します。 | 名前 | タイプ | デフォルト値 | 説明 | | --- | --- | --- | --- | | intro | { start: string; duration: number } | undefined | イントロセクション(再生開始時にスキップボタンを表示) | | opening | { start: string; duration: number } | undefined | オープニングセクション(当該セクションに進入すると、自動的にスキップされるか、スキップボタンを表示) | | ending | { start: string; duration: number } | undefined | エンディングセクション(当該セクションに進入すると、自動的にスキップされるか、スキップボタンを表示) | - `start`: セクション開始時点("HH:MM:SS"形式、例: "00:00:05"、"00:01:30") - `duration`: セクション継続時間(秒単位の数値) ### ユースケース スキップセクションを設定するユースケースは、次の通りです。 ``` import { VpePlayer } from "@sgrsoft/vpe-reactnative-tv-sdk"; export default function OttPlayer() { return ( navigation.goBack()} /> ); } ``` ### 自動スキップ動作 - ユーザーが直接 `seek`してオープニング/エンディングのセクションに入った場合 — 自動スキップはバイパスされます(ユーザーの意図を尊重するため)。 - 内部スキップ(イントロスキップなど)によってオープニングセクションに進入した場合 — 自動スキップは維持されます。 ### スキップボタン UI - コントロールバーの表示有無にかかわらず、固定オーバーレイとしてレンダリングされます。 - 位置は、`center` レイアウトの下部からのオフセットを基準に同期されます。 - リモコンの D-padでスキップボタンにフォーカスを合わせたり選択できます。 ### スキップイベント スキップ動作時に発生するイベントは次の通りです。 | イベント | 説明 | | --- | --- | | introSkip | イントロセクションをスキップした際に発生 | | openingSkip | オープニングセクションをスキップした際に発生 | | endingSkip | エンディングセクションをスキップした際に発生 | ``` { switch (event.type) { case "introSkip": console.log("イントロをスキップ"); break; case "openingSkip": console.log("オープニングをスキップ"); break; case "endingSkip": console.log("エンディングをスキップ"); break; } }} onBack={() => navigation.goBack()} /> ``` ## 年齢区分表示 `PlaylistItem`の `ageRating` 値を設定すると、再生開始後に年齢区分オーバーレイが自動的に表示されます。 ### 対応区分 `ageRating`に設定できる値は次の通りです。 | 値 | 説明 | | --- | --- | | "all" | 全年齢対象 | | "12" | 12歳以上対象 | | "15" | 15歳以上対象 | | "19" | 19歳以上対象(青少年は鑑賞不可) | ### オーバーレイ動作 - 再生開始から3秒経過した時点で1回表示されます。 - fade + slideモーションで表示されます。 - 多言語対応: ko / en / ja ### ユースケース `ageRating`を設定するユースケースは次の通りです。 ``` import { VpePlayer } from "@sgrsoft/vpe-reactnative-tv-sdk"; export default function AgeRatedPlayer() { return ( navigation.goBack()} /> ); } ``` ## コンテンツ警告 `PlaylistItem`の `contentWarnings` 配列を設定すると、再生開始時に当該コンテンツに含まれるセンシティブな要素について視聴者にご案内する警告オーバーレイが表示されます。 ### サポート警告タイプ `contentWarnings`に設定できる値は次の通りです。 | 値 | 説明 | | --- | --- | | "sexuality" | 扇情性 | | "violence" | 暴力性 | | "language" | 言語(悪口/卑語) | | "drugs" | 薬物 | | "horror" | ホラー | | "imitation" | 模倣のリスク | | "provocative" | 扇情的な刺激 | 上記の7つが推奨キーですが、任意の文字列も使用できます。 ### ユースケース `contentWarnings`を設定するユースケースは次の通りです。 ``` import { VpePlayer } from "@sgrsoft/vpe-reactnative-tv-sdk"; export default function ContentWarningPlayer() { return ( navigation.goBack()} /> ); } ``` ## 総合ユースケース イントロ/オープニングエンディングのスキップ、年齢区分表示、コンテンツ警告をすべて適用したユースケースは、次の通りです。 ``` import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-reactnative-tv-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 ( navigation.goBack()} /> ); } ```