--- title: "プレイヤー UI" slug: "vpe-example-ui" updated: 2026-09-17T09:28:48Z published: 2026-09-17T09:28:48Z canonical: "guide.ncloud-docs.com/vpe-example-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では、スクリプトコードを変更してプレイヤー再生に関するオプションを設定する方法を説明します。 参考 - オプションを設定するプロパティに関する説明は、[プレイヤー設定](/docs/ja/vpe-web#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%EC%84%A4%EC%A0%95)をご参照ください。 - 利用中の料金プランに応じて設定できるオプションが異なります。 ## 画面アスペクト比 `aspectRatio` プロパティでプレイヤーの縦横比を指定できます。 参考 - プレイヤーが固定型サイズ(`width`、`height`)を持っていない場合のみ適用できます。 - `container`のサイズが変わっても縦横比は維持されます。 画面アスペクト比を16:9に設定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { aspectRatio: '16/9', // 画面アスペクト比の設定 playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', }, ], }); ``` ## 全画面表示 `objectFit` プロパティで全画面表示の方式を設定できます。 再生ソースの比率を維持し、画面サイズに合わせるように設定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { aspectRatio: '16/9', objectFit: 'cover', // 全画面表示の設定(比率を維持する+画面サイズに合わせる) playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', }, ], }); ``` ## コントロールバー表示 `controls` プロパティでコントロールバーの表示有無を設定します。 コントロールバーを表示しないように設定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], controls: false // コントロールバーを表示しない(true: コントロールバーを表示) }); ``` ## コントロールバーボタン UI `controlBtn` プロパティでコントロールバーのボタン UIの使用有無を設定します。 参考 このオプションは Standard料金プランを利用中の場合のみ設定できます。 コントロールバーのすべてのボタン UIを表示するように設定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], controls: true, // true: ボタンを表示、false: ボタンを表示しない controlBtn: { play: true, //再生 progressBar:true // 再生バーの使用有無 fullscreen: true, // フルスクリーンに切り替え volume: true, // ボリュームコントロール times: true, // 再生時間 pictureInPicture: true, // PIP setting: true, // 設定 }, }); ``` ## コントロールバーの色 `progressBarColor` プロパティでコントロールバーの動画シークスライダの色を設定できます。 参考 このオプションは Standard料金プランを利用中の場合のみ設定できます。 コントロールバーの色を赤に設定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], progressBarColor: "#ff0000", // 色コード(赤) }); ``` ## 多言語 `lang` プロパティでコントロールバーの言語を固定します。 参考 基本的にブラウザの言語設定を検知し、コントロールバーに自動的に適用します。ブラウザに設定されている言語がプレイヤーがサポートしていない言語の場合、英語(en)がデフォルトで表示されます。 コントロールバーの言語を英語に固定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video4', { playlist: 'https://CDN도메인/example_video_01.mp4', lang:'en' // 多言語設定(英語に固定) }); ``` ## コントロールバーの表示時間 `controlActiveTime` プロパティでコントロールバーを表示する時間を設定します。 参考 このオプションは Standard料金プランを利用中の場合のみ設定できます。 コントロールバーを3秒間表示するように設定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], controlActiveTime: 3000, // コントロールバーの表示時間を設定(3000=3秒) }); ``` ## コントロールバー UI固定 `ui` プロパティでデバイスに関係なくコントロールバー UIを固定します。 参考 - このオプションは Standard料金プランを利用中の場合のみ設定できます。 - モバイル専用 UIは[タッチジェスチャー](/docs/ja/vpe-example-ux#%ED%84%B0%EC%B9%98%EC%A0%9C%EC%8A%A4%EC%B2%98)機能を、PC専用 UIは[キーボードショートカットキー](/docs/ja/vpe-example-ux#%ED%82%A4%EB%B3%B4%EB%93%9C%EB%8B%A8%EC%B6%95%ED%82%A4)機能を提供します。 モバイル専用コントロールバー UIに固定するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', }, ], ui: 'mobile', // コントロールバー UIの設定(モバイル専用 UIに固定) }); ``` ## 字幕設定 `playlist.vtt` プロパティを利用して字幕を提供できます。 参考 VTT形式の CAPTION(字幕)をサポートし、配列形式で複数の字幕を提供できます。 韓国語および英語の字幕を提供するユースケースは、次の通りです。 ``` // 動画(MP4) new ncplayer('video1', { playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster : 'https://CDN도메인/example_image_01.png', vtt:[ { file:'https://CDN도메인/subtitles-ko.vtt', // 字幕ファイル label:'韓国語' // 字幕言語 }, { file:'https://CDN도메인/subtitles-en.vtt', // 字幕ファイル label:'English' // 字幕言語 } ] } ], }); ``` ## カスタムボタン追加 `customBtns` プロパティでプレイヤーにカスタムボタンを追加し、新しい機能を提供できます。 参考 - このオプションは Standard料金プランを利用中の場合のみ設定できます。 - カスタムボタンは位置に関係なく最大4つまで追加できます。 `position`および `flow`プロパティ設定ごとのカスタムボタンの位置は、次の通りです。 ![image.png](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/image%28819%29.png?sv=2026-02-06&spr=https&st=2026-10-30T22%3A46%3A00Z&se=2026-10-30T23%3A46%3A00Z&sr=c&sp=r&sig=I1eXJfJdS1Kg45W46xFNdzT2WxTsuHrEKI%2F50st6WuA%3D) 右下の左側にカスタムボタンを追加するユースケースは、次の通りです。 ``` // 動画(MP4) let player = new ncplayer('video1', { playlist: [ { file: 'https://https://CDNドメイン/example_video_01.mp4', }, ], customBtns: [ { ui: "pc", // カスタムボタン提供 UI id: "chatBtn", // カスタムボタンの DOM ID position: "right-bottom", // カスタムボタンの追加領域(右下) flow: "left", // カスタムボタンの追加位置(左側) icon: "https://CDN도메인/example_video_01.svg", // カスタムボタンの画像 URL callback(){ // カスタムボタンのクリック時に発生させるイベント alert('ボタンクリック') } }, { ui: "mobile", // カスタムボタン提供 UI id: "chatBtn", // カスタムボタンの DOM ID position: "right-bottom", // カスタムボタンの追加領域(右下) flow: "left", // カスタムボタンの追加位置(左側) icon: "https://CDN도메인/example_video_02.svg", // カスタムボタンの画像 URL callback(){ // カスタムボタンのクリック時に発生させるイベント alert("ボタンクリック") } } ] }); // readyイベントを利用してカスタムボタンにイベントをバインド player.on('ready',()=>{ documnet.getElementById('chatBtn').addEventListener('click',()=>{ alert('ボタンクリック') }); }) ``` ### カスタムボタンの高度化 機能有効ステータス(ON/OFF)に応じてカスタムボタンを異なる方法で表示できます。ステータス別アイコンを追加して defaultステータスを設定でき、各ボタンの tooltip(ツールチップ)も追加できます。 カスタムボタンのステータス別アイコンとツールチップを追加するユースケースは、次の通りです。 ![image.png](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/image-E1WYHXBK.png?sv=2026-02-06&spr=https&st=2026-10-30T22%3A46%3A00Z&se=2026-10-30T23%3A46%3A00Z&sr=c&sp=r&sig=I1eXJfJdS1Kg45W46xFNdzT2WxTsuHrEKI%2F50st6WuA%3D) ``` // 動画(MP4) new ncplayer('video', { playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster : 'https://CDN도메인/example_image_01.png', } ], customBtns:[ { ui:'pc', // カスタムボタン提供 UI position:'right-bottom', // カスタムボタンの追加領域(右下) icon:'/image/frame-corners-off.svg', // offステータスの画像 activeIcon:'/image/frame-corners.svg', // onステータスの画像 tooltip:’デフォルトモード', // offステータスのツールチップ activeTooltip:'没入モード', // onステータスのツールチップ flow:'left', // カスタムボタンの追加位置(左側) default:true, // true(デフォルト値): on, false: off callback(bool){ // 顧客会社コード console.log('プレイヤーに設定された value boolean', bool) }, }, ], }); ``` ### コントロールバー UIの動的変更 動画の長さによってボタン UIを動的に変更できます。 例えば、動画の長さが10秒未満の場合、フルスクリーン、PIP、設定ボタンを提供しないように設定できます。ユースケースは次の通りです。 ``` // 動画(MP4) const player = new ncplayer('video', { playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster : 'https://CDN도메인/example_image_01.png', } ], controlBtn:{ play:true, fullscreen:true, volume:true, times:true, pictureInPicture:true, setting:true, subtitle:false, }, }); // 顧客会社の必要に応じて動的にボタンを制御 const btnDisabled = () =>{ player.controlBarBtnStateUpdate({ fullscreen:false, // フルスクリーンボタンを表示しない(true: フルスクリーンボタンを表示) pictureInPicture:false, // PIPボタンを表示しない(true: PIPボタンを表示) setting:false, // 設定ボタンを表示しない(true: 設定ボタンを表示) }) } // 例) 動画の長さが10秒未満の場合、ボタンは隠す window.player.on('timeupdate',(res)=>{ if(res.duration < 10){ btnDisabled(); } }); ``` ### モバイル UIでシークバーを変更 モバイル UIで提供されるシークバーをプレイヤーの最下段に付ける形に変更できます。ユースケースは次の通りです。 ```
```