---
title: "再生ソース"
slug: "vpe-example-source"
updated: 2026-09-17T09:28:48Z
published: 2026-09-17T09:28:48Z
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環境で利用できます。

再生ソースではスクリプトコードを作成してプレイヤーを適用する方法と、1つのプレイヤーで複数の動画を再生する方法について説明します。

              参考

              

オプションを設定するプロパティに関する説明は、[プレイヤー設定](/docs/ja/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_ja.png?sv=2026-02-06&spr=https&st=2026-10-30T22%3A47%3A59Z&se=2026-10-30T23%3A47%3A59Z&sr=c&sp=r&sig=j4JB7a2m5fJJ6G%2FFZkita9nHqqb4yWaEjwP6cZeA13g%3D)

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video4', {
  playlist: 'https://CDNドメイン/example_video_01.mp4',
});
```

## 複数の動画を再生

`playlist` プロパティで複数の再生ソースを送信することで、複数の動画を連続で再生できます。また、複数の動画再生機能をオーバーライド(Override)でき、次に再生する映像を動的プレイリストで構成できます。

### 基本機能

複数の動画を連続で再生する基本機能を実装できます。

              参考

              

`autostart` プロパティが falseの場合は、次の動画が自動で再生されず、「次」ボタンと「前」ボタンが表示されます。`autostart` プロパティに関するユースケースは、[自動再生](/docs/ja/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-30T22%3A47%3A59Z&se=2026-10-30T23%3A47%3A59Z&sr=c&sp=r&sig=j4JB7a2m5fJJ6G%2FFZkita9nHqqb4yWaEjwP6cZeA13g%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',
})
```