Apsara Video SDK:Configure skinLayout

Description

ApsaraVideo Player allows you to configure the skinLayout property to specify whether to display the following three types of components and specify the display area of each component.

• Buttons for playback

• Loading animation components

• User interface (UI) components of the control bar

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

Rules for configuring the skinLayout property

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

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

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

Specify parameters to customize components

The align parameter specifies the alignment method of the child component relative to the parent component. Valid values:

• '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 position 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 property in a CSS file.

• 'tr': indicates alignment in the upper-right corner relative to the parent component. The child component is affected by the position 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 property 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 position 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 position 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 position 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 position of peer components and takes the lower-right of the parent component as the offset origin.

The x and y parameters specify the position of a child component relative to that of the parent component as the offset origin.

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

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

Default configurations of the skinLayout property in ApsaraVideo VOD

Property description

Default skinLayout configurations for the HTML5 player of ApsaraVideo VOD

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 skinLayout configurations for the Flash player of ApsaraVideo VOD

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 configurations of the skinLayout property in ApsaraVideo Live

Property description

Default skinLayout configurations 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}
 ]
 }
 ]

Default skinLayout configurations for the Flash 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:25},
 {name:"fullScreenButton", align:"tr", x:10, y:25},
 {name:"volume", align:"tr", x:10, y:25}
 ]
 }
 ]

Sample effect