Konfigurasikan properti skinLayout - ApsaraVideo VOD

Anda dapat mengonfigurasi properti skinLayout untuk menyesuaikan visibilitas dan posisi tombol putar, animasi pemuatan, serta bilah kontrol di pemutar web.

Properti skinLayout

Anda juga dapat memodifikasi properti skinLayout dengan menimpa file CSS pemain, aliplayer-min.css. Untuk informasi lebih lanjut, lihat Atur skin pemain.

Aturan konfigurasi skinLayout

Jika Anda tidak mengonfigurasi properti skinLayout, semua komponen akan ditampilkan.
Jika properti skinLayout disetel ke koleksi kosong [] atau false, semua komponen akan disembunyikan.
Catatan
Jika Anda mengatur properti skinLayout ke koleksi kosong [] atau false, skin bawaan pemutar akan disembunyikan, termasuk antarmuka kesalahan. Anda tidak akan menerima notifikasi mengenai exception pemutaran atau gangguan lainnya. Dalam kasus ini, dengarkan event error untuk menangani gangguan tersebut. Untuk informasi selengkapnya tentang kode error, lihat Error codes.

Untuk menyembunyikan komponen UI tertentu dari konfigurasi default, gunakan properti skinLayoutIgnore. Kode berikut memberikan contoh:

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

Properti

Properti align

Menentukan penyelarasan komponen relatif terhadap komponen induknya. Opsi yang tersedia adalah sebagai berikut:

'cc': Penyelarasan tengah absolut relatif terhadap komponen induk.
'tl': Penyelarasan kiri atas relatif terhadap komponen induk. Posisi dipengaruhi oleh komponen saudara. Sudut kiri atas posisi relatif komponen digunakan sebagai asal offset. Ini mirip dengan float: left dalam CSS.
'tr': Penyelarasan kanan atas relatif terhadap komponen induk. Posisi dipengaruhi oleh komponen saudara. Sudut kanan atas posisi relatif komponen digunakan sebagai asal offset. Ini mirip dengan float: right dalam CSS.
'tlabs': Penyelarasan kiri atas absolut relatif terhadap komponen induk. Posisi tidak dipengaruhi oleh komponen saudara. Sudut kiri atas komponen induk digunakan sebagai asal offset.
'trabs': Penyelarasan kanan atas absolut relatif terhadap komponen induk. Posisi tidak dipengaruhi oleh komponen saudara. Sudut kanan atas komponen induk digunakan sebagai asal offset.
'blabs': Penyelarasan kiri bawah absolut relatif terhadap komponen induk. Posisi tidak dipengaruhi oleh komponen saudara. Sudut kiri bawah komponen induk digunakan sebagai asal offset.
'brabs': Penyelarasan kanan bawah absolut relatif terhadap komponen induk. Posisi tidak dipengaruhi oleh komponen saudara. Sudut kanan bawah komponen induk digunakan sebagai asal offset.

Properti x dan y

Menentukan posisi komponen relatif terhadap komponen induknya:

x, {Number}. Offset horizontal. Untuk informasi lebih lanjut tentang asal offset, lihat deskripsi properti align. Properti ini tidak valid jika align disetel ke cc.
y, {Number}. Offset vertikal. Untuk informasi lebih lanjut tentang asal offset, lihat deskripsi properti align. Properti ini tidak valid jika properti align disetel ke cc.

Konfigurasi VOD

Parameter komponen video-on-demand

Parameter komponen		Deskripsi
bigPlayButton		Tombol putar.
H5Loading		Animasi yang muncul saat video sedang dimuat.
errorDisplay		Pesan kesalahan yang muncul saat pemutaran video gagal.
infoDisplay		Pesan yang muncul saat pengaturan pemain diubah. Misalnya, pesan muncul saat Anda mengubah subtitle atau kecepatan pemutaran.
tooltip		Tooltip untuk kontrol pada control bar player. Misalnya, ketika Anda mengarahkan pointer ke volume atau tombol play, teks Volume atau Play akan muncul.
thumbnail		Gambar mini pada progress bar.
controlBar		Bilah kontrol.
Komponen anak controlBar	progress	Bilah kemajuan.
	playButton	Tombol putar pada bilah kontrol.
	timeDisplay	Menampilkan waktu pemutaran saat ini.
	fullScreenButton	Tombol layar penuh.
	subtitle	Caption
	setting	Settings.
	volume	Volume.

Konfigurasi H5 VOD 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 },
    ],
  },
]

Gaya default:

Konfigurasi streaming langsung

Deskripsi parameter komponen streaming langsung

Parameter Komponen		Deskripsi
bigPlayButton		Tombol putar.
errorDisplay		Pesan kesalahan yang muncul saat pemutaran video gagal.
infoDisplay		Pesan yang muncul saat pengaturan pemain diubah. Misalnya, pesan muncul saat Anda mengubah subtitle atau kecepatan pemutaran.
controlBar		Bilah kontrol.
Komponen anak controlBar	liveDisplay	Teks LIVE yang ditampilkan di layar selama pemutaran langsung.
	fullScreenButton	Tombol layar penuh.
	subtitle	Caption
	setting	Settings.
	volume	Volume

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

Gaya default: