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.
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 features; the UI for PC provides the keyboard shortcuts 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:

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:

// 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)
    })
}

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