---
title: "Basic usage"
slug: "vpe-umd-getting-started"
updated: 2026-09-17T09:22:36Z
published: 2026-09-17T09:22:36Z
canonical: "guide.ncloud-docs.com/vpe-umd-getting-started"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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>
```