skinLayout屬性

Aliplayer可以通過skinLayout屬性定制以下三個組件是否顯示與顯示的位置。

• 播放按鈕

• Loading動畫

• Controlbar的UI

您可以通過配置播放器的CSS文件：aliplayer-min.css，修改skinLayout屬性。配置方式，請參見設置播放器皮膚。

skinLayout設置規則

• skinLayout屬性未設置，則默認顯示全部。

• skinLayout設置為空集合（[]）或false時， 則全部隱藏。

  說明

  skinLayout設置為空集合（[]）或false隱藏播放器自帶皮膚后，播放器報錯界面也將不會顯示，您將無法感知到播放異常等報錯，此時，請務必監聽error事件對報錯進行適當的處理，錯誤碼請參見錯誤碼。

• 如果是直播Controlbar的children屬性，則只能設置為liveDisplay、fullScreenButton、subtitle、setting、volume和snapshot這幾種UI組件。

使用skinLayoutIgnore隱藏UI組件

如果您希望在默認配置基礎上隱藏部分UI組件，可以通過skinLayoutIgnore屬性更簡單地實現，配置示例如下：

skinLayoutIgnore: [
  'bigPlayButton', // 隱藏大播放按鈕
  'controlBar.fullScreenButton' // 隱藏控制條上的全屏按鈕（通過點運算符進行子組件選擇）
]

可定義屬性

align屬性，組件相對于父級組件的對齊方式，可選項如下所示：

• 'cc'，相對于父組件絕對居中。

• 'tl'，相對于父組件左上對齊，受同級組件的占位影響，以組件的相對位置左上角作為偏移原點，可類比于css中的float: left。

• 'tr'，相對于父組件右上對齊，受同級組件的占位影響，以組件的相對位置右上角作為偏移原點，可類比于CSS中的float: right。

• 'tlabs'，相對于父組件左上絕對對齊，不受同級組件的占位影響，以父組件左上角作為偏移原點。

• 'trabs'，相對于父組件右上絕對對齊，不受同級組件的占位影響，以父組件右上角作為偏移原點。

• 'blabs'，相對于父組件左下絕對對齊，不受同級組件的占位影響，以父組件左下角作為偏移原點。

• 'brabs'，相對于父組件右下絕對對齊，不受同級組件的占位影響，以父組件右下角作為偏移原點。

x，y屬性，組件相對于父級組件的位置，說明如下所示：

• x，{Number}，水平方向偏移量，偏移原點參考align的說明，cc時無效。

• y，{Number}，垂直方向偏移量，偏移原點參考align的說明，cc時無效。

點播默認配置

點播組件參數說明

點播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"}
      ]
    }
]

配置效果圖

直播默認配置

直播組件參數說明

直播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}
        ]
    }
  ]

配置效果圖