カスタマイズ
基本機能
プレイリスト
字幕
仕様
| パラメーター名 | 型 | 値 | 設定 | デフォルト値 |
|---|---|---|---|---|
| captions | object | list,style | 任意 | - |
説明
ビデオグプレーヤーに字幕を設定します。なお、プレイヤーのコントロールバーに字幕ボタンを表示させる場合はbtn_captionsをtrueに設定してください。
captions.object
仕様
| パラメーター名 | 型 | 値 | 設定 | デフォルト値 |
|---|---|---|---|---|
| list | array | file,label,default | 必須 | null |
| style | object | color,fontSize,fontFamily,fontOpacity,backgroundColor,backgroundOpacity,edgeStyle,windowColor,windowOpacity | 任意 | - |
説明
| パラメーター名 | 説明 |
|---|---|
| list | 字幕ファイルを設定します。 |
| style | 字幕のstyleを設定します。 |
captions.list.object
仕様
| パラメーター名 | 型 | 値 | 設定 | デフォルト値 |
|---|---|---|---|---|
| file | string | url | 必須 | null |
| label | string | text | 必須 | index |
| default | boolean | true,false | 任意 | false |
説明
| パラメーター名 | 説明 |
|---|---|
| file | 字幕ファイル（WebVTT,SRT,DFXP）のurlを設定します。 |
| label | 字幕のラベルを設定します。（英語、日本語等）。複数のcaptionを持つ場合でのみ使用され、字幕メニューにラベルが表示されます。 |
| default | 字幕を起動時に任意の字幕を表示する場合は、これをtrueに設定します。設定しない場合、字幕はデフォルトでオフになっており、ユーザーは字幕メニューを選択して有効にする必要があります |
captions.style.object
仕様
| パラメーター名 | 型 | 値 | 設定 | デフォルト値 |
|---|---|---|---|---|
| color | string | color | 任意 | #ffffff |
| fontSize | string | px,em,% | 任意 | 1.5em |
| fontFamily | string | font-family | 任意 | sans-serif |
| fontOpacity | number | 0-100 | 任意 | 100 |
| backgroundColor | string | color | 任意 | #000000 |
| backgroundOpacity | number | 0-100 | 任意 | 100 |
| edgeStyle | string | none,dropshadow,raised,depressed,uniform |
任意 | none |
| windowColor | string | color | 任意 | - |
| windowOpacity | number | 0-100 | 任意 | 100 |
説明
| パラメーター名 | 説明 |
|---|---|
| color | 字幕の文字色を設定します。 |
| fontSize | 字幕の文字サイズを設定します。 |
| fontFamily | 字幕の種類を設定します。 |
| fontOpacity | 字幕文字の透明度をパーセントで設定します。0で透明、100で非透明になります。 |
| backgroundColor | 字幕の背景色を設定します。 |
| backgroundOpacity | 字幕文字の背景の透明度をパーセントで設定します。0で透明、100で非透明になります。 |
| edgeStyle | 字幕の陰影を設定します。 |
| windowColor | 字幕エリアの背景色を設定します。 |
| windowOpacity | 字幕エリアの背景の透明度をパーセントで設定します。0で透明、100で非透明になります。 |
コードサンプル
<script>
const options = {
playlist: [
{
captions:{
list:[
{
file:'https://sample1.jp/captions/jp.vtt',
label:'日本語',
default:true
},
{
file:'https://sample1.jp/captions/en.vtt',
label:'英語'
},
],
style:{
color:"#0000FF",
fontSize:"3em",
fontFamily:"serif",
fontOpacity:50,
backgroundColor:"#FFA500",
backgroundOpacity:50,
edgeStyle:"dropshadow",
windowColor: "#5CFF82",
windowOpacity: 50
},
},
...
},
],
};
const player = videogplayer('video_tag_id', options);
</script>