通過閱讀本文，您可以了解阿里云Web播放器SDK的skinLayout的屬性、設置規則和可定義屬性。
skinLayout屬性
Aliplayer可以通過skinLayout屬性定制以下三個組件是否顯示和顯示的位置。
播放按鈕
Loading動畫
Controlbar的UI
您可以通過配置播放器的CSS文件：aliplayer-min.css，修改skinLayout屬性。配置方式，請參見設置播放器皮膚。
skinLayout設置規則
skinLayout屬性未設置，則默認顯示全部。
skinLayout設置為空集合（[]）或false時, 則全部隱藏。
如果是直播ControlBar的children屬性，則只能設置為liveDisplay、fullScreenButton、subtitle、setting、volume和snapshot這幾種UI組件。
可定義屬性
align屬性，組件相對于父級組件的對齊方式，可選項如下所示：
'cc'，相對于父組件絕對居中。'tl'，相對于父組件左上對齊，受同級組件的占位影響，以組件的相對位置左上角作為偏移原點，可類比于css中的float: left。'tr'，相對于父組件右上對齊，受同級組件的占位影響，以組件的相對位置右上角作為偏移原點，可類比于css中的float: right。'tlabs'，相對于父組件左上絕對對齊，不受同級組件的占位影響，以父組件左上角作為偏移原點。'trabs'，相對于父組件右上絕對對齊，不受同級組件的占位影響，以父組件右上角作為偏移原點。'blabs'，相對于父組件左下絕對對齊，不受同級組件的占位影響，以父組件左下角作為偏移原點。'brabs'，相對于父組件右下絕對對齊，不受同級組件的占位影響，以父組件右下角作為偏移原點。
x，y屬性，組件相對于父級組件的位置，說明如下所示：
x，{Number}，水平方向偏移量，偏移原點參考
align的說明，cc時無效。y，{Number}，垂直方向偏移量，偏移原點參考
align的說明，cc時無效。
點播默認配置
點播組件參數說明
組件參數 | 參數說明 |
bigPlayButton | 大播放按鈕。 |
H5Loading | 視頻緩沖時候出現的加載動畫。 |
errorDisplay | 錯誤提示，當視頻播放出錯時的提示信息。 |
infoDisplay | 信息提示，當切換字幕、倍速等設置時，播放器展示的提示信息。 |
tooltip | 按鈕提示，播放器控制欄上的控件提示信息。例如當光標移到音量按鈕或播放按鈕上時，會顯示音量或播放的提示文字。 |
thumbnail | 進度條縮略圖。 |
controlBar | 控制欄。 |
progress | 播放進度條。 |
playButton | 控制欄處的播放按鈕。 |
timeDisplay | 顯示播放時間。 |
fullScreenButton | 全屏按鈕。 |
subtitle | 字幕。 |
setting | 設置。 |
volume | 音量。 |
點播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}
]
}
]點播Flash默認配置
skinLayout:[
{name:"bigPlayButton", align:"blabs", x:30, y:80},
{
name:"controlBar", align:"blabs", x:0, y:0,
children: [
{name:"progress", align:"tlabs", x: 0, y:0},
{name:"playButton", align:"tl", x:15, y:26},
{name:"nextButton", align:"tl", x:10, y:26},
{name:"timeDisplay", align:"tl", x:10, y:24},
{name:"fullScreenButton", align:"tr", x:10, y:25},
{name:"streamButton", align:"tr", x:10, y:23},
{name:"volume", align:"tr", x:10, y:25}
]
},
{
name:"fullControlBar", align:"tlabs", x:0, y:0,
children: [
{name:"fullTitle", align:"tl", x:25, y:6},
{name:"fullNormalScreenButton", align:"tr", x:24, y:13},
{name:"fullTimeDisplay", align:"tr", x:10, y:12},
{name:"fullZoom", align:"cc"}
]
}
]配置效果圖
直播默認配置
直播組件參數說明
組件參數 | 參數說明 |
bigPlayButton | 大播放按鈕。 |
errorDisplay | 錯誤提示，當視頻播放出錯時的提示信息。 |
infoDisplay | 信息提示，當切換字幕、倍速等設置時，播放器展示的文字提示信息。 |
liveDisplay | 直播播放時畫面上顯示LIVE字樣。 |
controlBar | 控制欄。 |
fullScreenButton | 全屏按鈕。 |
subtitle | 字幕。 |
setting | 設置。 |
volume | 音量。 |
直播H5模式默認配置
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}
]
}
]直播Flash模式默認配置
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:25},
{name:"fullScreenButton", align:"tr", x:10, y:25},
{name:"volume", align:"tr", x:10, y:25}
]
}
]