플레이어 UX

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

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

음소거 상태 표시 (startMutedInfoNotVisible)

음소거 상태를 표시할 수 있습니다.

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,
                muted: true,
                startMutedInfoNotVisible: true,
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

구간 이동 미리보기 (seekingPreview)

구간 이동 시 섬네일 이미지를 제공합니다.

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

VOD에서만 지원합니다.

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

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

브라우저 비활성화 시 자동 정지 (autoPause)

탭이 비활성화되면 자동으로 재생을 정지합니다.

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

모바일에서는 동작하지 않습니다.
Webapp/Webview 환경에서는 동작하지 않습니다.

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

// 동영상(VOD)
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",
                    },
                ],
            }}
        />
    );
}

키보드 단축키 (keyboardShortcut)

키보드 단축키 사용 여부를 설정합니다.

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={{
                keyboardShortcut: true,
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

기본 단축키

키	기능
Space	재생 / 일시정지
← →	5초 전 / 후로 이동
↑ ↓	볼륨 5% 조절
M	음소거
F	전체 화면

터치 제스처 (touchGestures)

터치 제스처 사용 여부를 설정합니다.

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={{
                touchGestures: true,
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

텍스트 워터마크 (visibleWatermark / watermarkText)

워터마크를 활성화하거나 표시 텍스트를 설정합니다.

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={{
                visibleWatermark: true,
                watermarkText: "Sample watermark",
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

텍스트 워터마크 상세 설정 (watermarkConfig)

워터마크 이동/위치/투명도 등을 설정합니다.

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={{
                watermarkConfig: {
                    randPosition: true, // 워터마크 랜덤 이동 여부
                    randPositionInterVal: 5000, // 랜덤 이동 간격(ms)
                    opacity: 0.4, // 워터마크 투명도
                },
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

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={{
                watermarkConfig: {
                    randPosition: false, // 워터마크 랜덤 이동 여부
                    x: 10, // 좌측 상단 x 좌표(% 단위)
                    y: 10, // 좌측 상단 y 좌표(% 단위)
                    opacity: 0.4, // 워터마크 투명도
                },
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}

iOS 웹 전체 화면 방식 (iosFullscreenNativeMode)

iOS Safari의 네이티브 전체화면 방식을 사용합니다.

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

iOS Safari에서만 동작합니다.
Player 버전 1.1.5 이상에서 지원합니다.
기본값은 true입니다.

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={{
                iosFullscreenNativeMode: true,
                playlist: [
                    {
                        file: "https://CDN도메인/example_video_01.mp4",
                    },
                ],
            }}
        />
    );
}