--- title: "Player UI" slug: "vpe-example-ui" updated: 2026-09-17T09:22:39Z published: 2026-09-17T09:22:39Z 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. # Player UI Available in Classic and VPC Player UI describes how to edit a script code and set options on Player UI. 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). - Configurable options may vary depending on the current pricing plan. ## Aspect ratio You can specify aspect ratio of the player with the `aspectRatio` property. Note - It can be applied only when the player does not have the fixed size of (`width`, `height`). - Even if the size of the `container` changes, the configured aspect ratio remains. The example to set aspect ratio to 16:9 is as follows: ``` // Video (MP4) new ncplayer('video1', { aspectRatio: '16/9', // Set the aspect ratio playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', }, ], }); ``` ## Full screen You can set full screen with the `objectFit` property. The example of setting to maintain the ratio of a playback source and fill the screen is as follows: ``` // Video (MP4) new ncplayer('video1', { aspectRatio: '16/9', objectFit: 'cover', // Set full screen (proportion fit+full) playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', }, ], }); ``` ## Display control bar You can set to display the control bar with the `controls` property. The example to set control bar as invisible is as follows: ``` // Video (MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], controls: false // Control bar is not displayed (true: display the control bar) }); ``` ## Control bar button UI You can set to use the control bar button UI with the `controlBtn` property. Note This option is only available when subscribing the Standard pricing plan. The example of setting to display all UI buttons of control bar is as follows: ``` // Video (MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], controls: true, // true: display buttons, false: doesn't display buttons controlBtn: { play: true, // Playback progressBar: true // Enable playback bar fullscreen: true, // Switch to full screen volume: true, // Volume control times: true, // Playback time pictureInPicture: true, // PIP setting: true, // Settings }, }); ``` ## Color of control bar You can set the color of the control bar on the video search slider with the `progressBarColor` property. Note This option is only available when subscribing the Standard pricing plan. The example to set the color of the control bar to red is as follows: ``` // Video (MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], progressBarColor: "#ff0000", // color code (red) }); ``` ## Multilingual You can fix the language in the control bar with the `lang` property. Note It automatically applies the control bar by detecting the language setting on the browser. If the language set on the browser isn’t available in the player, English(en) is displayed as the default value. The example to fix the language of the control bar to English is as follows: ``` // Video (MP4) new ncplayer('video4', { playlist: 'https://CDN도메인/example_video_01.mp4', lang:'en' // Multilingual settings (fixed in English) }); ``` ## Control bar display time You can set the time when the control bar is displayed with the `controlActiveTime` property. Note This option is only available when subscribing the Standard pricing plan. The example of setting to display the control bar for 3 seconds is as follows: ``` // Video (MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster: 'https://CDN도메인/example_video_01.png', }, ], controlActiveTime: 3000, // set the control bar display time (3000=3 seconds) }); ``` ## Fix Control bar UI You can fix the control bar UI regardless of the device with the `ui` property. Note - This option is only available when subscribing the Standard pricing plan. - The Ui for mobile provides the [touch gestures](/docs/en/vpe-example-ux#%ED%84%B0%EC%B9%98%EC%A0%9C%EC%8A%A4%EC%B2%98) features; the UI for PC provides the [keyboard shortcuts](/docs/en/vpe-example-ux#%ED%82%A4%EB%B3%B4%EB%93%9C%EB%8B%A8%EC%B6%95%ED%82%A4) features. The example to fix the control bar UI for mobile is as follows: ``` // Video (MP4) new ncplayer('video1', { autostart: true, playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', }, ], ui: 'mobile', // Set control bar UI (Fix as UI for mobile) }); ``` ## Subtitles settings Subtitles can be provided with the `playlist.vtt` property. Note Captions (subtitles) in VTT format are supported, and multiple subtitles can be provided in an array format. The example to provide Korean and English subtitles is as follows: ``` // Video (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', // Subtitle file label:'Korean' // caption language }, { file:'https://CDN도메인/subtitles-en.vtt', // Subtitle file label:'English' // caption language } ] } ], }); ``` ## Add custom buttons New features can be provided by adding a custom button in the player with the `customBtns` property. Note - This option is only available when subscribing the Standard pricing plan. - You can add up to 4 custom buttons regardless of the position. The location of a custom button by `position` and `flow` property settings is as follows: ![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-11-14T05%3A05%3A01Z&se=2026-11-14T06%3A05%3A01Z&sr=c&sp=r&sig=qL2xGq%2FQ8%2FSiur7lqt14AiBX8pGf4Td3ZoHD%2FpwejdE%3D) The example to add a custom button on the right bottom left is as follows: ``` // Video (MP4) let player = new ncplayer('video1', { playlist: [ { file: 'https://https://CDNdomain/example_video_01.mp4', }, ], customBtns: [ { ui: "pc", // UI to provide a custom button id: "chatBtn", // DOM ID of a custom button position: "right-bottom", // area for a custom button (bottom right) flow: "left", // additional area of a custom button (Left) icon: "https://CDN도메인/example_video_01.svg", // custom button image URL callback(){ // event that occurs when clicking a custom button alert('Button click') } }, { ui: "mobile", // UI to provide a custom button id: "chatBtn", // DOM ID of a custom button position: "right-bottom", // area for a custom button (bottom right) flow: "left", // additional area of a custom button (Left) icon: "https://CDN도메인/example_video_02.svg", // custom button image URL callback(){ // event that occurs when clicking a custom button alert("button click") } } ] }); // bind an event to a custom button, using ready event player.on('ready',()=>{ documnet.getElementById('chatBtn').addEventListener('click',()=>{ alert('Button click') }); }) ``` ### Custom buttons enhancement You can display custom buttons differently depending on feature activation status (ON/OFF). You can add icons by status, set the default condition, and add tooltip for each button. The example to add icons and tooltip by status for a custom button is as follows: ![image.png](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/image-E1WYHXBK.png?sv=2026-02-06&spr=https&st=2026-11-14T05%3A05%3A01Z&se=2026-11-14T06%3A05%3A01Z&sr=c&sp=r&sig=qL2xGq%2FQ8%2FSiur7lqt14AiBX8pGf4Td3ZoHD%2FpwejdE%3D) ``` // Video (MP4) new ncplayer('video', { playlist: [ { file: 'https://CDN도메인/example_video_01.mp4', poster : 'https://CDN도메인/example_image_01.png', } ], customBtns:[ { ui:'pc', // provide a custom button UI position:'right-bottom', // area for a custom button (bottom right) icon:'/image/frame-corners-off.svg', // off state image activeIcon:'/image/frame-corners.svg', // on state image tooltip:’default mode', // off state tooltip activeTooltip:'immersion mode', // on sate tooltip flow:'left', // area for a custom button (bottom right) default:true, // true (default): on, false: off callback(bool){ // customer code console.log('Value boolean set in player', bool) }, }, ], }); ``` ### Control bar UI dynamic edit You can dynamically edit the button UI depending on the length of the video. For example, you can set not to provide full screen, PIP, settings button when duration of a video is less than 10 seconds. Examples are as follows: ``` // Video (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, }, }); // Control buttons dynamically as per customers' requirement const btnDisabled = () =>{ player.controlBarBtnStateUpdate({ fullscreen:false, // A full screen button is not displayed (true: display a full screen button) pictureInPicture:false, // PIP button is not displayed (true: display PIP button) setting:false, // Settings button is not displayed (true: display settings button) }) } // \ buttons are hidden when duration of a video is less than 10 seconds window.player.on('timeupdate',(res)=>{ if(res.duration < 10){ btnDisabled(); } }); ``` ### Navigation bar change in Mobile UI You can change the navigation bar provided in the mobile UI to put it on the bottom of the player. Examples are as follows: ```
```