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/ending

Specify intro, opening, and ending segments for each PlaylistItem to automatically display the skip at the configured time.

Option

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

• start: Segment start time in "HH:MM:SS" format (for example: "00:00:05", "00:01:30")

• duration: Segment duration (seconds)

Usage example

An example of configuring skip sections is as follows:

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

Automatic skip behavior

• If the user manually enters an opening or ending segment through seek, the player bypasses automatic skipping to respect the user's intent.
• If an internal skip action (such as an intro skip) moves playback into an opening segment, the player continues automatic skipping.

Skip button UI

• The skip button renders as a fixed overlay, regardless of the visibility of the control bar.
• The button position synchronizes based on the center layout's bottom offset.
• Users can focus on and select the skip button using the remote control D-pad.

Skip event

The following events trigger during a skip action:

<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("Intro skipped");
                break;
            case "openingSkip":
                console.log("Opening skipped");
                break;
            case "endingSkip":
                console.log("Ending skipped");
                break;
        }
    }}
    onBack={() => navigation.goBack()}
/>

Display age ratings

Setting ageRating value of PlaylistItem automatically displays the age rating overlay upon playback start.

Supported ratings

Available values for ageRating are as follows:

Overlay behavior

• Display the overlay once, 3 seconds after playback starts.
• Show the overlay with a fade and slide animation.
• Multilingual support: ko/en/ja

Usage example

The example of configuring ageRating is as follows:

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

Content warnings

When you set the contentWarnings array of PlaylistItem, the player displays a warning overlay at the start of playback to inform viewers about sensitive content contained within the video.

Supported warning types

Available values for contentWarnings are as follows:

The 7 values above are the recommended keys. You can also use custom string values.

Usage example

The example of configuring contentWarnings is as follows:

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

Complete example

An example that applies skip intro, opening, and ending, age rating display, and content warnings is as follows:

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("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}
            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,
            }}
            onBack={() => navigation.goBack()}
        />
    );
}