Player UX

Available in Classic and VPC

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

Note

For descriptions of properties to set options, see Player settings.
Configurable options may vary depending on the current pricing plan.

Display mute status

Display mute state UI as the startMutedInfoNotVisible property.
vpe-example-ux_muted_ko

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.

Note

This option is only available when subscribing the Standard pricing plan.
The feature is only for VOD and disabled in LIVE.

vpe-example-ux_preview_ko

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.

Note

This option is only available when subscribing the Standard pricing plan.

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.

Keyboard shortcut	Features
Left/right arrows	Skip Video
Up/down arrows	Volume control
F	Full screen
M	Mute
Space	Play/Pause

Touch gestures

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

Note

This option is only available when subscribing the Standard pricing plan.

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.).

Note

To use this feature, the watermark settings of the player on the console must be activated. For more information about watermark activation, see Player settings.
This option is only available when subscribing the Standard pricing plan.
Adding watermark is only available through script.

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.

Note

The detail options for the watermark can be configured in NAVER Cloud Platform console. For more information, see Create a player.

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