ApsaraVideo VOD:Configure skinLayout

Description

You can use skinLayout to specify whether to display the following components and positions where components are displayed:

• Play button

• Loading animation component

• Control bar

You can modify the skinLayout property by configuring the aliplayer-min.css file of the player. For more information, see Configure the player skin.

Configuration rules

• If you do not configure the skinLayout property, all components are displayed.

• If you set the skinLayout property to an empty array or false, all components are hidden.

  Note

  If you set the skinLayout property to an empty array or false to disable the player skin, no error message appears on the player even if an error occurs. In this case, listen for the error event to check whether an error occurs and troubleshoot the error. For more information about error codes, see Error codes.

• If you want to configure the children property for live streaming, you can specify only liveDisplay, fullScreenButton, subtitle, setting, volume, and snapshot.

Hide UI components

You can use skinLayoutIgnore to hide specific UI components based on the default configurations. Sample code:

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

The align property specifies the alignment method of the child component relative to the parent component.

• 'cc': indicates absolute centering relative to the parent component.

• 'tl': indicates alignment in the upper-left corner relative to the parent component. The child component is affected by the location of peer components and takes the upper-left corner of a peer component as the offset origin. This method is similar to the float: left setting in a CSS file.

• 'tr': indicates alignment in the upper-right corner relative to the parent component. The child component is affected by the location of peer components and takes the upper-right corner of a peer component as the offset origin. This method is similar to the float: right setting in a CSS file.

• 'tlabs': indicates absolute alignment in the upper-left corner relative to the parent component. The child component is not affected by the location of peer components and takes the upper-left corner of the parent component as the offset origin.

• 'trabs': indicates absolute alignment in the upper-right corner relative to the parent component. The child component is not affected by the location of peer components and takes the upper-right corner of the parent component as the offset origin.

• 'blabs': indicates absolute alignment in the lower-left relative to the parent component. The child component is not affected by the location of peer components and takes the lower-left of the parent component as the offset origin.

• 'brabs': indicates absolute alignment in the lower-right relative to the parent component. The child component is not affected by the location of peer components and takes the lower-right of the parent component as the offset origin.

The x and y properties specify the position of a child component with the location of the parent component as the offset origin.

• The x property specifies the offset in the horizontal direction. The value is a number. For more information about the offset origin, see the description of the align property. This property is invalid if you set align to cc.

• The y property specifies the offset in the vertical direction. The value is a number. For more information about the offset origin, see the description of the align property. This property is invalid if align is set to cc.

Default settings of skinLayout for on-demand video playback

Property description

Default settings of the HTML5 player for on-demand video playback

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

Default settings of the Flash player for on-demand video playback

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

Sample effect

Default settings of skinLayout for live streaming

Property description

Default settings of the HTML5 player for live streaming

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

Default settings of the Flash player for live streaming

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

Sample effect