skinLayout プロパティを使用して、Web プレーヤーに表示する UI コンポーネントとその配置場所をコントロールします。
skinLayout プロパティ
プレーヤーの CSS ファイル aliplayer-min.css を直接編集して skinLayout を変更することもできます。 詳細については、「プレーヤースキンの設定」をご参照ください。
設定ルール
-
skinLayout が設定されていない場合、デフォルトですべてのコンポーネントが表示されます。
-
skinLayoutが空の配列[]またはfalseに設定されている場合、すべての項目が非表示になります。説明skinLayout を
[]またはfalseに設定すると、エラーインターフェイスを含むすべての UI が非表示になります。 エラーをハンドルするには、errorイベントをリッスンする必要があります。 詳細については、「エラーコード」をご参照ください。 -
特定のコンポーネントを非表示にするには、代わりに
skinLayoutIgnoreを使用します。 例：skinLayoutIgnore: [ 'bigPlayButton', // 大きな再生ボタンを非表示にします。 'controlBar.fullScreenButton' // コントロールバーの全画面ボタンを非表示にします。 ドット演算子を使用してサブコンポーネントを選択できます。 ]
プロパティ
align プロパティ
コンポーネントの親に対する配置を設定します：
-
'cc'：親コンポーネント内での絶対中央配置。 -
'tl'：左上からの相対配置。 兄弟コンポーネントの影響を受け、コンポーネントの左上隅からのオフセットとなります。 CSS のfloat: leftに似ています。 -
'tr'：右上からの相対配置。 兄弟コンポーネントの影響を受け、コンポーネントの右上隅からのオフセットとなります。 CSS のfloat: rightに似ています。 -
'tlabs'：左上からの絶対配置。 兄弟コンポーネントの影響を受けず、親コンポーネントの左上隅からのオフセットとなります。 -
'trabs'：右上からの絶対配置。 兄弟コンポーネントの影響を受けず、親コンポーネントの右上隅からのオフセットとなります。 -
'blabs'：左下からの絶対配置。 兄弟コンポーネントの影響を受けず、親コンポーネントの左下隅からのオフセットとなります。 -
'brabs'：右下からの絶対配置。 兄弟コンポーネントの影響を受けず、親コンポーネントの右下隅からのオフセットとなります。
x および y プロパティ
コンポーネントの親に対するオフセットを設定します。
-
x: {Number} 水平方向のオフセット。 原点は
alignに依存します。 `align` がccの場合は無視されます。 -
y: {Number} 垂直方向のオフセット。 原点は
alignに依存します。 `align` がccの場合は無視されます。
オンデマンド構成
プロパティの説明
|
プロパティ |
説明 |
|
|
bigPlayButton |
再生ボタン。 |
|
|
H5Loading |
ローディングアニメーション。 |
|
|
errorDisplay |
再生失敗時のエラーメッセージ。 |
|
|
infoDisplay |
字幕や再生速度の調整など、設定変更時の通知。 |
|
|
tooltip |
[ボリューム] や [再生] などのコントロールバーのボタンのツールチップ。 |
|
|
thumbnail |
プログレスバーにホバーしたときのサムネイルプレビュー。 |
|
|
controlBar |
コントロールバー。 |
|
|
controlBar の子コンポーネント |
progress |
プログレスバー。 |
|
playButton |
コントロールバーの再生ボタン。 |
|
|
timeDisplay |
再生時間。 |
|
|
fullScreenButton |
全画面ボタン。 |
|
|
subtitle |
字幕アイコン。 |
|
|
setting |
設定ボタン。 |
|
|
volume |
ボリュームボタン。 |
|
デフォルト構成
skinLayout: [
{ name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
{ name: "H5Loading", align: "cc" },
{ name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
{ name: "infoDisplay" },
{ name: "tooltip", align: "blabs", x: 0, y: 56 },
{ name: "thumbnail" },
{
name: "controlBar",
align: "blabs",
x: 0,
y: 0,
children: [
{ name: "progress", align: "blabs", x: 0, y: 44 },
{ name: "playButton", align: "tl", x: 15, y: 12 },
{ name: "timeDisplay", align: "tl", x: 10, y: 7 },
{ name: "fullScreenButton", align: "tr", x: 10, y: 12 },
{ name: "subtitle", align: "tr", x: 15, y: 12 },
{ name: "setting", align: "tr", x: 15, y: 12 },
{ name: "volume", align: "tr", x: 5, y: 10 },
],
},
]デフォルトのコントロールバーは、暗い背景で、上部に赤/グレーのプログレスバーがあります。 左側には再生/一時停止ボタンと時間表示 (00:43 / 10:35) があり、右側にはボリュームボタンと全画面ボタンがあります。
ライブストリーミング構成
プロパティの説明
|
プロパティ |
説明 |
|
|
bigPlayButton |
再生ボタン。 |
|
|
errorDisplay |
再生失敗時のエラーメッセージ。 |
|
|
infoDisplay |
字幕や再生速度の調整など、設定変更時の通知。 |
|
|
controlBar |
コントロールバー。 |
|
|
controlBar の子コンポーネント |
liveDisplay |
ライブストリーム中に表示される LIVE インジケーター。 |
|
fullScreenButton |
全画面ボタン。 |
|
|
subtitle |
字幕アイコン。 |
|
|
setting |
設定ボタン。 |
|
|
volume |
ボリュームボタン。 |
|
ApsaraVideo Live の HTML5 プレーヤーのデフォルト設定
skinLayout: [
{ name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
{ name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
{ name: "infoDisplay", align: "cc" },
{
name: "controlBar",
align: "blabs",
x: 0,
y: 0,
children: [
{ name: "liveDisplay", align: "tlabs", x: 15, y: 6 },
{ name: "fullScreenButton", align: "tr", x: 10, y: 10 },
{ name: "subtitle", align: "tr", x: 15, y: 12 },
{ name: "setting", align: "tr", x: 15, y: 12 },
{ name: "volume", align: "tr", x: 5, y: 10 },
],
},
]