플레이어 UX

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

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

음소거 상태 표시 (startMutedInfoNotVisible)

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

// 동영상(MP4)
const player = new ncplayer("video1", {
    autostart: true,
    muted: true,
    startMutedInfoNotVisible: true,
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

구간 이동 미리보기 (seekingPreview)

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

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

VOD에서만 지원합니다.

// 동영상(VOD)
const player = new ncplayer("video1", {
    seekingPreview: true,
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

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

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

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

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

// 동영상(VOD)
const player = new ncplayer("video1", {
    autoPause: true,
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

키보드 단축키 (keyboardShortcut)

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

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

// 동영상(MP4)
const player = new ncplayer("video1", {
    keyboardShortcut: true,
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

기본 단축키

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

터치 제스처 (touchGestures)

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

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

// 동영상(MP4)
const player = new ncplayer("video1", {
    touchGestures: true,
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

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

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

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

해당 옵션은 콘솔 설정을 통해서만 적용됩니다.
코드에서 값을 바꿀 수 없습니다. (스크립트 코드에서만 확인 가능)

// 동영상(MP4)
const player = new ncplayer("video1", {
    visibleWatermark: true,
    watermarkText: "Sample watermark",
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

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

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

// 동영상(MP4) - 랜덤 이동
const player = new ncplayer("video1", {
    watermarkConfig: {
        randPosition: true,          // 워터마크 랜덤 이동 여부
        randPositionInterVal: 5000,  // 랜덤 이동 간격(ms)
        opacity: 0.4,                // 워터마크 투명도
    },
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

// 동영상(MP4) - 고정 위치
const player = new ncplayer("video1", {
    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입니다.

// 동영상(MP4)
const player = new ncplayer("video1", {
    iosFullscreenNativeMode: true,
    playlist: [
        {
            file: "https://CDN도메인/example_video_01.mp4",
        },
    ],
});

전체 UMD 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPE Player - UX 옵션</title>
    <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
    <div id="video1" style="max-width: 800px; margin: 0 auto;"></div>

    <script>
        const player = new ncplayer("video1", {
            playlist: [
                {
                    file: "https://CDN도메인/example_video_01.mp4",
                },
            ],
            autostart: true,
            muted: true,
            startMutedInfoNotVisible: true,
            autoPause: true,
            keyboardShortcut: true,
            touchGestures: true,
            seekingPreview: true,
            iosFullscreenNativeMode: true,
            visibleWatermark: true,
            watermarkText: "Sample watermark",
            watermarkConfig: {
                randPosition: true,
                randPositionInterVal: 5000,
                opacity: 0.4,
            },
        });
    </script>
</body>
</html>