All Products
Search
Document Center

ApsaraVideo VOD:Configure skinLayout

Last Updated:Mar 17, 2023

This topic describes the properties of the skinLayout parameter and how to configure skinLayout for different components.

Description

ApsaraVideo Player allows you to use skinLayout to specify whether to display the following components and the display position of the components:

  • Play button

  • Loading animation component

  • Control bar

You can configure skinLayout in 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 parameter, all components are displayed.

  • If you set the skinLayout parameter to an empty array ([]) or false, all components are hidden.

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

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 uses the upper-left corner of a peer component as the offset origin. This method is similar to the float: left setting in the 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 corner relative to the parent component. The child component is not affected by the location of peer components and takes the lower-left corner of the parent component as the offset origin.

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

The x and y properties specify the location 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

Property

Description

bigPlayButton

The play button.

H5Loading

The animation that appears when videos are being loaded.

errorDisplay

The error message that appears when video playback fails.

infoDisplay

The message that appears when player settings are changed. For example, the message appears when you change the subtitles or the playback speed.

tooltip

The description of an element on the control bar in the player. For example, when you move the pointer over the volume button or play button, Volume or Play appears.

thumbnail

The video thumbnail that appears when the progress bar is hovered.

controlBar

The control bar.

progress

The progress bar.

playButton

The play button on the control bar.

timeDisplay

The playback time.

fullScreenButton

The full screen button.

subtitle

The subtitles.

setting

The settings button.

volume

The volume button.

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 effectDefault settings of skinLayout for on-demand video playback

Default settings of skinLayout for live streaming

Property description

Property

Description

bigPlayButton

The play button.

errorDisplay

The error message that appears when video playback fails.

infoDisplay

The message that appears when player settings are changed. For example, the message appears when you change the subtitles or the playback speed.

liveDisplay

The LIVE text displayed on the view during live streaming.

controlBar

The control bar.

fullScreenButton

The full screen button.

subtitle

The subtitles.

setting

The settings button.

volume

The volume button.

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 effectDefault settings of skinLayout for live streaming