OTT 특화 기능

The latest service changes have not yet been reflected in this content. We will update the content as soon as possible. Please refer to the Korean version for information on the latest updates.

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