재생 설정

재생 설정에서는 스크립트 코드를 수정하여 플레이어 재생과 관련한 옵션을 설정하는 방법을 설명합니다. 본 기능은 Classic/VPC 환경에서 사용할 수 있습니다.

옵션을 설정하는 속성에 대한 설명은 플레이어 설정을 참고하세요.
이용 중인 요금제에 따라 설정 가능한 옵션이 다를 수 있습니다.

자동 재생 (autostart)

재생 소스를 자동으로 시작합니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                autostart: true, // 자동 재생(false: 자동 재생 안 함)
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

자동 재생은 다음 조건 중 하나 이상을 만족할 때만 동작합니다.

음소거이거나 볼륨이 0인 경우
클릭, 터치, 키 입력 등 사용자의 입력이 발생한 경우
환경 설정에서 화이트 리스트 페이지로 설정된 경우
자동 재생을 지원하는 iframe과 해당 문서가 설정된 경우

자동 정지 (autoPause)

탭 전환 또는 창 최소화 시 자동으로 재생을 정지합니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                autoPause: true, // 자동 정지(false: 자동 정지 안 함)
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

음소거 (muted)

첫 재생을 음소거 상태로 시작합니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                muted: true, // 처음 재생 시 음소거(false: 음소거 안 함)
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

재생 속도 (playbackRate)

재생 속도를 직접 지정합니다. 미지정 시 기본값은 1.0입니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                muted: true,
                playbackRate: 0.5, // 재생 속도 조절(기본값: 1.0)
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

재생 속도 조절 UI (playRateSetting)

사용자가 재생 속도를 선택할 수 있도록 UI를 제공합니다.

Standard 요금제에서만 사용할 수 있습니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                muted: true,
                playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

초저지연 모드 (lowLatencyMode)

Low Latency HLS 재생을 위한 모드입니다.

Standard 요금제에서만 사용할 수 있습니다.

Live Station의 LL-HLS를 공식 지원하는 옵션입니다.

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

// 동영상(HLS)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4/index.m3u8",
                    },
                ],
                lowLatencyMode: true, // LL-HLS 사용(false: LL-HLS 사용 안 함)
            }}
        />
    );
}

반복 재생 (repeat)

영상을 반복 재생합니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                repeat: true, // 반복 재생(false: 반복 재생 안 함)
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

최초 공개일 설정 (setStartTime)

VOD를 라이브 방송처럼 모든 사용자가 동일 구간을 동시에 시청하도록 설정합니다.

Standard 요금제에서만 사용할 수 있습니다.

VOD에만 적용됩니다.
날짜 포맷은 UTC 형식을 지원합니다.

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

// 동영상(MP4)
export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            dashjs={dashjs}
            platform="pub"
            options={{
                autoPause: true,
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
                setStartTime: "2023-02-08 06:07:00+00:00", // 최초 공개일 설정
            }}
        />
    );
}

OTT 설정

OTT 서비스에 필요한 인트로/오프닝/엔딩 스킵, 연령등급 표시, 콘텐츠 경고 기능을 playlist 아이템 단위로 설정합니다.

자세한 사용법은 OTT 특화 기능 페이지를 참조하세요.

인트로 / 오프닝 / 엔딩 스킵

각 구간의 시작 시점과 지속 시간을 설정하면 해당 시점에 스킵 버튼이 자동으로 표시됩니다.

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

export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            options={{
                autostart: true,
                muted: true,
                playlist: [
                    {
                        file: "https://CDN도메인/episode_01.m3u8",
                        intro: {
                            start: "00:00:00", // HH:MM:SS 형식
                            duration: 5,       // 초 단위
                        },
                        opening: {
                            start: "00:00:05",
                            duration: 90,
                        },
                        ending: {
                            start: "00:45:00",
                            duration: 60,
                        },
                    },
                ],
            }}
        />
    );
}

연령등급 표시 (ageRating)

재생 시작 시 연령등급 오버레이를 표시합니다. 지원 값: "all", "12", "15", "19"

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

export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            options={{
                autostart: true,
                muted: true,
                playlist: [
                    {
                        file: "https://CDN도메인/episode_01.m3u8",
                        description: {
                            title: "드라마 시즌1 EP.01",
                        },
                        ageRating: "15", // 15세 이상 관람가
                    },
                ],
            }}
        />
    );
}

콘텐츠 경고 (contentWarnings)

콘텐츠에 포함된 민감한 요소(폭력성, 선정성 등)를 시청자에게 안내하는 경고 오버레이를 표시합니다.

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

export function App() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            hls={Hls}
            options={{
                autostart: true,
                muted: true,
                playlist: [
                    {
                        file: "https://CDN도메인/episode_01.m3u8",
                        contentWarnings: ["violence", "language"],
                    },
                ],
            }}
        />
    );
}

권장 키: "sexuality" "violence" "language" "drugs" "horror" "imitation" "provocative"