--- title: "プレイヤー UI" slug: "vpe-umd-player-ui" updated: 2026-09-17T09:22:05Z published: 2026-09-17T09:22:05Z canonical: "guide.ncloud-docs.com/vpe-umd-player-ui" 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. # プレイヤー UI Classic/VPC環境で利用できます。 プレイヤー UIでは、コントロールバー、ボタン、プログレスバーなど、UIに関連するオプションの設定方法について説明します。 参考 - オプションを設定するプロパティに関する説明は、オプションリファレンスをご参照ください。 - ご利用中の料金プランによって、設定可能なオプションが異なる場合があります。 ## デフォルトオプション ### language(多言語) プレイヤーで使用する言語を設定します。設定しない場合は、ブラウザで設定されている言語に従います。 ``` const player = new ncplayer("player", { lang: "ko", // 言語設定("auto"、"ko"、"en") playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ## コントロールバー ### controls(コントロールバーの表示) デフォルトコントロールバー UIの表示有無を設定します。`false`に設定すると、コントロールバーは表示されません。 ``` const player = new ncplayer("player", { controls: true, // コントロールバーの表示有無を設定 playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ### controlBtn(コントロールバーボタン UI) コントロールバーの個別ボタンの表示/非表示を設定します。各ボタンは `true` または `false`で制御します。 参考 Standard料金プランでのみご利用いただけます。 ``` const player = new ncplayer("player", { controlBtn: { play: true, // 再生ボタン progressBar: true, // プログレスバー fullscreen: true, // 全画面表示ボタン volume: true, // ボリュームボタン times: true, // 時間表示 pictureInPicture: true, // PIP設定 setting: true, // 設定ボタン subtitle: true, // 字幕ボタン }, playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` **controlBtnプロパティ** | プロパティ | タイプ | デフォルト値 | 説明 | | --- | --- | --- | --- | | play | boolean | true | 再生/一時停止ボタン | | progressBar | boolean | true | プログレスバー | | fullscreen | boolean | true | 全画面表示ボタン | | volume | boolean | true | ボリュームボタン | | times | boolean | true | 再生時間表示 | | pictureInPicture | boolean | true | Picture-In-Picture(PIP)ボタン | | setting | boolean | true | 設定ボタン | | subtitle | boolean | true | 字幕ボタン | ### progressBarColor(コントロールバーの色) コントロールバーの進捗状況の色を、CSSの色値で設定します。 参考 Standard料金プランでのみご利用いただけます。 ``` const player = new ncplayer("player", { progressBarColor: "#2e6ae0", // コントロールバーの進捗状況の色を指定 playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ### controlActiveTime(コントロールバーの表示時間) コントロールバーが自動的に非表示になるまでの時間をミリ秒(ms)単位で設定します。デフォルト値は `3000`(3秒)です。 参考 `controlActiveTime: 0` に設定すると、コントロールバーは自動的に非表示にならず常に表示されます。ライブコマースのように、UIが常に表示される必要がある画面で役立ちます。 ``` const player = new ncplayer("player", { controlActiveTime: 5000, // コントロールバーの表示時間を設定(ms) playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ### ui(コントロールバー UI固定) UIのタイプを指定します。設定しない場合は、ブラウザの幅やデバイスに応じて自動的に切り替えます。 参考 Standard料金プランでのみご利用いただけます。 - モバイル UIは `touchGestures`、PC UIは `keyboardShortcut`を提供します。 ``` const player = new ncplayer("player", { ui: "mobile", // UIタイプを設定("auto"、"pc"、"mobile") playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ## レイアウトシステム レイアウトシステムを使用すると、コントロールバーのボタンの配置、領域の構成、カスタムコンポーネントの挿入を、JSONベースで宣言型に定義できます。画面環境別(PC/モバイル/全画面)およびコンテンツのタイプ別(VOD/Live)に、それぞれ分けて管理できます。 参考 - Standard料金プランでのみご利用いただけます。 - レイアウトの JSONは、[UI Editor](https://vpe-player-editor.web.app/)で視覚的に編集し、その結果をそのままコードに反映させることができます。詳細な構造やプロパティについては、[レイアウトシステムガイド](https://developer.vpe.naverncp.com/docs/ja/layout-system)をご参照ください。 ### デフォルトレイアウトの構成 `order`でセクションの順序を決め、各セクションに Rowを配置します。Rowの `items`には、ビルトインコンポーネントやカスタム要素を配置できます。 ``` const layout = { pc: { vod: { order: ["top", "center", "bottom"], top: [{ items: ["MetaDesc"] }], center: [{ items: ["BigPlayBtn"], align: "center" }], bottom: [ { items: ["ProgressBar"] }, { items: ["PlayBtn", "VolumeBtn", "TimeBtn"], wrapper: "Group" }, { wrapper: "Blank", items: [] }, { items: ["SettingBtn", "PipBtn", "FullscreenBtn"], wrapper: "Group" }, ], }, }, }; const player = new ncplayer("player", { layout: layout, playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ### 構成構造 最上位キーは `pc`、`mobile`、`fullscreen`に分かれており、各環境内で `vod`と `live` のレイアウトを定義します。 ``` { "pc": { "vod": { ... }, "live": { ... } }, "mobile": { "vod": { ... }, "live": { ... } }, "fullscreen": { "vod": { ... }, "live": { ... } } } ``` ### セクションと順序 `order` 配列によってレンダリング順序が決まります。デフォルトセクションは `top`、`upper`、`center`、`lower`、`bottom`です。 ``` { "order": ["top", "upper", "center", "lower", "bottom"], "top": [ { "items": ["MetaDesc"] }, { "wrapper": "Blank", "items": [], "align": "left" }, { "items": ["ShareBtn"] } ], "center": [ { "items": ["BigPlayBtn"], "align": "center" } ], "bottom": [ { "items": ["ProgressBar"] }, { "items": ["PlayBtn", "VolumeBtn", "TimeBtn"], "align": "left" }, { "items": ["SettingBtn", "PipBtn", "FullscreenBtn"], "align": "right" } ] } ``` ### 行(Row)の構成 各セクションは複数の Rowで構成されています。Rowは、`items` 配列を通じてボタンやコンポーネントを配置し、`align`および `wrapper`でソートやグループ化の方法を調整します。 | キー | タイプ | 説明 | | --- | --- | --- | | `items` | `string[]` | Rowに配置するコントロールリスト | | `align` | `left` \| `center` \| `right` | Row内のコンテンツのソート方法 | | `wrapper` | `string` | Rowに適用するラッパータイプ(例: Group、Blank) | | `cap` | `number` | Row内の表示アイテム数を制限 | ### 使用可能なレイアウトアイテム `PlayBtn` `VolumeBtn` `TimeBtn` `SubtitleBtn` `FullscreenBtn` `SettingBtn` `PipBtn` `MetaDesc` `BigPlayBtn` `SeekBar` `SettingModal` `DurationBtn` `SkipForwardBtn` `SkipBackBtn` `CurrentTimeBtn` `MuteBtn` `PrevBtn` `NextBtn` `NextPrevBtn` `ShareBtn` `Blank` ### カスタム HTML要素の挿入 レイアウトの `items` 配列に、ビルトインキーの代わりに HTML文字列を渡すことで、コントロールバー内の希望する位置にカスタム UIを配置できます。 ``` // カスタムロゴの HTML const Logo = `
Logo
`; const layout = { pc: { vod: { order: ["top", "center", "bottom"], top: [{ items: ["MetaDesc"] }], center: [{ items: ["BigPlayBtn"], align: "center" }], bottom: [ { items: ["PlayBtn", "PrevBtn", "NextBtn"], wrapper: "Group" }, { items: ["VolumeBtn"], wrapper: "Group" }, { items: ["TimeBtn"], wrapper: "Group" }, { wrapper: "Blank", items: [] }, { items: [Logo], wrapper: "Group" }, // カスタム HTML { items: ["SubtitleBtn", "PipBtn", "SettingBtn", "FullscreenBtn"], cap: 2, wrapper: "Group" }, ], }, }, }; const player = new ncplayer("player", { layout: layout, playlist: [ { file: "https://example.com/video/master.m3u8", }, ], }); ``` ### ランタイムレイアウトの変更 `player.layout()` メソッドを使用すると、再生中でもレイアウトを動的に変更できます。 ``` // 新しいレイアウトに変更 player.layout({ pc: { vod: { order: ["center", "bottom"], center: [{ items: ["BigPlayBtn"], align: "center" }], bottom: [ { items: ["PlayBtn", "VolumeBtn", "TimeBtn"], wrapper: "Group" }, { wrapper: "Blank", items: [] }, { items: ["FullscreenBtn"], wrapper: "Group" }, ], }, }, }); ``` ### 全 HTMLのユースケース ``` VPE Player - レイアウトシステム
```