ApsaraVideo VOD：Kustomisasi UI kesalahan untuk pemain HTML5

UI kesalahan default

Gambar berikut menunjukkan UI kesalahan default dari ApsaraVideo Player. Aktifkan komponen UI displayError

Jika Anda menggunakan atribut skinLayout untuk menyesuaikan tampilan pemain di ApsaraVideo Player V2.1.0 atau yang lebih baru, Anda harus mengaktifkan komponen UI displayError dalam atribut skinLayout, seperti yang ditunjukkan dalam kode berikut. Untuk informasi lebih lanjut tentang atribut skinLayout, lihat Konfigurasi Atribut skinLayout.

skinLayout:[
    ......
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay", align: "cc"},
    ......
  ]

UI kesalahan kustom

Anda dapat menyesuaikan UI kesalahan dengan menggunakan salah satu dari dua metode berikut:

• Modifikasi File CSS dari UI Kesalahan Default

  Anda dapat menyesuaikan UI kesalahan berdasarkan UI kesalahan default. Anda dapat memodifikasi file CSS untuk mengubah warna latar belakang, font, dan posisi serta menentukan apakah akan menampilkan pesan kesalahan.

  Tabel berikut menjelaskan kelas-kelas yang mungkin perlu Anda modifikasi dalam file CSS.

  Kelas	Deskripsi
  .prism-ErrorMessage	Kelas dari kontainer terluar.
  .prism-error-content	Kelas yang mendefinisikan area tempat pesan kesalahan ditampilkan.
  .prism-error-operation	Kelas yang mendefinisikan area tempat operasi dapat dilakukan.
  .prism-detect-info	Kelas yang mendefinisikan area tempat informasi tambahan ditampilkan, seperti UUID dan ID permintaan. Informasi tambahan digunakan untuk diagnosis.

• Definisikan UI Kesalahan Baru

Kode berikut menunjukkan cara berlangganan acara kesalahan:

player.on('error',function(e){
      // Sembunyikan UI kesalahan.
      $('.prism-ErrorMessage').hide();
      // Analisis data tentang kesalahan.
      var errorData = e.paramData;
      console.dir(errorData);
    });

Prosedur untuk mendefinisikan UI kesalahan baru:

1. Sembunyikan UI kesalahan ApsaraVideo Player, seperti yang ditunjukkan dalam kode sebelumnya.

2. Analisis data tentang kesalahan dalam parameter paramData, seperti yang ditunjukkan dalam kode sebelumnya. Gambar berikut menunjukkan bidang-bidang tentang kesalahan dalam data.

3. Setelah menyelesaikan dua langkah tersebut, Anda dapat memperoleh kode kesalahan spesifik. Kemudian, tetapkan kode kesalahan ke parameter pada UI kesalahan.