Configure skinLayout

skinLayout property

You can also modify skinLayout by editing the player CSS file aliplayer-min.css directly. Configure the player skin.

Configuration rules

• If skinLayout is not configured, all components are displayed by default.

• When skinLayout is set to an empty array [] or false, all items are hidden.

  Note

  Setting skinLayout to [] or false hides all UI including the error interface. You must listen for the error event to handle errors. Error Codes.

• To hide specific components, use skinLayoutIgnore instead. For example:

  skinLayoutIgnore: [
    'bigPlayButton', // Hide the big playback button.
    'controlBar.fullScreenButton' // Hide the full screen button on the control bar. You can use the dot operator to select the subcomponent.
  ]

Properties

align property

Sets the alignment of a component relative to its parent:

• 'cc': Absolute center within the parent.

• 'tl': Top-left relative positioning. Affected by siblings, offset from the component's top-left corner. Similar to float: left in CSS.

• 'tr': Top-right relative positioning. Affected by siblings, offset from the component's top-right corner. Similar to float: right in CSS.

• 'tlabs': Absolute top-left positioning. Not affected by siblings, offset from the parent's top-left corner.

• 'trabs': Absolute top-right positioning. Not affected by siblings, offset from the parent's top-right corner.

• 'blabs': Absolute bottom-left positioning. Not affected by siblings, offset from the parent's bottom-left corner.

• 'brabs': Absolute bottom-right positioning. Not affected by siblings, offset from the parent's bottom-right corner.

x and y properties

Sets the offset of a component relative to its parent.

• x: {Number} Horizontal offset. The origin depends on align. Ignored when align is cc.

• y: {Number} Vertical offset. The origin depends on align. Ignored when align is cc.

On-demand configuration

Property description

Default configuration

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 },
    ],
  },
]

The default control bar has a dark background with a red/gray progress bar at the top. Play/pause and time display (00:43 / 10:35) are on the left; volume and full screen buttons on the right.

Live streaming configuration

Property description

Default settings for the HTML5 player of ApsaraVideo Live

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 },
    ],
  },
]