All Products
Search
Document Center

ApsaraVideo VOD:Configure skinLayout

Last Updated:Jun 13, 2024

ApsaraVideo Player SDK for Web allows you to use skinLayout to specify whether to display the following components and positions where components are displayed: play button, loading animation component, and control bar. This topic describes how to 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

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 effect点播默认配置

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 effect直播默认配置