CDN 설치

별도의 빌드 도구 없이 CDN 스크립트 태그 하나로 VPE 플레이어를 사용할 수 있습니다. 민간 클라우드와 공공 클라우드 환경에 따라 CDN URL이 다릅니다.

CDN 스크립트 URL

아래 URL을 <script> 태그로 로드합니다. access_key는 쿼리 파라미터로 전달합니다.

중요: VPE 플레이어는 스트리밍 재생을 위해 hls.js와 dash.js 라이브러리를 별도로 로드해야 합니다.
필요에 따라 hls.js, dash.js를 반드시 VPE 스크립트보다 먼저 로드하세요.

<!-- 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>

공공 클라우드

<script src="https://player.vpe.gov-ntruss.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>

Access Key 설정

Access Key는 네이버클라우드 콘솔에서 발급받을 수 있습니다. CDN 방식에서는 스크립트 URL의 쿼리 파라미터로 전달합니다.

주의: Access Key는 도메인별로 발급되며, 허용되지 않은 도메인에서는 플레이어가 동작하지 않습니다. 개발 환경(localhost)에서는 별도 설정 없이 사용할 수 있습니다.

환경	platform	CDN 도메인
민간 클라우드	pub (기본값)	player.vpe.naverncp.com
공공 클라우드	gov	player.vpe.gov-ntruss.com

기본 예제

아래는 VPE 플레이어를 사용하는 완전한 HTML 예제입니다.

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>

공공 클라우드 예제

공공 클라우드 환경에서는 CDN URL만 변경하면 됩니다.

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.gov-ntruss.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>