Topik ini menjelaskan cara mengonfigurasi skin pemutar di AliPlayer.
Konfigurasikan skin untuk pemutar HTML5
Rujuk file CSS yang mendefinisikan tata letak default.
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/{SDK version}/skins/default/aliplayer-min.css" />File CSS berisi materi skin: http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png.
Konfigurasikan semua komponen internal. Tabel berikut menjelaskan komponen yang dapat dikonfigurasi.
Komponen | Deskripsi |
prism-player | Konfigurasi pemutar |
prism-big-play-btn | Tombol putar besar |
prism-play-btn | Tombol putar |
prism-play-btn.playing | Tombol jeda yang digunakan selama pemutaran |
prism-live-display | Tombol streaming langsung yang menempati posisi tombol putar selama streaming langsung |
prism-fullscreen-btn | Tombol layar penuh |
prism-fullscreen-btn.fullscreen | Tombol layar penuh setelah diklik |
prism-volume | Tombol volume |
prism-volume.mute | Tombol volume setelah mode bisu diaktifkan |
prism-cover | Konfigurasi thumbnail sebelum pemutaran |
prism-controlbar | Bilah kontrol pemutar |
prism-time-display | Total durasi |
prism-time-display .current-time | Waktu saat ini |
prism-progress | Bilah kemajuan |
prism-progress-loaded | Kemajuan pemuatan |
prism-progress-cursor | Posisi bilah kemajuan |
prism-speed-selector | Konfigurasikan kecepatan pemutaran |
prism-stream-selector | Pengalihan resolusi |
prism-snapshot-btn | Tombol tangkapan layar |
prism-ErrorMessage | Pesan kesalahan |
prism-info-display | Informasi tambahan tentang kesalahan |
Metode Konfigurasi
Untuk informasi lebih lanjut, lihat file CSS pemutar: aliplayer-min.css.
Contoh kode berikut menunjukkan cara mengonfigurasi tombol putar besar:
.prism-player .prism-big-play-btn {
width: 90px;
height: 90px;
background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
}
Parameter | Deskripsi |
width | Lebar tombol putar besar. Satuan: piksel. |
height | Tinggi tombol putar besar. Satuan: piksel. |
background | URL gambar tombol putar besar. |
no-repeat | Menentukan untuk tidak memperbesar gambar. CSS juga mendukung parameter no-repeat. |
-2px | Koordinat x dan y tombol putar besar. |