Player UI

release/20240425
English

Player UI

Article Summary

Share feedback

Thanks for sharing your feedback!

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.
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://CDNdomain/example_video_01.mp4',
    },
  ],
});

Fill screen

You can set how to fill the 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 to fill screen (proportion fit+full)
  playlist: [
    {
      file: 'https://CDNdomain/example_video_01.mp4',
    },
  ],
});

Display control bar

Using the controls property, you can set to display the control bar.
The example to set control bar as invisible is as follows:

// Video (MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNdomain/example_video_01.mp4',
      poster: 'https://CDNdomain/example_video_01.png',
    },
  ],
  controls: false // Control bar is not displayed (true: display the control bar)
});

Control bar button UI

Using the controlBtn property, you can set to use the control bar button UI.

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://CDNdomain/example_video_01.mp4',
      poster: 'https://CDNdomain/example_video_01.png',
    },
  ],
  controls: true,
  // true: display buttons, false: doesn't display buttons
  controlBtn: {
      play: true, // Playback
      fullscreen: true, // Switch to full screen
      volume: true, // Volume control
      times: true, // Playback time
      pictureInPicture: true, // PIP
      setting: true, // Settings
  },
});

Color of control bar

Using the progressBarColor property, you can set the color of the control bar on the video search slider.

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://CDNdomain/example_video_01.mp4',
      poster: 'https://CDNdomain/example_video_01.png',
    },
  ],
  progressBarColor: "#ff0000", // color code (red)
});

Multiple languages

Using the lang property, you can fix the language in the control bar.

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://CDNdomain/example_video_01.mp4',
    lang:'en' // Multilingual settings (fixed in English)
});

Control bar display time

Using the controlActiveTime property, you can set the time when the control bar is displayed.

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://CDNdomain/example_video_01.mp4',
      poster: 'https://CDNdomain/example_video_01.png',
    },
  ],
  controlActiveTime: 3000, // set the control bar display time (3000=3 seconds)
});

Fix Control bar UI

Using the ui property, you can fix the control bar UI regardless of the device.

Note

This option is only available when subscribing the Standard pricing plan.
The Ui for mobile provides the touch gesture features, UI for PC provides the keyboard shortcut features.

The example to fix the control bar UI for mobile is as follows:

// Video (MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNdomain/example_video_01.mp4',
    },
  ],
  ui: 'mobile', // Set control bar UI (Fix as UI for mobile)
});

Subtitles settings

Subtitles can be provided, using 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://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
            vtt:[
                {
                    file:'https://CDNdomain/subtitles-ko.vtt', // caption file
                    label:'Korean' // caption language
                },
                {
                    file:'https://CDNdomain/subtitles-en.vtt', // caption 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:

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://CDNdomain/example_video_01.svg"// 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://CDNdomain/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:

// Video (MP4)
new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/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://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/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)
    })
}

// \<example> 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:

<!-- Add mobileSeekBarFix to the parent element of the player-->
<div class="mobileSeekBarFix">
	<div id="video"></div>
</div>
<!-- Add mobileSeekBarFix to the parent element of the player-->

Was this article helpful?

What's Next

Player UX

Table of contents

Aspect ratio
Fill screen
Display control bar
Control bar button UI
Color of control bar
Multiple languages
Control bar display time
Fix Control bar UI
Subtitles settings
Add custom buttons