VPE 2.0 UMD 사용 준비

Classic/VPC 환경에서 이용 가능합니다.

CDN 설치

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

CDN 스크립트 URL

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

참고

VPE 플레이어는 스트리밍 재생을 위해 hls.js와 dash.js 라이브러리를 별도로 로드해야 합니다. 반드시 VPE 스크립트보다 먼저 로드해 주십시오.

<!-- hls.js / dash.js를 VPE 스크립트보다 먼저 로드 -->
<script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
<script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>

민간 클라우드 CDN

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

공공 클라우드 CDN

<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 예제입니다.

<!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://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/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만 변경하면 됩니다.

<!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://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/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>

LLM 기반 코드 생성

VPE 플레이어 설정을 빠르게 시작하기 위한 가이드입니다. llms.txt를 프롬프트로 제공하면 AI가 UMD 또는 정적 HTML 기반 예제 코드를 생성합니다.

개념

llms.txt는 VPE 플레이어의 핵심 사용 규칙을 담은 요약 문서입니다. 이를 LLM에 먼저 읽히면 코드 생성 시 필수 옵션과 권장 구성을 누락하지 않도록 도와줍니다.

LLM 선택

사용 중인 LLM(예: ChatGPT, Claude, Copilot, Cursor 등)에 아래 프롬프트를 그대로 붙여넣습니다.

프롬프트 입력

https://developer.vpe.naverncp.com/llms.txt 읽고 UMD (정적 HTML) 예제 코드 생성해줘

가이드

응답 코드에서 access_key, playlist URL은 프로젝트 환경에 맞게 교체합니다.
UMD 환경에서는 <script> 태그로 ncplayer.js를 로드한 뒤 new ncplayer()로 인스턴스를 생성합니다.
DRM 재생이 필요한 경우, ncplayerDRM() 비동기 함수를 사용해야 합니다.
결과가 길 경우, “필요한 부분만 요약해줘”라고 추가로 요청할 수 있습니다.

Documentation Index