Étape par étape : Débogueur Brightcove Player

Dans cette rubrique, vous apprendrez à utiliser le débogueur Brightcove Player pour capturer et enregistrer des informations sur votre lecteur, vos médias et vos publicités.

Une fois que vous avez ajouté le plug-in de débogage dans votre lecteur, vous pouvez suivre les informations en temps réel au fur et à mesure que la lecture se produit dans le navigateur Web.

Le joueur avec le débogueur

Sélectionnez l'image ci-dessous pour ouvrir le lecteur et le débogueur dans une autre fenêtre.

Lien du lecteur vers un fichier externe
Lien du lecteur vers un fichier externe
Lien du lecteur vers un fichier externe
Lien du lecteur vers un fichier externe

Aperçu

Le débogueur Brightcove Player est un plugin qui fonctionne avec le Brightcove Player ou le lecteur Video.js standard. Le débogueur enregistre, capture et affiche des informations sur le lecteur, les médias et la publicité actuellement utilisés. Il fonctionne sur les plates-formes de lecteur suivantes:

  • Brightcove Player v5 +, v6 +
  • Video.js v5, v6

Le débogueur enregistre les paramètres d'annonce lorsque les plugins suivants sont utilisés:

  • IMA
  • FreeWheel
  • Une fois UX

Liens de ressources:

En savoir plus sur le débogueur

En savoir plus sur le débogueur de lecteur Brightcove:

  1. Revoir le LISEZ-MOI informations pour le Débogueur Brightcove Player. Ici, vous trouverez un exemple de code ainsi que des options de débogage et des données d'affichage.

    Le débogueur Brightcove Player s'attache à un Brightcove Player en utilisant le <video> éléments id attribut.

  2. Les fonctionnalités du débogueur incluent:

    • Un bouton bascule vous permet de minimiser le débogueur pour réduire son encombrement lors du test des joueurs dans la nature.
    • Il écoute les événements des joueurs en utilisant le player.on() méthode et les affiche dans le Journal section.
    • Il capture les messages de la console de débogage du navigateur et les affiche dans le Journal section.
    • Pour la vidéo en cours chargée dans le lecteur, le débogueur enregistre les données du mediainfo propriété.
    • Lorsque le plug-in IMA est utilisé, le débogueur enregistre les paramètres d'annonce IMA3.
    • Lorsque le plugin FreeWheel est utilisé, le débogueur enregistre les paramètres d'annonce FreeWheel.
    • Lorsqu'une annonce est en cours de lecture, le débogueur enregistre les informations actuelles de l'annonce. Mettez le lecteur en pause pour vous assurer que vous pouvez afficher ces informations dans le Paramètres d'annonce languette.
    • Il capture et affiche l'état actuel du lecteur à l'aide de classes CSS qui sont attachées au lecteur.
    • En sélectionnant / désélectionnant un nom de classe dans le Classes de joueurs section, vous pouvez ajouter / supprimer des classes du lecteur.
    • En basculant le Journal , Des classes , Paramètres du joueur et Paramètres d'annonce onglets, vous pouvez afficher / masquer les sections d'affichage correspondantes.

Créer le lecteur

Tout d'abord, nous allons créer un lecteur dans Studio et lui attribuer une vidéo.

  1. Dans Studio, accédez au Joueurs module. Ici, créez un nouveau joueur ou utilisez un joueur existant. Vous pouvez même utiliser le lecteur par défaut dans votre compte.
  2. dans le Réglages section, sélectionnez la Éditer et procédez comme suit:
    • Met le Largeur option pour 640.
    • Met le la taille option pour 360.
    Vous pouvez définir la taille du lecteur comme vous le souhaitez.
  3. Cliquez sur Enregistrer, puis sur Publier le lecteur.
  4. Dans le Médias module, sélectionnez une vidéo et publiez-la avec ce lecteur.Attribuez du contenu vidéo au lecteur et publiez-le.

  5. Copiez le code d'intégration avancé (encart) et collez-le dans un nouveau fichier HTML.

  6. Dans l'ouverture <video> tag, ajoutez un id attribut avec une valeur de myPlayer.

    Le code intégré doit ressembler à ceci :

    <video-js id="myPlayerID"
  data-video-id="4825296720001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
    <video-js id="myPlayerID"
  data-account="3676484087001"
	data-player="BkE8DMCzl"
	data-embed="default"
	data-application-id=""
	controls=""
	width="640"
	height="360"></video-js>
<script src="https://players.brightcove.net/3676484087001/BkE8DMCzl_default/index.min.js"></script>

Ajouter les fichiers de débogage

Dans cette section, nous ajouterons les styles et les scripts nécessaires au débogueur Brightcove Player.

  1. Sous le code du joueur, ajoutez un <link> balise qui pointe vers votre copie du fichier CSS du débogueur. La balise doit ressembler à ceci :

      <link href="//your web domain/videojs-player-debugger.css" rel="stylesheet">

  2. Sous le code précédent, ajoutez un <script> balise qui pointe vers votre copie du fichier JavaScript du débogueur. La balise doit ressembler à ceci :

      <script src="//your web domain/videojs-player-debugger.min.js"></script>

Appelez le débogueur avec des options

Dans cette section, nous allons définir les options du débogueur, puis l'appeler pour ajouter le débogueur à notre lecteur.

  1. Voici une liste des options avec une brève description pour chacune:

    Option Description Valeur par défaut
    captureConsole Incluez la sortie des messages de la console JavaScript dans le journal. true
    debugAds Consignez les événements publicitaires et les informations de débogage. true
    logClasses Enregistrez les classes de joueurs avec chaque événement. Ceci est utile pour suivre l'état du joueur. faux
    logType Choisissez le format des données enregistrées - table ou liste. liste
    showMediaInfo Inclure le mediainfo données dans le volet des paramètres du lecteur. true
    afficherAfficheStyles Enregistrez et enregistrez les classes et les styles d'affiches. faux
    showProgress Journaliser les événements de progression. faux
    startMinimized Démarrez le débogueur dans l'état réduit (bouton). faux
    useLineNums Inclure les numéros de ligne dans la sortie du journal. faux
    verbeux Enregistrez les messages détaillés du lecteur et des événements publicitaires. faux

  2. Dans votre code de page HTML, avant la fermeture </body> balise, ajoutez le code de script suivant:

    • Ligne 2: obtient une référence à votre lecteur.
    • Ligne 3: attend que votre lecteur soit prêt.
    • Ligne 4: définit les options du débogueur. Pour cet exemple, nous avons un lecteur sans publicité.
    • Ligne 6: appelle le débogueur avec les options spécifiées.
    <script>
  var myPlayer = videojs.getPlayer('myPlayerID');
  myPlayer.ready(function(){
      var options = {"debugAds":false, "logClasses": true};
      myPlayer.playerDebugger(options);
  });
</script>

  3. Votre code de page HTML complet doit ressembler à ceci :

    <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BC Player Debugger</title>
</head>

<body>

    <video-js id="myPlayerID"
      data-video-id="4825296720001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

  <!-- BC Player Debugger styles and script -->
    <link href="/assets/css/videojs-player-debugger.css" rel="stylesheet">
    <script src="/assets/js/videojs-player-debugger.min.js"></script>

  <!-- page script -->
    <script>
      var myPlayer = videojs.getPlayer('myPlayerID');
      myPlayer.ready(function(){
        var options = {"debugAds":false, "logClasses": true};
        myPlayer.playerDebugger(options);
      });
    </script>

</body>
</html>

      <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BC Player Debugger</title>
</head>

<body>

    <video-js id="myPlayerID"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

  <!-- BC Player Debugger styles and script -->
    <link href="/assets/css/videojs-player-debugger.css" rel="stylesheet">
    <script src="/assets/js/videojs-player-debugger.min.js"></script>

  <!-- page script -->
    <script>
			var myPlayer = videojs.getPlayer('myPlayerID');
			myPlayer.ready(function(){
        var options = {"debugAds":false, "logClasses": true};
        myPlayer.playerDebugger(options);
	    });
    </script>

</body>
</html>

  4. Dans un navigateur, exécutez votre fichier HTML. Vous devriez voir le débogueur sous le lecteur.

    Débogueur Brightcove Player
    Débogueur Brightcove Player

L'onglet Journal

le Journal La section affiche tous les événements du joueur que le plugin a capturés.

  1. Dans le débogueur du lecteur, assurez-vous que le Journal l'onglet est sélectionné. L'onglet apparaîtra en vert une fois sélectionné.

    Affichage de la section du journal
    Affichage de la section du journal

    Si un événement expose des informations supplémentaires, ces informations peuvent également être affichées. Par exemple, sur loadedmetadata , les données suivantes sont également affichées:

    • ID du compte
    • identifiant vidéo
    • durée
    • courte description
     

    Pour consigner les événements sans détails, définissez le verbeux option pour faux.

  2. Notez les événements initiaux dans le journal. Démarrez la lecture de la vidéo, puis mettez-la en pause. Vous devriez maintenant voir les événements associés à la lecture et à la mise en pause de la vidéo.

    Lecture et pause d'événements
    Lecture et pause d'événements

  3. Laissez la vidéo jouer jusqu'à la fin. Notez qu'il y a un pause événement avant le terminé un événement.

    Événement terminé
    Événement terminé

L'onglet Informations de lecture

le Informations de lecture La section affiche les informations de lecture pour la vidéo chargée.

  1. Dans le débogueur du lecteur, sélectionnez le Informations de lecture languette. L'onglet apparaîtra en vert une fois sélectionné.

    Onglet Informations de lecture
    Onglet Informations de lecture

    Notez les informations affichées pour la vidéo actuellement chargée.

L'onglet Classes

le Des classes La section affiche les classes CSS attachées au lecteur. Les classes actives apparaissent en texte vert / gras, tandis que les classes inactives apparaissent en texte blanc / normal.

  1. Dans le débogueur du lecteur, sélectionnez le Des classes languette. L'onglet apparaîtra en vert une fois sélectionné.

    onglet Classes
    onglet Classes

    Vous pouvez sélectionner une classe pour l'appliquer au joueur. Cela vous permet de tester différents états du joueur.

L'onglet Paramètres du lecteur

le Paramètres du joueur La section affiche les informations du joueur, y compris l'identifiant du joueur et l'identifiant du compte. Il affiche également les données du mediainfo objet pour la vidéo actuellement chargée, y compris les rendus, les sources, les fichiers maîtres, etc.

  1. Dans le débogueur du lecteur, sélectionnez le Paramètres du joueur languette. L'onglet apparaîtra en vert une fois sélectionné.

    Onglet Paramètres du lecteur
    Onglet Paramètres du lecteur

Déboguer les annonces IMA

Le débogueur capture et enregistre les événements publicitaires et l'état du lecteur au moment où l'événement se produit. Le débogueur crée un fil d'Ariane, ce qui facilite la visualisation de la progression des événements pendant la lecture de l'annonce.

Tout d'abord, nous allons inclure le plugin et l'URL de l'annonce dans notre lecteur. Dans cet exemple, nous utilisons des publicités IMA.

  1. Revenez à votre fichier HTML. Sous le joueur <script> tag, ajoutez les fichiers suivants pour le plugin IMA:

    • Ligne 4: définit les styles du plugin IMA.
    • Ligne 5: définit le fichier JavaScript du plugin IMA.
        <script src="https://players.brightcove.net/1752604059001/SJJokFGWx_default/index.min.js"></script>

    <!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
    <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>
        <script src="https://players.brightcove.net/3676484087001/BkE8DMCzl_default/index.min.js"></script>

  <!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
  <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

  2. Dans la section de script de page, ajoutez du code pour définir l'URL de l'annonce et appelez le plug-in IMA.

    • Ligne 4: définit les options du débogueur du lecteur. Remarquerez que debugAds l'option a été définie sur true.
    • Ligne 5: définit l'URL de l'annonce.
    • Lignes 7-11: appelez le plugin IMA avec l'URL de l'annonce et les options.
    <script>
    var myPlayer = videojs.getPlayer('myPlayerID');
    myPlayer.ready(function(){
        var options = {"debugAds":true, "logClasses": true};
        myAdUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="

        myPlayer.ima3({
          serverUrl: myAdUrl,
          timeout: 5000,
          debug: true
        });
        myPlayer.playerDebugger(options);
    });
  </script>

  3. Votre code de page HTML complet doit ressembler à ceci :

    <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BC Player Debugger</title>
</head>

<body>

    <video-js id="myPlayerID"
      data-video-id="4825296720001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

  <!-- BC Player Debugger styles and script -->
    <link href="/assets/css/videojs-player-debugger.css" rel="stylesheet">
    <script src="/assets/js/videojs-player-debugger.min.js"></script>

		<!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
    <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

  <!-- page script -->
    <script>
      var myPlayer = videojs.getPlayer('myPlayerID');
      myPlayer.ready(function(){
        var options = {"debugAds":true, "logClasses": true};
        myAdUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="

        myPlayer.ima3({
          serverUrl: myAdUrl,
          timeout: 5000,
          debug: true
        });
        myPlayer.playerDebugger(options);
      });
    </script>

</body>
</html>

    <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BC Player Debugger</title>
</head>

<body>

    <video-js id="myPlayerID"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

  <!-- BC Player Debugger styles and script -->
    <link href="/assets/css/videojs-player-debugger.css" rel="stylesheet">
    <script src="/assets/js/videojs-player-debugger.min.js"></script>

		<!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
    <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

  <!-- page script -->
    <script>
			var myPlayer = videojs.getPlayer('myPlayerID');
			myPlayer.ready(function(){
	        var options = {"debugAds":true, "logClasses": true};
					myAdUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="

					myPlayer.ima3({
		        serverUrl: myAdUrl,
		        timeout: 5000,
		        debug: true
		      });
	        myPlayer.playerDebugger(options);
	    });
    </script>

</body>
</html>

  4. Exécutez votre page HTML dans le navigateur. Sélectionnez le Paramètres d'annonce languette. Vous devriez voir la section Paramètres des annonces sous le lecteur.

    Onglet Paramètres d'annonce
    Onglet Paramètres d'annonce

  5. Commencez à lire la vidéo. Cet exemple contient une annonce au début de la vidéo. Vous devriez voir des informations supplémentaires sur l'événement pendant la lecture de l'annonce.

    Événements publicitaires IMA
    Événements publicitaires IMA
  6. Vous connaissez maintenant les bases de l'utilisation du débogueur Brightcove Player. Vous êtes prêt à explorer par vous-même.