プレイヤー UI

印刷する
共有
PDF

プレイヤー UI

印刷する
共有
PDF

Article Summary

Share feedback

Thanks for sharing your feedback!

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

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

参考

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

アスペクト比

aspectRatio プロパティでプレイヤーの縦横比を指定できます。

参考

プレイヤーが固定型サイズ(width、height)を持っていない場合のみ適用できます。
containerのサイズが変わっても縦横比は維持されます。

アスペクト比を16:9に設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  aspectRatio: '16/9', //アスペクト比の設定
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
});

画面拡大

objectFit プロパティで画面の拡大方式を設定します。
再生ソースの比率を維持し、画面サイズに合わせるように設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  aspectRatio: '16/9',
  objectFit: 'cover', // 画面拡大の設定(比率を維持する+画面サイズに合わせる)
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
});

コントロールバー表示

controls プロパティでコントロールバーの表示有無を設定します。
コントロールバーを表示しないように設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
      poster: 'https://CDNドメイン/example_video_01.png',
    },
  ],
  controls: false // コントロールバーを表示しない(true: コントロールバーを表示)
});

コントロールバーボタン UI

controlBtn プロパティでコントロールバーのボタン UIの使用有無を設定します。

参考

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

コントロールバーのすべてのボタン UIを表示するように設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
      poster: 'https://CDNドメイン/example_video_01.png',
    },
  ],
  controls: true,
  // true: ボタンを表示する、false: ボタンを表示しない
  controlBtn: {
      play: true, // 再生
      fullscreen: true, // フルスクリーンに切り替え
      volume: true, // ボリュームコントロール
      times: true, // 再生時間
      pictureInPicture: true, // PIP
      setting: true, // 設定
  },
});

コントロールバーのカラー

progressBarColor プロパティでコントロールバーの動画シークスライダのカラーをできます。

参考

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

コントロールバーのカラーを赤に設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
      poster: 'https://CDNドメイン/example_video_01.png',
    },
  ],
  progressBarColor: "#ff0000", // カラーコード(赤)
});

多言語

lang プロパティでコントロールバーの言語を固定します。

参考

基本的にブラウザの言語設定を検知し、コントロールバーに自動的に適用します。ブラウザに設定されている言語がプレイヤーがサポートしていない言語の場合、英語(en)がデフォルトで表示されます。

コントロールバーの言語を英語に固定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video4', {
    playlist: 'https://CDNドメイン/example_video_01.mp4',
    lang:'en' // 多言語設定(英語に固定)
});

コントロールバーの表示時間

controlActiveTime プロパティでコントロールバーを表示する時間を設定します。

参考

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

コントロールバーを3秒間表示するように設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
      poster: 'https://CDNドメイン/example_video_01.png',
    },
  ],
  controlActiveTime: 3000, // コントロールバーの表示時間を設定(3000=3秒)
});

コントロールバー UI固定

ui プロパティでデバイスに関係なくコントロールバー UIを固定します。

参考

このオプションは Standard料金プランを利用中の場合のみ設定できます。
モバイル専用 UIはタッチジェスチャ機能を、PC専用 UIはキーボードショートカット機能を提供します。

モバイル専用コントロールバー UIに固定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true,
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
  ui: 'mobile', // コントロールバー UIの設定(モバイル専用 UIに固定)
});

字幕設定

playlist.vtt プロパティを利用して字幕を提供できます。

参考

VTT形式のキャプション(字幕)をサポートし、配列形式で複数の字幕を提供できます。

韓国語および英語の字幕を提供するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',
            vtt:[
                {
                    file:'https://CDNドメイン/subtitles-ko.vtt', // 字幕ファイル
                    label:'韓国語' // 字幕言語
                },
                {
                    file:'https://CDNドメイン/subtitles-en.vtt', // 字幕ファイル
                    label:'English' // 字幕言語
                }
            ]
        }
    ],
});

カスタムボタン追加

customBtns プロパティでプレイヤーにカスタムボタンを追加し、新しい機能を提供できます。

参考

このオプションは Standard料金プランを利用中の場合のみ設定できます。
カスタムボタンは位置に関係なく最大4つまで追加できます。

positionおよび flowプロパティ設定ごとのカスタムボタンの位置は、次の通りです。

右下の左側にカスタムボタンを追加するユースケースは、次の通りです。

// 動画(MP4)
let player = new ncplayer('video1', {
  playlist: [
    {
      file: 'https://https://CDNドメイン/example_video_01.mp4',
    },
  ],
  customBtns: [
          {
              ui: "pc", // カスタムボタン提供 UI
              id: "chatBtn", // カスタムボタンの DOM ID
              position: "right-bottom", // カスタムボタンの追加領域(右下)
              flow: "left", // カスタムボタンの追加位置(左側)
              icon: "https://CDNドメイン/example_video_01.svg", // カスタムボタンの画像 URL
              callback(){ // カスタムボタンのクリック時に発生させるイベント
                alert('ボタンクリック')
              }
              
          },
          {
              ui: "mobile", // カスタムボタン提供 UI
              id: "chatBtn", // カスタムボタンの DOM ID
              position: "right-bottom", // カスタムボタンの追加領域(右下)
              flow: "left", // カスタムボタンの追加位置(左側)
              icon: "https://CDNドメイン/example_video_02.svg", // カスタムボタンの画像 URL
              callback(){ // カスタムボタンのクリック時に発生させるイベント
                alert("ボタンクリック")
              }
            }
  ]
});

// readyイベントを利用してカスタムボタンにイベントをバインド
player.on('ready',()=>{
  documnet.getElementById('chatBtn').addEventListener('click',()=>{
      alert('ボタンクリック')
  });
})

カスタムボタンの高度化

機能有効状態(ON/OFF)に応じてカスタムボタンを異なる方法で表示できます。状態別アイコンを追加して default状態を設定でき、各ボタンの tooltip(ツールチップ)も追加できます。

カスタムボタンの状態別アイコンとツールチップを追加するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',
        }
    ],
    customBtns:[
        {
            ui:'pc', // カスタムボタン提供 UI
            position:'right-bottom', // カスタムボタンの追加領域(右下)
            icon:'/image/frame-corners-off.svg', // off状態の画像
            activeIcon:'/image/frame-corners.svg', // on状態の画像
            tooltip:’デフォルトモード', // off状態のツールチップ
            activeTooltip:'没入モード', // on状態のツールチップ
            flow:'left', // カスタムボタンの追加位置(左側)
            default:true, // true(デフォルト値): on、false: off 
            callback(bool){
                // 顧客会社コード
                console.log('プレイヤーに設定された value boolean', bool)
            },
        },
    ],
});

コントロールバー UIの動的修正

動画の長さによってボタン UIを動的に修正できます。
例えば、動画の長さが10秒未満の場合、フルスクリーン、PIP、設定ボタンを提供しないように設定できます。ユースケースは次の通りです。

// 動画(MP4)
const player = new ncplayer('video', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',
        }
    ],
    controlBtn:{
        play:true,
        fullscreen:true,
        volume:true,
        times:true,
        pictureInPicture:true,
        setting:true,
        subtitle:false,
    },
});

// 顧客会社の必要に応じて動的にボタンを制御
const btnDisabled = () =>{
    player.controlBarBtnStateUpdate({
        fullscreen:false, // フルスクリーンボタンを表示しない(true: フルスクリーンボタンを表示する)
        pictureInPicture:false, // PIPボタンを表示しない(true: PIPボタンを表示する)
        setting:false, // 設定ボタンを表示しない(true: 設定ボタンを表示する)
    })
}

// 例) 動画の長さが10秒未満の場合、ボタンは隠す
window.player.on('timeupdate',(res)=>{
    if(res.duration < 10){
        btnDisabled(); 
    }
});

モバイル UIでシークバーを変更

モバイル UIで提供されるシークバーをプレイヤーの最下段に付ける形に変更できます。ユースケースは次の通りです。

<!-- プレイヤーを親要素に mobileSeekBarFixを追加-->
<div class="mobileSeekBarFix">
	<div id="video"></div>
</div>
<!-- プレイヤーを親要素に mobileSeekBarFixを追加-->

この記事は役に立ちましたか?

What's Next

プレイヤー UX

アスペクト比
画面拡大
コントロールバー表示
コントロールバーボタン UI
コントロールバーのカラー
多言語
コントロールバーの表示時間
コントロールバー UI固定
字幕設定
カスタムボタン追加