ApsaraVideo VOD:Configure skinLayout

Propriété skinLayout

Vous pouvez également modifier skinLayout en éditant directement le fichier CSS du lecteur aliplayer-min.css. Configurer l'apparence du lecteur.

Règles de configuration

• Si skinLayout n'est pas configuré, tous les composants s'affichent par défaut.

• Lorsque skinLayout est défini sur un tableau vide [] ou sur false, tous les éléments sont masqués.

  Remarque

  Définir skinLayout sur [] ou false masque toute l'interface utilisateur, y compris l'écran d'erreur. Écoutez l'événement error pour gérer les erreurs. Codes d'erreur.

• Pour masquer des composants spécifiques, utilisez plutôt skinLayoutIgnore. Par exemple :

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

Propriétés

Propriété align

Définit l'alignement d'un composant par rapport à son parent :

• 'cc' : centrage absolu au sein du parent.

• 'tl' : positionnement relatif en haut à gauche. Influencé par les éléments frères, décalé depuis le coin supérieur gauche du composant. Similaire à float: left en CSS.

• 'tr' : positionnement relatif en haut à droite. Influencé par les éléments frères, décalé depuis le coin supérieur droit du composant. Similaire à float: right en CSS.

• 'tlabs' : positionnement absolu en haut à gauche. Indépendant des éléments frères, décalé depuis le coin supérieur gauche du parent.

• 'trabs' : positionnement absolu en haut à droite. Indépendant des éléments frères, décalé depuis le coin supérieur droit du parent.

• 'blabs' : positionnement absolu en bas à gauche. Indépendant des éléments frères, décalé depuis le coin inférieur gauche du parent.

• 'brabs' : positionnement absolu en bas à droite. Indépendant des éléments frères, décalé depuis le coin inférieur droit du parent.

Propriétés x et y

Définit le décalage d'un composant par rapport à son parent.

• x : {Number} Décalage horizontal. L'origine dépend de align. Ignoré si align vaut cc.

• y : {Number} Décalage vertical. L'origine dépend de align. Ignoré si align vaut cc.

Configuration à la demande

Description des propriétés

Configuration par défaut

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

La barre de contrôle par défaut possède un arrière-plan sombre avec une barre de progression rouge/grise en haut. Les boutons de lecture/pause et l'affichage du temps (00:43 / 10:35) se trouvent à gauche ; les boutons de volume et de plein écran à droite.

Configuration du streaming en direct

Description des propriétés

Paramètres par défaut pour le lecteur HTML5 d'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 },
    ],
  },
]