プレイヤー UX

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

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

ミュート状態の表示有無

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

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

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

区間移動のプレビュー

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

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

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

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

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

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

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

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

タッチジェスチャ

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

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

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

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

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

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

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

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

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

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

• ランダム位置の有効化

  // 動画(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
    }
  });