---
title: "기본 사용법"
slug: "vpe-umd-getting-started"
updated: 2026-09-17T09:08:03Z
published: 2026-09-17T09:08:03Z
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.
# 기본 사용법
Classic/VPC 환경에서 이용 가능합니다.
UMD(CDN) 환경에서 VPE 플레이어 인스턴스를 생성하고 기본 옵션을 설정하는 방법을 설명합니다.
## ncplayer 인스턴스 생성
`new ncplayer()`로 플레이어 인스턴스를 생성합니다. 첫 번째 인자는 플레이어를 렌더링할 HTML 요소의 `id`이고, 두 번째 인자는 옵션 객체입니다.
```
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: "첫 번째 영상",
profile_name: "채널명",
},
},
{
file: "https://example.com/video/second.m3u8",
poster: "https://example.com/poster2.jpg",
description: {
title: "두 번째 영상",
profile_name: "채널명",
},
},
{
file: "https://example.com/video/third.m3u8",
poster: "https://example.com/poster3.jpg",
description: {
title: "세 번째 영상",
profile_name: "채널명",
},
},
],
autostart: true,
muted: true,
aspectRatio: "16/9",
});
```
## 전체 HTML 예제
스크립트 로드부터 플레이어 생성까지 포함한 완전한 예제입니다.
```
VPE Player
```