VPE 2.0 UMD の仕様

Classic/VPC環境で利用できます。

CDNインストール

別途のビルドツールを必要とせず、CDNスクリプトタグ1つで 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は、NAVERクラウドプラットフォームコンソールで発行できます。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