:HTML5プレーヤーのエラーUIをカスタマイズする

デフォルトのエラーUI

次の図は、ApsaraVideo PlayerのデフォルトのエラーUIを示しています。 displayError UIコンポーネントの有効化

skinLayout属性を使用してApsaraVideo player V2.1.0以降でプレーヤースキンをカスタマイズする場合は、次のコードに示すように、skinLayout属性でdisplayError UIコンポーネントを有効にする必要があります。 skinLayout属性の詳細については、「skinLayout属性の設定」をご参照ください。

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

カスタムエラーUI

次の2つの方法のいずれかを使用して、エラーUIをカスタマイズできます。

• デフォルトのエラーUIのCSSファイルの変更

  デフォルトのエラーUIに基づいてエラーUIをカスタマイズできます。 CSSファイルを変更して、背景色、フォント、および位置を変更し、エラーメッセージを表示するかどうかを指定できます。

  次の表に、CSSファイルで変更する必要のあるクラスを示します。

  分類	説明
  . prism-ErrorMessage	最も外側のコンテナのクラス。
  . prism-error-content	エラーメッセージが表示される領域を定義するクラス。
  . プリズムエラー操作	操作を実行できる領域を定義するクラス。
  . プリズム検出情報	UUIDやリクエストIDなどの追加情報を表示する領域を定義するクラスです。 追加情報は診断に使用されます。

• 新しいエラーUIの定義

次のコードは、エラーイベントをサブスクライブする方法を示しています。

player.on('error',function(e){
      // エラーUIを非表示にします。
      $('.prism-ErrorMessage').hide();
      // エラーに関するデータを解析します。
      var errorData = e.paramData;
      console.dir(errorData);
    });

新しいエラーUIを定義する手順:

1. 上記のコードに示すように、ApsaraVideo PlayerのエラーUIを非表示にします。

2. 前のコードに示すように、paramDataパラメーターのエラーに関するデータを解析します。 次の図は、データのエラーに関するフィールドを示しています。

3. 2つのステップを完了すると、特定のエラーコードを取得できます。 次に、エラーUIのパラメーターにエラーコードを割り当てます。