ApsaraVideo VOD:Konfigurasi skinLayout

Properti skinLayout

Anda juga dapat memodifikasi skinLayout dengan mengedit langsung file CSS pemutar aliplayer-min.css. Konfigurasi skin pemutar.

Aturan konfigurasi

• Jika skinLayout tidak dikonfigurasi, semua komponen akan ditampilkan secara default.

• Saat skinLayout diatur ke array kosong [] atau false, semua item disembunyikan.

  Catatan

  Mengatur skinLayout ke [] atau false akan menyembunyikan seluruh UI, termasuk antarmuka error. Anda harus mendengarkan event error untuk menangani error tersebut. Kode Error.

• Untuk menyembunyikan komponen tertentu, gunakan skinLayoutIgnore sebagai gantinya. Contohnya:

  skinLayoutIgnore: [
    'bigPlayButton', // Sembunyikan tombol pemutaran besar.
    'controlBar.fullScreenButton' // Sembunyikan tombol layar penuh pada control bar. Anda dapat menggunakan operator titik untuk memilih subkomponen.
  ]

Properti

Properti align

Mengatur penyelarasan komponen relatif terhadap induknya:

• 'cc': Posisi absolut di tengah induk.

• 'tl': Posisi relatif di kiri atas. Dipengaruhi oleh elemen saudara, offset dari pojok kiri atas komponen. Mirip dengan float: left dalam CSS.

• 'tr': Posisi relatif di kanan atas. Dipengaruhi oleh elemen saudara, offset dari pojok kanan atas komponen. Mirip dengan float: right dalam CSS.

• 'tlabs': Posisi absolut di kiri atas. Tidak dipengaruhi oleh elemen saudara, offset dari pojok kiri atas induk.

• 'trabs': Posisi absolut di kanan atas. Tidak dipengaruhi oleh elemen saudara, offset dari pojok kanan atas induk.

• 'blabs': Posisi absolut di kiri bawah. Tidak dipengaruhi oleh elemen saudara, offset dari pojok kiri bawah induk.

• 'brabs': Posisi absolut di kanan bawah. Tidak dipengaruhi oleh elemen saudara, offset dari pojok kanan bawah induk.

Properti x dan y

Mengatur offset komponen relatif terhadap induknya.

• x: {Number} Offset horizontal. Titik asal bergantung pada align. Diabaikan saat align bernilai cc.

• y: {Number} Offset vertikal. Titik asal bergantung pada align. Diabaikan saat align bernilai cc.

Konfigurasi on-demand

Deskripsi properti

Konfigurasi default

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

Control bar default memiliki latar belakang gelap dengan progress bar merah/abu-abu di bagian atas. Tombol play/pause dan tampilan waktu (00:43 / 10:35) berada di sebelah kiri; tombol volume dan layar penuh berada di sebelah kanan.

Konfigurasi streaming langsung

Deskripsi properti

Pengaturan default untuk pemutar HTML5 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 },
    ],
  },
]