CDN 사용

별도의 빌드 도구 없이 CDN 스크립트 태그 하나로 VPE 플레이어를 사용할 수 있습니다.

CDN 스크립트 URL

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

민간

<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의 쿼리 파라미터로, npm 방식에서는 컴포넌트 props로 전달합니다.

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

기본 예제

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