Messagerie Restrictions de 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.
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.
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.
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.
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 leerrors
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.
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.
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.