Aliplayer皮膚設定分為HTML5模式與Flash模式。通過閱讀本文，瞭解如何設定播放器皮膚。
HTML5播放器皮膚設定
預設設定：頁面引入檔案。
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/{SDK版本號碼}/skins/default/aliplayer-min.css" />css檔案中包含皮膚素材：http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png
配置資訊：內部組件都要有配置。
名稱 | 說明 |
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 | 進度條位置 |
prism-speed-selector | 倍速播放 |
prism-stream-selector | 清晰度切換 |
prism-snapshot-btn | 截圖按鈕 |
prism-ErrorMessage | 錯誤顯示 |
prism-info-display | 資訊顯示 |
配置方式
具體可以參照播放器的CSS設定檔：aliplayer-min.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軸位置，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 | 清晰度標示，未點擊時表徵圖 |
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%比例按鈕，未點擊時表徵圖 |
配置方式
參照預設皮膚設定，在http://[domain]/[path]/目錄下存放skin.png與skin.xml檔案，並在player的輸入參數中添加skinRes："http://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 | 元件在映像中高度 |