ApsaraVideo VOD:Configure skinLayout

skinLayout Özelliği

skinLayout değerini doğrudan aliplayer-min.css oynatıcı CSS dosyasını düzenleyerek de değiştirebilirsiniz. Daha fazla bilgi için bkz. Oynatıcı görünümünü yapılandırma.

Yapılandırma Kuralları

• skinLayout yapılandırılmazsa tüm bileşenler varsayılan olarak görüntülenir.

• skinLayout boş bir dizi [] veya false olarak ayarlandığında tüm öğeler gizlenir.

  Not

  skinLayout değerini [] veya false olarak ayarlamak hata arayüzü dahil tüm kullanıcı arayüzünü gizler. Hataları işlemek için error olayını dinlemeniz gerekir. Daha fazla bilgi için bkz. Hata Kodları.

• Belirli bileşenleri gizlemek için bunun yerine skinLayoutIgnore kullanın. Örnek:

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

Özellikler

align Özelliği

Bir bileşenin üst öğesine göre hizalamasını ayarlar:

• 'cc': Üst öğe içinde mutlak merkez.

• 'tl': Sol üst göreli konumlandırma. Kardeş öğelerden etkilenir; bileşenin sol üst köşesinden ofset uygulanır. CSS'deki float: left özelliğine benzer.

• 'tr': Sağ üst göreli konumlandırma. Kardeş öğelerden etkilenir; bileşenin sağ üst köşesinden ofset uygulanır. CSS'deki float: right özelliğine benzer.

• 'tlabs': Mutlak sol üst konumlandırma. Kardeş öğelerden etkilenmez; üst öğenin sol üst köşesinden ofset uygulanır.

• 'trabs': Mutlak sağ üst konumlandırma. Kardeş öğelerden etkilenmez; üst öğenin sağ üst köşesinden ofset uygulanır.

• 'blabs': Mutlak sol alt konumlandırma. Kardeş öğelerden etkilenmez; üst öğenin sol alt köşesinden ofset uygulanır.

• 'brabs': Mutlak sağ alt konumlandırma. Kardeş öğelerden etkilenmez; üst öğenin sağ alt köşesinden ofset uygulanır.

x ve y Özellikleri

Bir bileşenin üst öğesine göre ofsetini ayarlar.

• x: {Number} Yatay ofset. Başlangıç noktası align değerine bağlıdır. align değeri cc olduğunda yok sayılır.

• y: {Number} Dikey ofset. Başlangıç noktası align değerine bağlıdır. align değeri cc olduğunda yok sayılır.

İsteğe Bağlı Yapılandırma

Özellik Açıklaması

Varsayılan Yapılandırma

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

Varsayılan kontrol çubuğu koyu renkli bir arka plana sahiptir ve üst kısımda kırmızı/gri bir ilerleme çubuğu bulunur. Oynat/duraklat düğmesi ve süre göstergesi (00:43 / 10:35) solda; ses düzeyi ve tam ekran düğmeleri ise sağda yer alır.

Canlı Yayın Yapılandırması

Özellik Açıklaması

ApsaraVideo Live HTML5 Oynatıcısının Varsayılan Ayarları

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