---
title: "재생 소스"
slug: "vpe-example-source"
updated: 2026-09-17T09:08:00Z
published: 2026-09-17T09:08:00Z
canonical: "guide.ncloud-docs.com/vpe-example-source"
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 환경에서 이용 가능합니다.

재생 소스에서는 스크립트 코드를 작성하여 플레이어를 적용하는 방법과 하나의 플레이어로 여러 개의 영상을 재생하는 방법을 설명합니다.

          참고

          

옵션을 설정하는 속성에 대한 설명은 [플레이어 설정](/docs/vpe-web#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%EC%84%A4%EC%A0%95)을 참고해 주십시오.

## 기본 설정

간단한 스크립트 코드로 다음과 같이 컨트롤바 버튼 UI가 표시되는 플레이어를 적용할 수 있습니다.

          참고

          

재생 소스는 mp4, hls, dash 형식을 지원합니다.

![vpe-example-source_player_ko](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-source_player_ko.png?sv=2026-02-06&spr=https&st=2026-10-26T21%3A06%3A51Z&se=2026-10-26T22%3A06%3A51Z&sr=c&sp=r&sig=vo3m44yHfdfVm4JLUj6%2BtZB6kR8CeXRl%2FI8529tkSWc%3D)

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video4', {
  playlist: 'https://CDN도메인/example_video_01.mp4',
});
```

## 여러 영상 재생

`playlist` 속성으로 여러 개의 재생 소스를 전달하여 여러 개의 영상을 연속하여 재생할 수 있습니다. 또한, 여러 영상 재생 기능을 재정의(Override)할 수 있으며, 다음 재생할 영상을 동적 플레이리스트로 구성할 수 있습니다.

### 기본 기능

여러 개의 영상을 연속으로 재생하는 기본 기능을 구현할 수 있습니다.

          참고

          

`autostart` 속성이 false인 경우에는 다음 영상이 자동으로 재생되지 않으며, '다음' 버튼과 '이전' 버튼이 표시됩니다. `autostart` 속성에 관한 예제는 [자동 재생](/docs/vpe-example-play#%EC%9E%90%EB%8F%99%EC%9E%AC%EC%83%9D)을 참고해 주십시오.

예제는 다음과 같습니다.

```
// 동영상(MP4)
new ncplayer('video1', {
  playlist: [
    { 
			file: 'https://CDN도메인/example_video_01.mp4',
			poster: 'https://CDN도메인/example_image_01.png' 
		},
    { 
			file: 'https://CDN도메인/example_video_02.mp4',
			poster: 'https://CDN도메인/example_image_02.png'  
		},
    { 
			file: 'https://CDN도메인/example_video_03.mp4/index.m3u8', 
			poster: 'https://CDN도메인/example_image_03.png'  
		}
  ],
});
```

### 기능 재정의 (Override)

여러 개의 영상을 연속하여 재생할 수 있는 `playlist` 속성에 `nextSource`, `prevSource` 속성을 Override하여 원하는 기능을 구현할 수 있습니다. 예제는 다음과 같습니다.

```
// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ],
    override:{
        nextSource(){
            // 고객사 다음 영상 기능 구현
            // location.href='next url'
        },
        prevSource(){
            // 고객사 이전 영상 기능 구현
            // location.href='prev url'
        }
    }
});
```

### 동적 플레이리스트 구성

영상 재생이 완료된 후 다음에 재생할 영상을 동적으로 추가할 수 있는 기능을 제공합니다. 예를 들어 다음과 같이 추천 영상을 썸네일과 함께 안내하도록 구성할 수 있습니다.

![vpe-example-source_playlist](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-source_playlist.png?sv=2026-02-06&spr=https&st=2026-10-26T21%3A06%3A51Z&se=2026-10-26T22%3A06%3A51Z&sr=c&sp=r&sig=vo3m44yHfdfVm4JLUj6%2BtZB6kR8CeXRl%2FI8529tkSWc%3D)

예제는 다음과 같습니다.

```
// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ]
});

// 다음 영상 추가
player.addNextSource({
    file: 'https://CDN도메인/example_video_022.mp4',
    poster : 'https://CDN도메인/example_image_022.png',
})

// 다음 영상 추가
player.addNextSource({
    file: 'https://CDN도메인/example_video_033.mp4',
    poster : 'https://CDN도메인/example_image_033.png',
})

// 이전 영상 추가
player.addPrevSource({
    file: 'https://CDN도메인/example_video_00.mp4',
    poster : 'https://CDN도메인/example_image_00.png',
})
```