基本的な使い方

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

UMD(CDN)環境で VPEプレイヤーのインスタンスを作成し、デフォルトオプションを設定する方法について説明します。

ncplayerインスタンス作成

new ncplayer()でプレイヤーインスタンスを作成します。1番目の引数は、プレイヤーをレンダリングする HTML要素の idであり、2番目の引数はオプションオブジェクトです。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

playlist設定

playlistは、再生するメディアのリストを配列として渡します。各項目には、file(動画 URL)と poster(サムネイル)を指定できます。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
      poster: "https://example.com/poster.jpg",
      description: {
        title: "動画タイトル",
        profile_name: "チャンネル名",
        profile_image: "https://example.com/profile.png",
        created_at: "2026.01.01",
      },
    },
  ],
});

自動再生とミュート

autostartで自動再生を設定し、mutedで初期状態をミュートに指定します。

参考

ブラウザの自動再生ポリシーにより、正常動作するには autostart: trueの使用時に muted: trueを併せて設定する必要があります。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
  autostart: true,
  muted: true,
});

デフォルトオプションのユースケース

画面アスペクト比、自動再生、ミュートなどのデフォルトオプションをまとめて設定するユースケースです。

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",
  controls: true,
});

複数の動画を再生

playlist 配列に複数の項目を追加すると、プレイリスト機能を利用できるようになります。前へ/次へボタンで動画を切り替えることができます。

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/first.m3u8",
      poster: "https://example.com/poster1.jpg",
      description: {
        title: "1番目の動画",
        profile_name: "チャンネル名",
      },
    },
    {
      file: "https://example.com/video/second.m3u8",
      poster: "https://example.com/poster2.jpg",
      description: {
        title: "2番目の動画",
        profile_name: "チャンネル名",
      },
    },
    {
      file: "https://example.com/video/third.m3u8",
      poster: "https://example.com/poster3.jpg",
      description: {
        title: "3番目の動画",
        profile_name: "チャンネル名",
      },
    },
  ],
  autostart: true,
  muted: true,
  aspectRatio: "16/9",
});

全 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",
          description: {
            title: "動画タイトル",
            profile_name: "チャンネル名",
          },
        },
      ],
      autostart: true,
      muted: true,
      aspectRatio: "16/9",
    });
  </script>
</body>
</html>

Documentation Index