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, //再生
progressBar: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形式の CAPTION(字幕)をサポートし、配列形式で複数の字幕を提供できます。
韓国語および英語の字幕を提供するユースケースは、次の通りです。
// 動画(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を追加-->