OTT 特化機能

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

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

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

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

オプション

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

各セクションにおけるオブジェクトのフィールドは次の通りです。

タイプの定義

// 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 (
    <VpePlayer
      hls={Hls}
      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,
        muted: true,
      }}
    />
  );
}

動作方式

オープニング/エンディングのセクションは、自動スキップに対応しています。動作方式は次の通りです。

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

スキップボタンの UIは、コントロールバーの表示有無にかかわらず固定オーバーレイとしてレンダリングされ、center レイアウトの下部からのオフセットを基準に位置が同期されます。

スキップイベント

各セクションをスキップすると、次のイベントが発生します。onEvent propを通じて受信できます。

<VpePlayer
  hls={Hls}
  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;
    }
  }}
/>

年齢区分表示

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

対応区分

オーバーレイ動作

• 再生開始から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 (
    <VpePlayer
      hls={Hls}
      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,
        muted: true,
      }}
    />
  );
}

コンテンツ警告

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

サポート警告タイプ

基本ユースケース

"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function ContentWarningPlayer() {
  return (
    <VpePlayer
      hls={Hls}
      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,
        muted: true,
      }}
    />
  );
}

総合ユースケース

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

"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<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}
      hls={Hls}
      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,
        muted: true,
      }}
    />
  );
}