Player UX

Available in Classic and VPC

This section describes how to edit a script code and set options on Player UX.

Display mute status

Display mute status UI with the startMutedInfoNotVisible property.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDNdomain/example_video_01.mp4',
    },
  ],
	startMutedInfoNotVisible: true, // not display mute state UI (false(default value): display mute state UI)
});

Thumbnail preview

You can set to indicate the preview of the relevant segment at the top of video seek slider of the control bar with the seekingPreview property.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDNdomain/example_video_01.mp4',
    },
  ],
	seekingPreview: true, // display preview of seek slider (default value)(false: not display preview)
});

Autopause when browser is disabled

The autoPause browser tab stops the video automatically when the browser tab is disabled.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',          
        }
    ],
    autoPause:true // autopause when browser is disabled
});

Keyboard shortcuts

You can enable the Keyboard shortcuts feature with the keyboardShortcut property.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDNdomain/example_video_01.mp4',
},
],
keyboardShortcut: true, // use of Keyboard shortcuts (default)(false: no use of Keyboard shortcuts)
});

The features of keyboard shortcuts are as below:

Touch gestures

You can enable the Touch gestures feature in the mobile UI with the touchGestures property.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNdomain/example_video_01.mp4',
    },
  ],
	touchGestures: true // use of Touch gestures (default)(false: no use of Touch gestures)
});

Text watermark

You can set a watermark that can track viewers using the watermarkText property with desired text (user ID + site name, etc.).

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNdomain/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, // use of text watermark (false(default): no use of text watermark )
    watermarkText:'UserId@SiteDomain', // watermark text, for example, user ID and site name for tracking viewers
});

Detailed settings for text watermark

You can configure detailed options by enabling watermark random position when using text watermark.

The examples for enabling and disabling random position are as follows:

• Enable random position

  // Video (MP4)
  new ncplayer('video1', {
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    visibleWatermark:true, // only configurable in the console (false(default value): no use of text watermark)
    watermarkText:'UserId@SiteDomain', // for example, user ID and site name for tracking viewers
    watermarkConfig:{
        randPosition: true, // enable watermark random position (default value)
        randPositionInterVal: 5000, // time to randomly change watermark position, default: 3000 (3 second)
    }
  });
  

• Disable random position

  // Video (MP4)
  new ncplayer('video1', {
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    visibleWatermark:true, // only configurable in the console (false(default value): no use of text watermark)
    watermarkText:'UserId@SiteDomain', // for example, user ID and site name for tracking viewers
    watermarkConfig:{
        randPosition: false, // fix watermark position
        x: 10, // horizontal position %
        y: 2, // vertical position %
        opacity: 0.4 //Transparency of 0.1-1
    }
  });
  

IOS web fullscreen method

You can set a new fullscreen mode responding to the iOS mobile Safari with the iosFullscreenNativeMode property.

Examples are as follows:

// Video (MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',          
        }
    ],
    iosFullscreenNativeMode:false // true : iOS Native Fullscreen / false : Use of HTML Fullscreen mode
});