skinLayout プロパティを設定して、Web プレーヤーの再生ボタン、読み込みアニメーション、コントロールバーの表示/非表示と位置をカスタマイズできます。
skinLayout プロパティ
プレーヤーの CSS ファイルである aliplayer-min.css を上書きして、skinLayout プロパティを変更することもできます。 詳細については、「プレーヤーのスキンの設定」をご参照ください。
skinLayout の設定ルール
skinLayout プロパティを構成しない場合、すべてのコンポーネントが表示されます。
skinLayout プロパティが空のコレクション
[]またはfalseに設定されている場合、すべてのコンポーネントは非表示になります。説明skinLayout プロパティを空のコレクション
[]またはfalseに設定すると、エラーインターフェイスを含むプレーヤーの組み込みスキンが非表示になります。 再生例外やその他のエラーは通知されません。 この場合、errorイベントをリッスンしてエラーを処理します。 エラーコードの詳細については、「エラーコード」をご参照ください。デフォルト設定から特定の UI コンポーネントを非表示にするには、
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に設定されている場合、このプロパティは無効です。
VOD の設定
ビデオオンデマンドコンポーネントのパラメーター
コンポーネントパラメーター | 説明 | |
bigPlayButton | 再生ボタン。 | |
H5Loading | ビデオの読み込み中に表示されるアニメーション。 | |
errorDisplay | ビデオの再生に失敗した場合に表示されるエラーメッセージ。 | |
infoDisplay | プレーヤーの設定が変更されたときに表示されるメッセージ。たとえば、字幕や再生速度を変更するとメッセージが表示されます。 | |
tooltip | プレーヤーのコントロールバーにある要素の説明。たとえば、ポインターを音量ボタンまたは再生ボタンの上に移動すると、[音量] または [再生] が表示されます。 | |
thumbnail | プログレスバーにカーソルを合わせたときに表示されるビデオサムネイル。 | |
controlBar | コントロールバー。 | |
controlBar の子コンポーネント | progress | プログレスバー。 |
playButton | コントロールバーの再生ボタン。 | |
timeDisplay | 再生時間。 | |
fullScreenButton | 全画面ボタン。 | |
subtitle | 字幕アイコン。 | |
setting | 設定ボタン。 | |
volume | 音量ボタン。 | |
デフォルトの VOD H5 設定
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 },
],
},
]デフォルトのスタイル:
ライブストリーミングの設定
プロパティの説明
プロパティ | 説明 | |
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 },
],
},
]デフォルトのスタイル:
