재생 설정

재생 설정에서는 스크립트 코드를 수정하여 플레이어 재생과 관련한 옵션을 설정하는 방법을 설명합니다. 본 기능은 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", // 최초 공개일 설정
            }}
        />
    );
}
기본 사용법플레이어 UI