369      阿裏雲  技術社區[雲棲]

Web播放器皮膚定製__視頻播放_使用手冊_媒體轉碼-阿裏雲

Prismplayer皮膚設置分為Flash模式與HTML5模式。

1. HTML5播放器皮膚設置

（1）默認設置，頁麵引入文件：

<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.4.8/skins/default/index.css" />

css文件中包含皮膚素材：

https://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png

（2）配置信息：內部組件都要有配置；

prism-player                    ：播放器配置
prism-big-play-btn              ：大播放按鈕：
prism-play-btn                  ：播放按鈕
prism-play-btn.playing          ：播放過程中暫停；
prism-live-display              ：直播圖標（直播時會占用播放按鈕位置）
prism-fullscreen-btn            ：全屏按鈕
prism-fullscreen-btn.fullscreen ：全屏後按鈕
prism-volume                    ：聲音按鈕
prism-volume.mute               ：靜音後按鈕
prism-cover                     ：播放器開始前封麵配置
prism-controlbar                ：播放器控製欄
prism-time-display              ：時間顯示總時間
prism-time-display .current-time：當前時間
prism-progress                  ：進度條
prism-progress-loaded           ：加載進度
prism-progress-cursor           ：進度條位置

（3）配置方式

可以參照https://g.alicdn.com/de/prismplayer/1.4.8/skins/default/index.css修改配置，並在頁麵中引入替換。

例如：大播放按鈕

.prism-player .prism-big-play-btn {
  width: 90px;
  height: 90px;
  background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
}

其中：

width：寬度（px：像素）
height：高度（px：像素）
background：圖像url
no-repeat：不平鋪（同css）
-2px：x軸位置
-2px：y軸位置

2. Flash播放器皮膚設置

（1）默認使用文件：

https://g.alicdn.com/de/prismplayer-flash/1.2.3/atlas/defaultSkin.xml
https://g.alicdn.com/de/prismplayer-flash/1.2.3/atlas/defaultSkin.png

其中.png為皮膚按鈕素材，.xml指定皮膚按鈕位置，1.2.3為版本號。播放器默認在https://g.alicdn.com/de/prismplayer-flash/1.2.3/atlas/目錄下查找defaultSkin.xml與defaultSkin.png。

（2）配置信息：

設定元件素材圖像：

<TextureAtlas imagePath="defaultSkin.png">

設定元件：

bigPlayDown       ：大播放按鈕 點擊後圖標
bigPlayOver       ：大播放按鈕 鼠標劃過時圖標
bigPlayUp         :大播放按鈕 未點擊時圖標
clarityBgDown     ：清晰度標示 點擊後圖標
clarityBgOver     ：清晰度標示 鼠標劃過時圖標
clarityBgUp       :清晰度標示 未點擊時圖標
followDisabled    :下一條按鈕 禁止時圖標
followDown        :下一條按鈕 點擊後圖標
followOver        :下一條按鈕 鼠標劃過時圖標
followUp          :下一條按鈕 未點擊時圖標
fullScreenDisabled:全屏按鈕 禁止時圖標
fullScreenDown    :全屏按鈕 點擊後圖標
fullScreenOver    :全屏按鈕 鼠標劃過時圖標
fullScreenUp      :全屏按鈕 未點擊時圖標
liveicon          :直播標誌圖片
muteDown          :靜音按鈕 點擊後圖標
muteOver          :靜音按鈕 鼠標劃過時圖標
muteUp            :靜音按鈕 未點擊時圖標
normalScreenDown  :退出全屏按鈕 點擊後圖標
normalScreenOver  :退出全屏按鈕 鼠標劃過時圖標
normalScreenUp    :退出全屏按鈕 未點擊時圖標
pauseDisabled     :暫停按鈕 禁止時圖標
pauseDown         :暫停按鈕 點擊後圖標
pauseOver         :暫停按鈕 鼠標劃過時圖標
pauseUp           :暫停按鈕 未點擊時圖標
playDisabled      :播放按鈕 禁止時圖標
playDown          :播放按鈕 點擊後圖標
playOver          :播放按鈕 鼠標劃過時圖標
playUp            :播放按鈕 未點擊時圖標
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%比例按鈕 未點擊時圖標

（3）配置方式

參照默認皮膚設置，在https://[domain]/[path]/目錄下存放skin.png與skin.xml文件，並在player的輸入參數中添加skinRes："https://domain/path/skin"。例如：大播放按鈕

<SubTexture name="bigPlayDown" x="2" y="94" width="90" height="90"/>
<SubTexture name="bigPlayOver" x="94" y="2" width="90" height="90"/>
<SubTexture name="bigPlayUp" x="2" y="2" width="90" height="90"/>

其中：

x：元件在圖像中x軸坐標
y：元件在圖像中y軸坐標
width：元件在圖像中寬度
height：元件在圖像中寬度

最後更新：2016-11-24 11:23:49

  上一篇： Web播放器__視頻播放_使用手冊_媒體轉碼-阿裏雲

  下一篇： 移動端播放器SDK__視頻播放_使用手冊_媒體轉碼-阿裏雲