ApsaraVideo PlayerのスキンをHTML5モードとFlashモードで設定できます。 このトピックでは、プレーヤースキンを設定する方法について説明します。
HTML5プレーヤーのスキンを設定する
デフォルトのレイアウトを定义するCSSファイルを参照します。
<link rel="stylesheet" href="// g.alicdn.com/de/prismplayer/{SDKバージョン番号}/skins/default/aliplayer.css" />CSSファイルにはスキン素材: http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.pngが含まれています。
すべての内部コンポーネントを設定します。 次の表に、設定できるコンポーネントを示します。
コンポーネント | 説明 |
|---|---|
プリズムプレーヤー | プレイヤー設定 |
プリズム大きい演劇btn | 大きな再生ボタン |
prism-play-btn | 再生ボタン |
prism-play-btn.playing | 再生中に使用する一時停止ボタン |
プリズム-ライブ表示 | ライブストリーミング中に再生ボタンの位置を占めるライブストリーミングボタン |
プリズム-fullscreen-btn | 全画面ボタン |
prism-fullscreen-btn.fullscreen | クリック後の全画面ボタン |
プリズム-ボリューム | 音量ボタン |
prism-volume.mute | ミュートモードが有効になった後の音量ボタン |
プリズムカバー | 再生前のサムネイル設定 |
プリズムcontrolbar | プレーヤーのコントロールバー |
プリズム時間表示 | 合計期間 |
プリズム-時間-表示。現在の時間 | 現在の時刻 |
プリズム-progress | 進捗バー |
prism-progress-loaded | 読み込み進捗状況 |
prism-progress-cursor | プログレスバーの位置 |
prism-speed-selector | 再生速度 |
prism-stream-selector | 解像度の切り替え |
prism-snapshot-btn | [スナップショット] ボタン |
prism-ErrorMessage | エラーメッセージ |
プリズム-info-display | エラーに関する追加情報 |
設定方法
詳細については、player: aliplayer-min.cssのCSSファイルを参照してください。
次のサンプルコードは、大きな再生ボタンを設定する方法を示しています。
. プリズムプレーヤー。prism-big-play-btn {
幅：90ピクセル。
高さ: 90px;
背景: url("// gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
} サンプルコードのパラメーターを次の表に示します。
パラメーター | 説明 |
|---|---|
width | 大きな再生ボタンの幅。 単位: ピクセル |
height | 大きな再生ボタンの高さ。 単位: ピクセル |
背景 | 大きな再生ボタンの画像URL。 |
no-repeat | イメージをタイル化しないように指定します。 CSSはno-repeatパラメーターもサポートしています。 |
-2px | 大きな再生ボタンのx座標とy座標。 |
Flashプレーヤーのスキンを設定する
使用するデフォルトファイルの準備
http://g.alicdn.com/de/prismplayer-flash/{SDKバージョン番号}/atlas/defaultSkin.xml
http://g.alicdn.com/de/prismplayer-flash/{SDKバージョン番号}/atlas/defaultSkin.png だ pngファイルには、スキンのボタンとして使用できるマテリアルが含まれています。 だ xmlファイルは、スキン上のボタンの場所を指定します。
デフォルトでは、プレーヤーはhttp://g.alicdn.com/de/prismplayer-flash/{SDKバージョン番号}/atlas/ ディレクトリでdefaultSkin.xmlおよびdefaultSkin.pngファイルを検索します。
コンポーネントの設定
次のコードを使用して、コンポーネントとして使用するイメージを参照します。
<TextureAtlas imagePath="defaultSkin.png">次の表に、設定できるコンポーネントを示します。
コンポーネント | 説明 |
|---|---|
bigPlayDown | クリック後の大きな再生ボタン |
bigPlayOver | ポインタがその上に移動したときの大きな再生ボタン |
bigPlayUp | クリックする前に大きな再生ボタン |
clarityBgDown | クリック後の定義インジケーター |
clarityBgOver | ポインタがその上に移動したときの定義インジケータ |
clarityBgUp | クリック前の定义インジケータ |
followo無効 | 無効になっている次のボタン |
フォローダウン | クリック後の次のボタン |
followOver | ポインタがその上に移動したときの次のボタン |
フォローアップ | クリックする前の次のボタン |
fullScreenDisabled | 無効になっているときの全画面ボタン |
fullScreenDown | クリック後の全画面ボタン |
fullScreenOver | ポインタがその上に移動したときの全画面ボタン |
fullScreenUp | クリックする前の全画面ボタン |
liveicon | ライブストリーミングを示すアイコン |
muteDown | クリック後のミュートボタン |
muteOver | ポインタを移動したときのミュートボタン |
muteUp | クリックする前にミュートボタン |
normalScreenDown | クリック後にフルスクリーンモードを終了するためのボタン |
normalScreenOver | ポインタがその上に移動したときにフルスクリーンモードを終了するためのボタン |
normalScreenUp | クリックする前にフルスクリーンモードを終了するためのボタン |
pauseDisabled | 無効になっているときに一時停止ボタン |
pauseDown | クリック後に一時停止ボタン |
pauseOver | ポインタがその上に移動したときに一時停止ボタン |
pauseUp | クリックする前に一時停止ボタン |
playDisabled | 無効になっているときの再生ボタン |
playDown | クリック後の再生ボタン |
playOver | ポインタがその上に移動したときに再生ボタン |
プレイアップ | クリックする前に再生ボタン |
replayDown | クリック後の再生ボタン |
replayOver | ポインタがその上に移動したときの再生ボタン |
replayUp | クリックする前の再生ボタン |
setDown | クリック後の設定ボタン |
setOver | ポインタを上に移動したときの設定ボタン |
setUp | クリック前の设定ボタン |
volMaxDown | クリック後の大音量 (≥ 50%) ボタン |
volMaxOver | ポインターがその上に移動するときの大容量 (≥ 50%) ボタン |
volMaxUp | クリックする前に大音量 (≥ 50%) ボタン |
volMinDown | クリック後の低音量 (< 50%) ボタン |
volMinOver | ポインタがその上に移動したときの低音量 (< 50%) |
volMinUp | クリックする前の低音量 (< 50%) |
zoom100Down | クリック後に全画面モードでスケーリングボタンを100% する |
zoom100Over | ポインタがその上に移動したときに、全画面モードでスケーリングボタンを100% する |
zoom100Up | クリックする前に、全画面モードでスケーリングボタンを100% する |
zoom75Down | クリック後に全画面モードでスケーリングボタンを75% する |
zoom75Over | ポインタがその上に移動したときに、全画面モードでスケーリングボタンを75% する |
zoom75Up | クリックする前に、全画面モードでスケーリングボタンを75% する |
zoom50Down | クリック後に全画面モードでスケーリングボタンを50% する |
zoom50Over | ポインタがその上に移動したときに、全画面モードでスケーリングボタンを50% する |
zoom50Up | クリックする前に、全画面モードでスケーリングボタンを50% する |
設定方法
デフォルトのスキン設定に基づいてコンポーネントを構成します。 skin.pngおよびskin.xmlファイルをhttp://[domain]/[path]/ディレクトリに保存します。 さらに、skinResパラメーターをプレーヤーのhttp:// domain/path/skinに設定します。
次のサンプルコードは、大きな再生ボタンを設定する方法を示しています。
<サブテクスチャ名="bigPlayDown" x="2" y="94" width="90" height="90"/>
<サブテクスチャ名="bigPlayOver" x="94" y="2" width="90" height="90"/>
<サブテクスチャ名="bigPlayUp" x="2" y="2" width="90" height="90"/> サンプルコードのパラメーターを次の表に示します。
パラメーター | 説明 |
|---|---|
x | イメージ内のコンポーネントのx座標。 |
y | イメージ内のコンポーネントのy座標。 |
width | イメージ内のコンポーネントの幅。 |
height | イメージ内のコンポーネントの高さ。 |