VPE 2.0 UMD prerequisites

Available in Classic and VPC

Install CDN

You can use the VPE player by adding a single CDN script tag, without a build tool. The CDN URL differs depending on whether you use the public or government cloud environment.

CDN script URL

Load the URL below with a <script> tag and pass access_key as a query parameter.

Note

The VPE Player must load hls.js and the dash.js library separately for streaming playback. Always load it before the VPE script.

<!-- Load hls.js/dash.js before the VPE script -->
<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>

Public cloud CDN

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

Government cloud CDN

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

Access key settings

You can obtain an access key from the NAVER Cloud Platform console. The CDN method passes it as a query parameter in the script URL.

Caution

NAVER Cloud Platform issues an access key for each domain. The player does not run on unauthorized domains. In a development environment (localhost), you can use it without any additional configuration.

Environment	platform	CDN domain
Public cloud	pub (default)	player.vpe.naverncp.com
Government cloud	gov	player.vpe.gov-ntruss.com

Example

Basic example

The following is a complete HTML example that uses the VPE player.

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

  <!-- Load hls.js/dash.js before the VPE script -->
  <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>

Government cloud example

In government cloud, you can change only the 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 (government)</title>

  <!-- Load hls.js/dash.js before the VPE script -->
  <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-based code generation

This guide helps you quickly get started with VPE player configuration. You can provide llms.txt as a prompt to generate UMD or static HTML sample code with AI.

Concepts

llms.txt is a summary document containing the core usage rules of the VPE player. Providing this file to the LLM first helps you prevent the omission of essential options, and recommended configurations when the model generates code.

Select an LLM

Copy and paste the prompt below into the LLM you are using (e.g., ChatGPT, Claude, Copilot, Cursor, etc.):

Enter the prompt

Read https://developer.vpe.naverncp.com/llms.txt and generate UMD (static HTML) sample code.

Guide

You must replace the access_key and playlist URL within the response code to match your project environment.
In UMD, load ncplayer.js with the <script> tag, then create an instance with new ncplayer().
If you need DRM playback, use the asynchronous ncplayerDRM() function.
If the response is too long, you can also ask, "Summarize only the relevant sections."

Documentation Index