소개

VPE 2.0 UMD(CDN) 방식은 별도의 빌드 도구나 패키지 매니저 없이, HTML 페이지에 스크립트 태그 하나만 추가하면 바로 사용할 수 있는 비디오 플레이어 SDK입니다.

데모 플레이어

주요 기능

  • 1.HLS / DASH 스트리밍 — 별도의 라이브러리 설치 없이 HLS, DASH 스트리밍을 기본 지원합니다.
  • 2.One Click Multi DRM — Widevine, FairPlay, PlayReady DRM을 지원하여 콘텐츠를 안전하게 보호합니다.
  • 3.자막 지원 — WebVTT 형식의 자막 파일을 연결하여 다국어 자막을 제공할 수 있습니다.
  • 4.Pre-roll 광고 — IMA SDK 및 NAM SDK를 통한 VAST/VMAP 광고를 지원합니다.
  • 5.커스텀 UI — JSON 기반 레이아웃 시스템으로 컨트롤바 버튼 배치와 커스텀 HTML 요소 삽입이 가능합니다.
  • 6.반응형 레이아웃 — PC, 모바일, 전체화면 환경별로 독립적인 컨트롤바 레이아웃을 지정할 수 있습니다.
  • 7.워터마크 — 텍스트 워터마크를 표시하여 무단 녹화를 방지할 수 있습니다.

지원 환경

환경지원
Chrome최신 버전
Firefox최신 버전
Safari15 이상
Edge최신 버전
iOS Safari15 이상
Android Chrome최신 버전

빠른 시작

아래 코드를 HTML 파일에 붙여넣으면 바로 플레이어를 확인할 수 있습니다.

중요: VPE 플레이어는 스트리밍 재생을 위해 hls.js와 dash.js 라이브러리를 별도로 로드해야 합니다.
필요에 따라 hls.js, dash.js를 반드시 VPE 스크립트보다 먼저 로드하세요.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPE Player</title>
    <!-- hls.js / dash.js 를 VPE 스크립트보다 먼저 로드 -->
    <script src="https://developer.vpe.naverncp.com/js/hls.min.js"></script>
    <script src="https://developer.vpe.naverncp.com/js/dash.all.min.js"></script>
    <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>
</head>
<body>
    <div id="player" style="max-width: 800px; margin: 0 auto;"></div>

    <script>
        const player = new ncplayer("player", {
            playlist: [
                {
                    file: "https://example.com/video/master.m3u8",
                    poster: "https://example.com/poster.jpg",
                },
            ],
            autostart: true,
            muted: true,
            aspectRatio: "16/9",
        });
    </script>
</body>
</html>
Tip: 자동 재생(autostart: true)을 사용할 때는 브라우저 정책상 muted: true를 함께 설정해야 합니다.
UMD
이전CDN 설치