通過閱讀本文，瞭解如何設定Aliplayer播放器皮膚。
H5播放器皮膚設定
預設設定：頁面引入檔案。
<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軸位置 |