OTT 特化機能

Classic/VPC環境で利用できます。

OTTサービスに必要なイントロ/オープニング/エンディングのスキップ機能、年齢区分表示、コンテンツ警告機能を提供します。各機能は playlistアイテム単位で設定します。

イントロ/オープニング/エンディングのスキップ

各 PlaylistItemに、intro、opening、ending のセクションを指定すると、その時点でスキップボタンが自動的に表示されます。

オプション

すべてのスキップオプションは、playlist[] アイテムに設定します。

• start: セクション開始時点("HH:MM:SS"形式、例: "00:00:05"、"00:01:30")

• duration: セクション継続時間(秒単位の数値)

ユースケース

スキップセクションを設定するユースケースは、次の通りです。

import { VpePlayer } from "@sgrsoft/vpe-reactnative-tv-sdk";

export default function OttPlayer() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [
                    {
                        file: "https://CDN_DOMAIN/episode_01.m3u8",
                        poster: "https://CDN_DOMAIN/episode_01.jpg",
                        intro: {
                            start: "00:00:00",
                            duration: 5,
                        },
                        opening: {
                            start: "00:00:05",
                            duration: 90,
                        },
                        ending: {
                            start: "00:45:00",
                            duration: 60,
                        },
                    },
                ],
                autostart: true,
            }}
            onBack={() => navigation.goBack()}
        />
    );
}

自動スキップ動作

• ユーザーが直接 seekしてオープニング/エンディングのセクションに入った場合 — 自動スキップはバイパスされます(ユーザーの意図を尊重するため)。
• 内部スキップ(イントロスキップなど)によってオープニングセクションに進入した場合 — 自動スキップは維持されます。

スキップボタン UI

• コントロールバーの表示有無にかかわらず、固定オーバーレイとしてレンダリングされます。
• 位置は、center レイアウトの下部からのオフセットを基準に同期されます。
• リモコンの D-padでスキップボタンにフォーカスを合わせたり選択できます。

スキップイベント

スキップ動作時に発生するイベントは次の通りです。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: "https://CDN_DOMAIN/episode_01.m3u8",
            intro: { start: "00:00:00", duration: 5 },
            opening: { start: "00:00:05", duration: 90 },
            ending: { start: "00:45:00", duration: 60 },
        }],
    }}
    onEvent={(event) => {
        switch (event.type) {
            case "introSkip":
                console.log("イントロをスキップ");
                break;
            case "openingSkip":
                console.log("オープニングをスキップ");
                break;
            case "endingSkip":
                console.log("エンディングをスキップ");
                break;
        }
    }}
    onBack={() => navigation.goBack()}
/>

年齢区分表示

PlaylistItemの ageRating 値を設定すると、再生開始後に年齢区分オーバーレイが自動的に表示されます。

対応区分

ageRatingに設定できる値は次の通りです。

オーバーレイ動作

• 再生開始から3秒経過した時点で1回表示されます。
• fade + slideモーションで表示されます。
• 多言語対応: ko / en / ja

ユースケース

ageRatingを設定するユースケースは次の通りです。

import { VpePlayer } from "@sgrsoft/vpe-reactnative-tv-sdk";

export default function AgeRatedPlayer() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "https://CDN_DOMAIN/episode_01.m3u8",
                    poster: "https://CDN_DOMAIN/episode_01.jpg",
                    description: {
                        title: "ドラマ シーズン1 EP.01",
                        profile_name: "OTTチャンネル",
                    },
                    ageRating: "15",
                }],
                autostart: true,
            }}
            onBack={() => navigation.goBack()}
        />
    );
}

コンテンツ警告

PlaylistItemの contentWarnings 配列を設定すると、再生開始時に当該コンテンツに含まれるセンシティブな要素について視聴者にご案内する警告オーバーレイが表示されます。

サポート警告タイプ

contentWarningsに設定できる値は次の通りです。

上記の7つが推奨キーですが、任意の文字列も使用できます。

ユースケース

contentWarningsを設定するユースケースは次の通りです。

import { VpePlayer } from "@sgrsoft/vpe-reactnative-tv-sdk";

export default function ContentWarningPlayer() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "https://CDN_DOMAIN/episode_01.m3u8",
                    poster: "https://CDN_DOMAIN/episode_01.jpg",
                    contentWarnings: ["violence", "language"],
                }],
                autostart: true,
            }}
            onBack={() => navigation.goBack()}
        />
    );
}

総合ユースケース

イントロ/オープニングエンディングのスキップ、年齢区分表示、コンテンツ警告をすべて適用したユースケースは、次の通りです。

import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-reactnative-tv-sdk";
import { useRef, useCallback } from "react";

export default function FullOttPlayer() {
    const playerRef = useRef<PlayerHandle>(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 (
        <VpePlayer
            ref={playerRef}
            accessKey="YOUR_ACCESS_KEY"
            onEvent={handleEvent}
            options={{
                playlist: [
                    {
                        file: "https://CDN_DOMAIN/episode_01.m3u8",
                        poster: "https://CDN_DOMAIN/episode_01.jpg",
                        description: {
                            title: "ドラマ シーズン1 EP.01",
                            profile_name: "OTTチャンネル",
                        },
                        ageRating: "15",
                        contentWarnings: ["violence", "language"],
                        intro: { start: "00:00:00", duration: 5 },
                        opening: { start: "00:00:05", duration: 90 },
                        ending: { start: "00:45:00", duration: 60 },
                    },
                    {
                        file: "https://CDN_DOMAIN/episode_02.m3u8",
                        poster: "https://CDN_DOMAIN/episode_02.jpg",
                        description: {
                            title: "ドラマ シーズン1 EP.02",
                            profile_name: "OTTチャンネル",
                        },
                        ageRating: "15",
                        contentWarnings: ["violence"],
                        intro: { start: "00:00:00", duration: 5 },
                        opening: { start: "00:00:05", duration: 90 },
                        ending: { start: "00:45:00", duration: 60 },
                    },
                ],
                autostart: true,
            }}
            onBack={() => navigation.goBack()}
        />
    );
}