OTT-specific features

Available in Classic and VPC

You can use features that OTT services commonly require, such as skip intro, opening, and ending, age rating display, and content warnings. Configure each feature at the playlist item level.

Skip intro, opening, and ending

When you specify the intro, opening, and ending segment for each playlist item, the player automatically displays the skip button at the configured time.

Option

Configure all skip options at the playlist[] item level.

Each segment object includes the following fields:

Type definition

// Playlist item structure
{
  file: "string",
  poster: "string",
  // ... Other properties

  // OTT skip segment
  intro: { start: "HH:MM:SS", duration: number },
  opening: { start: "HH:MM:SS", duration: number },
  ending: { start: "HH:MM:SS", duration: number },
}

Basic usage example

"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,
      }}
    />
  );
}

How it works

Opening and ending segments support automatic skipping. The operational process is as follows:

• If the user manually seeks into an opening or ending segment, the player bypasses automatic skipping.
• If an internal skip action (such as an intro skip) moves playback into an opening segment, the player continues automatic skipping.

The player renders the skip button as a fixed overlay regardless of whether the control bar is visible. The player also aligns the button position with the bottom offset of the center layout.

Skip event

When the player skips a segment, the following event triggers. You can receive the event through the 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("Intro skipped");
        break;
      case "openingSkip":
        console.log("Opening skipped");
        break;
      case "endingSkip":
        console.log("Ending skipped");
        break;
    }
  }}
/>

Display age ratings

Set the ageRating value for the playlist item to automatically display the age rating overlay when playback starts.

Supported ratings

Overlay behavior

• Display the overlay once, 3 seconds after playback starts.
• Show the overlay with a fade and slide animation.
• Apply a black gradation (opacity 0.3 → 0) at the top of the interface.
• Supports multiple languages. Supported languages are ko, en, and ja.

Basic usage example

"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: "Drama season 1 EP. 01",
              profile_name: "OTT channel",
            },
            ageRating: "15",
          },
        ],
        autostart: true,
        muted: true,
      }}
    />
  );
}

Content warnings

When you set an contentWarnings array of PlaylistItem, the player displays a warning overlay at the start of playback to inform viewers about sensitive content (e.g., violence, nudity) contained within the video.

Supported warning types

Basic usage example

"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,
      }}
    />
  );
}

Complete example

This example applies skip intro, opening, and ending, age rating display, and content warnings.

"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("Intro skipped");
        break;
      case "openingSkip":
        console.log("Opening skipped");
        break;
      case "endingSkip":
        console.log("Ending skipped — moving to the next episode");
        // 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: "Drama season 1 EP. 01",
              profile_name: "OTT channel",
            },
            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: "Drama season 1 EP. 02",
              profile_name: "OTT channel",
            },
            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,
      }}
    />
  );
}