プレイヤー UX

Prev Next

Classic/VPC環境で利用できます。

プレイヤー UXでは、スクリプトコードを修正してそのオプションを設定する方法を説明します。

参考
  • オプションを設定するプロパティに関する説明は、プレイヤー設定をご参照ください。
  • 利用中の料金プランに応じて設定できるオプションが異なります。

ミュート状態の表示有無

startMutedInfoNotVisibleプロパティでミュート状態 UIを表示できます。
vpe-example-ux_muted_ko

ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
	startMutedInfoNotVisible: true, // ミュート状態 UIを表示しない(false(デフォルト): ミュート状態 UIを表示する)
});

区間移動のプレビュー

seekingPreview プロパティでコントロールバーの動画シークスライダの上にその区間のプレビューを表示するように設定します。

参考
  • このオプションは Standard料金プランを利用中の場合のみ設定できます。
  • この機能は VOD専用機能で、LIVEでは無効になります。

vpe-example-ux_preview_ko

ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
	seekingPreview: true, // シークスライダのプレビューを表示する(デフォルト)(false: プレビューを表示しない)
});

キーボードショートカット

keyboardShortcut プロパティでキーボードショートカット機能を有効化できます。

参考

このオプションは Standard料金プランを利用中の場合のみ設定できます。

ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
keyboardShortcut: true, // キーボードショートカットを使用する(デフォルト)(false: キーボードショートカットを使用しない)
});

キーボードショートカット機能は次の通りです。

ショートカット 機能
左/右矢印 動画スキップ
上/下矢印 ボリュームコントロール
F フルスクリーン
M ミュート
Space 再生/停止

タッチジェスチャ

touchGestures プロパティでモバイル UIのタッチジェスチャ機能を有効化できます。

参考

このオプションは Standard料金プランを利用中の場合のみ設定できます。

ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
	touchGestures: true // タッチジェスチャを使用する(デフォルト)(false: タッチジェスチャを使用しない)
});

テキストウォーターマーク

watermarkText プロパティで視聴者を追跡できるウォーターマークを希望するテキスト(ユーザー ID+サイト名など)に設定できます。

参考
  • この機能を使用するには、コンソールでそのプレイヤーのウォーターマーク設定を有効にする必要があります。ウォーターマークの有効化に関する詳細は、プレイヤー設定をご参照ください。
  • このオプションは Standard料金プランを利用中の場合のみ設定できます。
  • ウォーターマークテキストは、スクリプトを介してのみ追加できます。

ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, // テキストウォーターマークを使用する(false(デフォルト): テキストウォーターマークを使用しない)
    watermarkText:'UserId@SiteDomain', // ウォーターマークテキスト、例) 視聴者を追跡できるユーザー ID+サイト名
});

テキストウォーターマークの詳細設定

テキストウォーターマークを使用する場合、ウォーターマークのランダム位置を有効化有無に応じて詳細オプションを設定できます。

参考

ウォーターマークの詳細オプションは、NAVERクラウドプラットフォームコンソールでも設定できます。詳細は、プレイヤー設定をご参照ください。

ランダム位置の有効化と無効化のユースケースは、次の通りです。

  • ランダム位置の有効化
    // 動画(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, // コンソールでのみ設定可能(false(デフォルト): テキストウォーターマークを使用しない)
  watermarkText:'UserId@SiteDomain', // 例) 視聴者を追跡できるユーザー ID+サイト名
  watermarkConfig:{
      randPosition: true, // ウォーターマークのランダム位置を有効化(デフォルト)
      randPositionInterVal: 5000, // ウォーターマーク位置のランダム変更時間、デフォルト: 3000(3秒)
  }
});
  • ランダム位置の無効化
    // 動画(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, // コンソールでのみ設定可能(false(デフォルト): テキストウォーターマークを使用しない)
  watermarkText:'UserId@SiteDomain', // 例) 視聴者を追跡できるユーザー ID+サイト名
  watermarkConfig:{
      randPosition: false, // ウォーターマークの位置を固定
      x: 10, // 横位置%
      y: 2, // 縦位置%
      opacity: 0.4 //透明度0.1~1
  }
});