ApsaraVideo VOD:HTML5 oynatıcı için hata kullanıcı arayüzünü özelleştirme

Varsayılan hata kullanıcı arayüzü

ApsaraVideo Player'ın varsayılan hata kullanıcı arayüzü:displayError kullanıcı arayüzü bileşenini etkinleştirin

Özel bir tema kullanan ApsaraVideo Player V2.1.0 veya sonraki sürümlerde, displayError kullanıcı arayüzü bileşenini skinLayout yapılandırmasına ekleyin.

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

Özel hata kullanıcı arayüzü

Aşağıdaki yöntemlerden birini kullanın:

• Varsayılan hata kullanıcı arayüzünün CSS dosyasını değiştirin

  Arka plan rengini, yazı tipini, konumu veya hata mesajının görünürlüğünü değiştirmek için CSS dosyasını değiştirin.

  Temel CSS sınıfları:

  Sınıf	Açıklama
  .prism-ErrorMessage	En dıştaki kapsayıcı.
  .prism-error-content	Hata mesajı görüntüleme alanı.
  .prism-error-operation	İşlem alanı.
  .prism-detect-info	UUID ve istek ID'si gibi tanılama ayrıntıları.

• Yeni bir hata kullanıcı arayüzü tanımlayın

Varsayılan kullanıcı arayüzünü engellemek için hata olaylarına abone olun:

player.on('error',function(e){
      // Hide the error UI.
      $('.prism-ErrorMessage').hide();
      // Parse the data about the error.
      var errorData = e.paramData;
      console.dir(errorData);
    });

Yeni bir hata kullanıcı arayüzü tanımlamak için:

1. Önceki kodda gösterildiği gibi varsayılan hata kullanıcı arayüzünü gizleyin.

2. paramData parametresinden hata verilerini ayrıştırın. Aşağıdaki görselde hata alanları gösterilmektedir.

3. Ayrıştırılan hata kodlarını kullanarak bunları özel hata kullanıcı arayüzünüzdeki parametrelere atayın.