カスタマイズ
ボタン表示
カスタムボタン
仕様
| パラメーター名 | 型 | 値 | 設定 | デフォルト値 |
|---|---|---|---|---|
| btn_custom | object | callback,id,img,tooltip,btnClass | 任意 | false |
説明
プレイヤー内右上に任意のカスタムボタンを設定します。
btn_custom.object
仕様
| パラメーター名 | 型 | 値 | 設定 | デフォルト値 |
|---|---|---|---|---|
| callback | function | - | 任意 | - |
| id | integer | number | 任意 | null |
| img | string | url | 任意 | - |
| tooltip | string | text | 任意 | - |
| btnClass | string | text | 任意 | - |
説明
| パラメーター名 | 説明 |
|---|---|
| callback | ボタンがクリックされたときに呼び出されるJavaScript関数です。 |
| id | ボタンを識別するために使用される文字列を設定します。すべてのボタン間で一意である必要があります。 |
| img | ボタンアイコンとして使用される画像を設定します。24x24ピクセルアイコンが適しています。 |
| tooltip | ボタンにマウスを置いたときに表示されるツールチップラベルを設定します。 |
| btnClass | ボタン要素に追加されるオプションのCSSクラス名を設定します。 |
コードサンプル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const options = {
btn_cutom: [{
callback: ()=>{
alert("チャプタークリック");
},
id: 'customBtn1',
img: 'https://sample1.jp/assets/btnImg.png',
tooltip: 'カスタムボタン',
btnClass: 'btn-class'
}],
...
};
const player = videogplayer('video_tag_id', options);