Messagerie Restrictions de domaine

Dans cette rubrique, vous apprendrez à afficher les messages d'erreur appropriés lorsqu'une vidéo n'est pas autorisée à être lue en raison de restrictions de domaine. Par défaut, Brightcove Player n'informe pas l'utilisateur qu'une vidéo est limitée au domaine.

Aperçu

Il est possible de restreindre l'endroit où une vidéo peut être visionnée via des restrictions de domaine. le Configuration des restrictions de contenu du lecteur Le document vous montre comment utiliser Video Cloud pour appliquer des restrictions de domaine. Le document que vous lisez maintenant vous explique comment implémenter du code pour informer les utilisateurs que le lecteur utilise des restrictions de domaine.

Par défaut, Brightcove Player n'informe pas l'utilisateur qu'une vidéo qu'il tente de visionner se trouve dans un lecteur limité au domaine. Le joueur affiche simplement un écran noir. Si vous affichez la console, vous verrez ce qui suit.

erreur de console de restriction de domaine

Ce n'est pas très utile, mais si vous vérifiez le Réseau et cliquez sur un Nom correspondant à votre ID vidéo, puis vérifiez le Aperçu onglet, vous verrez une erreur plus éclairante.

onglet réseau de la console de messagerie de domaine

Ce document met en œuvre une stratégie pour informer l'utilisateur que la vidéo qu'il essaie de regarder est limitée au domaine.

Objet d'erreur du catalogue de lecteurs

La clé pour créer un message convivial est la error objet contenu dans Brightcove Player catalog. Un exemple d'erreur de restriction de domaine est présenté ci-dessous dans une capture d'écran de la console d'un navigateur. Notez que l'objet contient un data propriété, qui contient elle-même un tableau. Le tableau contiendra la dernière erreur rencontrée par le catalogue lors du chargement d'une vidéo. Dans l'exemple, vous voyez que l'élément du tableau signale un problème de restriction de domaine.

objet d'erreur de catalogue

Gérer bc-catalog-error

Il est possible que la gestion des erreurs dans la ready() section normale du script bloc puisse causer des problèmes. Par exemple, il peut arriver que l' bc-catalog-error événement soit distribué avant que le joueur soit prêt, et si vous écoutez l'erreur dans la ready() section, vous ne serez pas en mesure de gérer l'erreur. Vous constaterez peut-être qu'il n'y a pas de problème dans votre code, mais le problème peut dépendre du navigateur, alors soyez prudent. Pour cette raison, le code de gestion des erreurs dans ce document utilisera le one() méthode de gestion des événements pour écouter le bc-catalog-error dans un bloc de code séparé plutôt que dans le ready() section.

Message en HTML

Une fois que vous avez compris la structure de l'erreur qui est produite et où elle se trouve, vous pouvez utiliser JavaScript pour afficher une erreur descriptive pour l'utilisateur. Les étapes de base de la mise en œuvre sont:

  • Créez un élément cible dans lequel afficher le message.
  • Assurez-vous que le joueur est prêt à agir.
  • Vérifiez si une erreur s'est produite.
  • Si oui, vérifiez si l'erreur est un problème de restriction de domaine.
  • Si oui, affichez le message à l'utilisateur.

Le code suivant implémente ces étapes.

  • Ligne 8 : Insérez un élément HTML, dans ce cas un paragraphe, dans lequel injecter du texte; donner à l'élément un id à des fins de ciblage.
  • Ligne 13 : Utilisez la one() méthode pour ajouter un écouteur d'événement pour l' bc-catalog-error événement une seule fois.
  • Ligne 16 : Utilisez un if pour être sûr qu'une erreur s'est produite.
  • Ligne 17 : Attribuez à une variable les informations d'erreur spécifiques de l'objet d'erreur du catalogue Brightcove Player.
  • Ligne 18 : Utilisez un if pour être sûr que les informations d'erreur spécifiques existent ET que le type d'erreur provient d'une restriction de domaine.
  • Ligne 19 : Injectez un message texte approprié dans l'élément HTML créé à la ligne 12.
  <video-js id="myPlayerID"
    data-video-id="3495887198001"
    data-account="1507807800001"
    data-player="4c8eb732-ba76-485c-a906-407365721633"
    data-embed="default"
    controls=""></video-js>

    <p id="textTarget"></p>

  <script src="https://players.brightcove.net/1507807800001/4c8eb732-ba76-485c-a906-407365721633_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').one('bc-catalog-error', function(){
      var myPlayer = this,
        specificError;
      if (myPlayer.catalog.error !== undefined) {
        specificError = myPlayer.catalog.error.data[0];
        if (specificError !== undefined & specificError.error_subcode == "DOMAIN") {
          document.getElementById("textTarget").innerHTML = "The video you are trying to watch cannot be viewed as it is domain restricted.";
        };
      };
    });

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      console.log('in ready');
    });
  </script>

La capture d'écran suivante montre le message affiché sous le lecteur.

erreur sous le joueur

Message via le plugin d'erreurs

Vous souhaiterez peut-être afficher le message dans le lecteur si la vidéo est limitée au domaine. Vous pouvez le faire en utilisant le plugin d'erreurs. Le plugin d'erreurs est automatiquement chargé dans le lecteur, vous n'avez donc pas besoin d'effectuer explicitement cette opération. Pour plus de détails sur le plugin d'erreurs au-delà de ce qui sera mentionné ici, consultez le Afficher le plugin des messages d'erreur document.

  • Ligne 43 : Utilisez la one() méthode pour ajouter un écouteur d'événement pour l' bc-catalog-error événement une seule fois.
  • Lignes 46-53: Appeler le joueur error() méthode, en passant en argument JSON qui définit le errors informations à afficher. Notez que le choix de -3 car le code d'erreur est arbitraire et la seule indication est de ne pas utiliser de code d'erreur standard (actuellement 1-5).
  • Ligne 57 : Appeler le error() méthode pour afficher les informations d'erreur personnalisées. La logique utilisée pour déterminer quand l'erreur de restriction de domaine s'est produite est la même que ci-dessus. L'objet passé en argument définit le message d'erreur à afficher.
  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').one('bc-catalog-error', function(){
      var myPlayer = this,
        specificError;
      myPlayer.errors({
        'errors': {
          '-3': {
            'headline': 'The video you are trying to watch cannot be viewed because of domain restrictions.',
            'type': 'DOMAIN'
          }
        }
      });
      if (typeof(myPlayer.catalog.error) !== 'undefined') {
        specificError = myPlayer.catalog.error.data[0];
        if (specificError !== 'undefined' & specificError.error_subcode == "DOMAIN") {
          myPlayer.error({code:'-3'});
        };
      };
    });

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
    });
  </script>

La capture d'écran suivante montre l'affichage de l'erreur définie par le plugin d'erreur.

erreur définie

Affichage des erreurs générales

Les deux sections ci-dessus traitent spécifiquement de l'affichage de l'erreur générée lorsqu'une vidéo géo-restreinte est visualisée à partir d'un paramètre régional restreint. Certaines erreurs ne fournissent pas le niveau de détail de la restriction de domaine. Un exemple d'objet d'erreur de ce type est présenté ici. Notez que le Les données Le champ est vide, alors qu'avec l'erreur de restriction de domaine, il contenait des informations d'erreur clés.

objet d'erreur général

Le code suivant montre comment afficher les informations de catalog.error peu importe le niveau de détail. À un niveau élevé, le code effectue les opérations suivantes:

  • Vérifie si une erreur de catalogue s'est produite.
  • Vérifie si dans l'objet d'erreur le data Le champ contient des informations d'erreur spécifiques. Si ce n'est PAS le cas, le message d'erreur général est injecté dans le HTML.
  • S'il y a des informations d'erreur spécifiques ET qu'il s'agit d'une restriction de domaine, un message approprié est injecté dans le HTML.
  • S'il existe des informations d'erreur spécifiques et qu'elles ne sont pas liées à la restriction de domaine, le message d'erreur spécifique est injecté dans le HTML.
  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').one('bc-catalog-error', function(){
      var myPlayer = this,
        specificError;
      if (myPlayer.catalog.error != undefined) {
        specificError = myPlayer.catalog.error.data[0];
        if (specificError == undefined) {
          document.getElementById("textTarget").innerHTML = "The following error has occurred: <strong>" + myPlayer.catalog.error.message + "</strong>";
        } else if (specificError.error_subcode == "DOMAIN") {
          document.getElementById("textTarget").innerHTML = "The video you are trying to watch cannot be viewed because of domain restrictions.";
        } else {
          document.getElementById("textTarget").innerHTML = "The following error has occurred: " + specificError.message;
        };
      };
    });

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
    });
  </script>

La capture d'écran suivante montre le message d'erreur général affiché en HTML. Bien sûr, vous pouvez également utiliser le plugin d'erreurs pour afficher le message, comme indiqué dans la section précédente de ce document.

affichage du message d'erreur général sous le lecteur