Basic usage

Available in Classic and VPC

This guide explains how to create a VPE player instance and configure the basic options in UMD (CDN).

Create an ncplayer instance

Create a player instance with new ncplayer(). The first argument is the id of the HTML element to render the player, and the second argument is the options object.

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

Playlist settings

Use playlist to pass an array of media items to play. For each item, you can specify file (video URL) and poster (thumbnail).

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
      poster: "https://example.com/poster.jpg",
      description: {
        title: "Video title",
        profile_name: "Channel name",
        profile_image: "https://example.com/profile.png",
        created_at: "2026.01.01",
      },
    },
  ],
});

Autoplay and mute

Use autostart to enable autoplay and muted to set the initial mute state.

Note

To comply with browser autoplay policies, you must also set muted: true when you enable autostart: true.

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

Basic options example

This example configures basic options such as the aspect ratio, autoplay, and mute.

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,
});

Multiple video playback

Add multiple items to the playlist array to activate a playlist. You can switch between videos using the previous and next buttons.

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/first.m3u8",
      poster: "https://example.com/poster1.jpg",
      description: {
        title: "First video",
        profile_name: "Channel name",
      },
    },
    {
      file: "https://example.com/video/second.m3u8",
      poster: "https://example.com/poster2.jpg",
      description: {
        title: "Second video",
        profile_name: "Channel name",
      },
    },
    {
      file: "https://example.com/video/third.m3u8",
      poster: "https://example.com/poster3.jpg",
      description: {
        title: "Third video",
        profile_name: "Channel name",
      },
    },
  ],
  autostart: true,
  muted: true,
  aspectRatio: "16/9",
});

Full HTML example

This is a complete example that covers everything from script loading to player creation.

<!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",
          description: {
            title: "Video title",
            profile_name: "Channel name",
          },
        },
      ],
      autostart: true,
      muted: true,
      aspectRatio: "16/9",
    });
  </script>
</body>
</html>

Documentation Index