プレイヤー UX

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

プレイヤー UXでは、スクリプトコードを変更してプレイヤー 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: プレビューを表示しない)
});

ブラウザ無効化時の自動停止

autoPauseブラウザタブが無効になっていると、映像を自動的に停止します。

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

// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',          
        }
    ],
    autoPause:true // ブラウザ無効化時に自動停止
});

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

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

IOSウェブフルスクリーン方式

iosFullscreenNativeModeプロパティで iOSモバイル Safariに対応する新しい Fullscreenモードを設定できます。

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

// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',          
        }
    ],
    iosFullscreenNativeMode:false // true : iOS Native Fullscreen / false : HTML Fullscreenモード使用
});