ApsaraVideo VOD:Configure skinLayout

Propriedade skinLayout

Você também pode modificar o skinLayout editando diretamente o arquivo CSS do player aliplayer-min.css. Configurar a skin do player.

Regras de configuração

• Se o skinLayout não estiver configurado, todos os componentes serão exibidos por padrão.

• Quando o skinLayout é definido como um array vazio [] ou false, todos os itens ficam ocultos.

  Nota

  Definir o skinLayout como [] ou false oculta toda a interface, incluindo a tela de erro. Escute o evento error para tratar as falhas. Códigos de erro.

• Para ocultar componentes específicos, use skinLayoutIgnore. Exemplo:

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

Propriedades

Propriedade align

Define o alinhamento de um componente em relação ao elemento pai:

• 'cc': Centro absoluto no elemento pai.

• 'tl': Posicionamento relativo ao canto superior esquerdo. Elementos irmãos influenciam a posição, com deslocamento a partir do canto superior esquerdo do componente. Semelhante a float: left no CSS.

• 'tr': Posicionamento relativo ao canto superior direito. Elementos irmãos influenciam a posição, com deslocamento a partir do canto superior direito do componente. Semelhante a float: right no CSS.

• 'tlabs': Posicionamento absoluto no canto superior esquerdo. Elementos irmãos não afetam a posição; o deslocamento ocorre a partir do canto superior esquerdo do elemento pai.

• 'trabs': Posicionamento absoluto no canto superior direito. Elementos irmãos não afetam a posição; o deslocamento ocorre a partir do canto superior direito do elemento pai.

• 'blabs': Posicionamento absoluto no canto inferior esquerdo. Elementos irmãos não afetam a posição; o deslocamento ocorre a partir do canto inferior esquerdo do elemento pai.

• 'brabs': Posicionamento absoluto no canto inferior direito. Elementos irmãos não afetam a posição; o deslocamento ocorre a partir do canto inferior direito do elemento pai.

Propriedades x e y

Definem o deslocamento de um componente em relação ao elemento pai.

• x: {Number} Deslocamento horizontal. A origem depende de align. Ignorado quando align for cc.

• y: {Number} Deslocamento vertical. A origem depende de align. Ignorado quando align for cc.

Configuração para vídeo sob demanda

Descrição das propriedades

Configuração padrão

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

A barra de controle padrão tem fundo escuro e uma barra de progresso vermelha/cinza na parte superior. Os botões de reprodução/pausa e o indicador de tempo (00:43 / 10:35) ficam à esquerda; os botões de volume e tela cheia ficam à direita.

Configuração para transmissão ao vivo

Descrição das propriedades

Configurações padrão para o player HTML5 do 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 },
    ],
  },
]