Player UX

Available in Classic and VPC

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

Display mute status

Display mute state UI as 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)
});

Preview segment skip

You can set to indicate the preview of the relevant segment at the top of video search slider of the control bar with the seekingPreviewproperty.

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 search slider (default value)(false: not display preview)
});

Keyboard shortcut

You can enable the keyboard shortcut feature with the keyboardShortcutproperty.

Examples are as follows:

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

The features of keyboard shortcuts are as below.

Touch gestures

You can enable the touch gesture feature in mobile UI with the touchGesturesproperty.

Examples are as follows:

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

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 text watermark (false(default): no use of text watermark )
    watermarkText:'UserId@SiteDomain', // watermark text, \<example> User ID tracking a viewer+site name
});

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', // \<example> User ID tracking a viewer+site name
    watermarkConfig:{
        randPosition: true, // enable watermark random position (default time)
        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', // \<example> User ID tracking a viewer+site name
    watermarkConfig:{
        randPosition: false, // fix watermark position
        x: 10, // horizontal position %
        y: 2, // vertical position %
        opacity: 0.4 //Transparency of 0.1-1
    }
  });