---
title: "基本的な使い方"
slug: "vpe-umd-getting-started"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
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()`でプレイヤーインスタンスを作成します。1番目の引数は、プレイヤーをレンダリングする HTML要素の `id`であり、2番目の引数はオプションオブジェクトです。
```
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: "1番目の動画",
profile_name: "チャンネル名",
},
},
{
file: "https://example.com/video/second.m3u8",
poster: "https://example.com/poster2.jpg",
description: {
title: "2番目の動画",
profile_name: "チャンネル名",
},
},
{
file: "https://example.com/video/third.m3u8",
poster: "https://example.com/poster3.jpg",
description: {
title: "3番目の動画",
profile_name: "チャンネル名",
},
},
],
autostart: true,
muted: true,
aspectRatio: "16/9",
});
```
## 全 HTMLのユースケース
スクリプトのロードからプレイヤーの作成までを含む、完全なユースケースです。
```
VPE Player
```