---
title: "Playback source"
slug: "vpe-example-source"
updated: 2026-09-17T09:22:39Z
published: 2026-09-17T09:22:39Z
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.

# Playback source

Available in Classic and VPC

Playback source explains how to write a script code and apply a player and how to play several videos in one player.

              Note

              

For descriptions of properties to set options, see [Player settings](/docs/en/vpe-web#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%EC%84%A4%EC%A0%95).

## Basic settings

You can apply a player that displays control bar button UI with a simple script code as follows:

              Note

              

Playback Sources support in mp4, hls, and dash formats.

![vpe-example-source_player_ko](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-source_player_en.png?sv=2026-02-06&spr=https&st=2026-11-14T05%3A04%3A59Z&se=2026-11-14T06%3A04%3A59Z&sr=c&sp=r&sig=0DCmzi50V83QOctxz%2BPAPao4y9TziPVECO5pPFg59RA%3D)

Examples are as follows:

```
// Video (MP4)
new ncplayer('video4', {
  playlist: 'https://CDNdomain/example_video_01.mp4',
});
```

## Multiple video playback

You can play multiple videos in a row sending several playback sources with the `playlist` property. You can also override several video playback features and configure the next video to be played as a dynamic playlist.

### Basic features

You can implement basic features to play several videos continuously.

              Note

              

If the `autostart` property is false, the next video don't play automatically, and the "next" and "previous" buttons are displayed. See [autoplay](/docs/en/vpe-example-play#%EC%9E%90%EB%8F%99%EC%9E%AC%EC%83%9D)for examples of the `autostart` property.

Examples are as follows:

```
// Video (MP4)
new ncplayer('video1', {
  playlist: [
    { 
			file: 'https://CDNdomain/example_video_01.mp4',
			poster: 'https://CDNdomain/example_image_01.png' 
		},
    { 
			file: 'https://CDNdomain/example_video_02.mp4',
			poster: 'https://CDNdomain/example_image_02.png'  
		},
    { 
			file: 'https://CDNdomain/example_video_03.mp4/index.m3u8', 
			poster: 'https://CDNdomain/example_image_03.png'  
		}
  ],
});
```

### Redefine features (Override)

You can implement the features that you want by overriding the `playlist` property `nextSource` that can play several videos continuously with the `prevSource` property. Examples are as follows:

```
// Video (MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
        }
    ],
    override:{
        nextSource(){
            // A customer implements the next video
            // location.href='next url'
        },
        prevSource(){
            // A customer implements the previous video
            // location.href='prev url'
        }
    }
});
```

### Dynamic playlist composition

Provide the features that can dynamically add the next video to play after completing video playback. For example, you can configure recommended videos to be displayed with thumbnails as follows:

![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-11-14T05%3A04%3A59Z&se=2026-11-14T06%3A04%3A59Z&sr=c&sp=r&sig=0DCmzi50V83QOctxz%2BPAPao4y9TziPVECO5pPFg59RA%3D)

Examples are as follows:

```
// Video (MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
        }
    ]
});

// Add next video
player.addNextSource({
    file: 'https://CDNdomain/example_video_022.mp4',
    poster: 'https://CDNdomain/example_image_022.png',
})

// Add next video
player.addNextSource({
    file: 'https://CDNdomain/example_video_033.mp4',
    poster: 'https://CDNdomain/example_image_033.png',
})

// Add previous video
player.addPrevSource({
    file: 'https://CDNdomain/example_video_00.mp4',
    poster: 'https://CDNdomain/example_image_00.png',
})
```