ApsaraVideo VOD:Personnaliser l'interface d'erreur du lecteur HTML5

Interface d'erreur par défaut

Interface d'erreur par défaut d'ApsaraVideo Player :Activer le composant d'interface displayError

Dans ApsaraVideo Player V2.1.0 ou version ultérieure avec un thème personnalisé, ajoutez le composant d'interface displayError à la configuration skinLayout.

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

Interface d'erreur personnalisée

Utilisez l'une des méthodes suivantes :

• Modifier le fichier CSS de l'interface d'erreur par défaut

  Modifiez le fichier CSS pour changer la couleur d'arrière-plan, la police, la position ou la visibilité du message d'erreur.

  Classes CSS principales :

  Classe	Description
  .prism-ErrorMessage	Conteneur externe.
  .prism-error-content	Zone d'affichage du message d'erreur.
  .prism-error-operation	Zone d'action.
  .prism-detect-info	Détails de diagnostic tels que l'UUID et l'ID de requête.

• Définir une nouvelle interface d'erreur

Abonnez-vous aux événements d'erreur pour intercepter l'interface par défaut :

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);
    });

Pour définir une nouvelle interface d'erreur :

1. Masquez l'interface d'erreur par défaut comme indiqué dans le code précédent.

2. Analysez les données d'erreur à partir du paramètre paramData. L'illustration suivante présente les champs d'erreur.

3. Récupérez les codes d'erreur analysés et assignez-les aux paramètres de votre interface d'erreur personnalisée.