Test de version du lecteur et du plugin

Dans cette rubrique, vous apprendrez à créer un lecteur d'une version spécifiée, puis à tester cette version du lecteur avec un plugin.

Introduction

Les plugins Brightcove Player peuvent être vos propres créations ou des plugins fournis par Brightcove. Vous aurez trois options de test:

Utilisation de Studio pour créer un lecteur et ajouter le plugin et les configurations.
En utilisant Studio pour créer le lecteur, puis en HTML, ajoutez le plugin par programmation.
Utilisation de l'API Player Management et boucle. le boucle L'outil est utilisé en ligne de commande pour tirer parti de l'API Player Management. Pour une introduction à l'utilisation de curl, consultez le Démarrage rapide: Document de gestion du joueur . Si vous connaissez les outils client HTTP, comme Facteur , ils peuvent également être utilisés. L'avantage de cette approche est que vous pouvez choisir n'importe quelle version du lecteur souhaitée, et pas seulement celles disponibles dans Studio.

Test des pré-versions du plugin Brightcove

Parfois, Brightcove mettra à disposition des pré-versions de certains plugins. Vous pouvez utiliser les instructions de ce document pour vous assurer que votre Brightcove Player et les autres plugins fonctionnent avec la pré-version.

Utilisation de Studio

Dans les étapes suivantes, vous serez guidé à travers le processus d'utilisation de Studio pour créer un lecteur et ajouter un plugin au lecteur pour le test.

Ouvrez le module PLAYERS et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
Cliquez sur Plugins dans le menu de navigation de gauche.
Cliquez sur Ajouter un plugin et sélectionnez Plugin personnalisé.
Pour le Nom du plugin entrez le nom du plugin souhaité.
Si vous testez un plug-in de pré-version Brightcove, les URL pour JavaScript et CSS seront fournies.
Entrez le plugin souhaité JavaScript URL.
Entrez le plugin souhaité CSS URL.
Entrez les options de configuration, le cas échéant, pour le plugin souhaité.
Cliquez sur Save.
Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Vous êtes maintenant prêt à publier une vidéo à l'aide du lecteur nouvellement configuré et à tester le plugin.

Ajouter le plugin par programme

Dans cette section du document, vous allez créer le lecteur dans Studio, puis ajouter le plugin en utilisant le code dans une page HTML.

Dans Studio, sélectionnez le JOUEURS module.
Créez un nouveau lecteur en utilisant la version souhaitée dans la liste déroulante.
Aller au MÉDIAS module et publier une vidéo.
Copiez le Avancée (intégration dans la page) code d'implémentation.
Collez le code du lecteur dans une page HTML.
Ajoutez le chemin d'accès au fichier CSS à l'aide d'un HTML <link> marque.
Ajouter le chemin d'accès au fichier JavaScript à l'aide d'un HTML <script> marque.
Une fois que le lecteur est prêt, appelez le plugin et passez toutes les options.

Ce qui suit montre un aperçu générique du code nécessaire:

<!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Testing a plugin</title>
    <link href="//url_to_my_css/my.css" rel="stylesheet">
  </head>

  <body>

    <video-js id="myPlayerID"
      data-video-id="5350958927001"
      data-account="1507807800001"
      data-player="rJeuIHdbmW"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/1507807800001/rJeuIHdbmW_default/index.min.js"></script>

    <script src="//url_to_my_js/my.js"></script>

    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
        options = {};
        options.prop1 = "value1";
        options.prop2 = "value2";

        myPlayer.pluginName(options);
      });
    </script>

  </body>

  </html>

Vous êtes maintenant prêt à parcourir cette page pour tester votre plugin.

Utilisation de curl et de l'API Player Management

Dans cette section du document, vous verrez comment vous pouvez utiliser curl et tirer parti de l'API Player Management pour tester un plugin avec un lecteur. L'avantage de cette approche est que vous pouvez choisir n'importe quelle version du lecteur souhaitée, et pas seulement celles disponibles dans Studio.

Créer un joueur

Vous avez maintenant créé avec succès un lecteur d'une version spécifiée.

Créer une page de test

Maintenant que votre lecteur est créé, vous voudrez tester votre plugin avec. Les étapes de cette section vous guident pour obtenir l'implémentation du code de lecteur avancé et le tester avec votre plugin.

Comme mentionné dans le Pas à pas: Gestion des joueurs document, vous souhaiterez configurer des variables d'environnement pour les éléments suivants:
- Votre adresse électronique
```
export EMAIL=YourEmailAddress
```
- Votre numéro de compte
```
export ACCOUNT_ID=YourAccountID
```
- Votre identifiant de joueur, une fois le joueur créé
```
export PLAYER_ID=MyPlayerID
```
Dans curl, vous utiliserez la variable précédée d'un $ , ainsi: $EMAIL

Pour créer un joueur nommé six-oh-joueurs en utilisant la version 6.0.0 vous collez l'instruction curl suivante dans le terminal (surligné en jaune dans la capture d'écran ci-dessous):

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request POST \
  --data '{
      "name": "six-oh player",
      "configuration": {
        "player": {
          "template": {
            "name": "single-video-template",
            "version": "6.0.0"
          }
        }
      }
    }' \
    https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

Après avoir appuyé sur Entrer , vous serez invité à entrer votre mot de passe Brightcove, que vous entrerez (surligné en rouge dans la capture d'écran ci-dessous).

Enfin, l'API de gestion du lecteur renverra des informations sur le lecteur que vous venez de créer au format JSON (surlignées en vert dans la capture d'écran ci-dessous).

Le player JSON, plus joliment formaté, est montré ici:

{
  "id": "B1JOH9o0e",
  "url": "https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.html",
  "embed_code": "<iframe src='//players.brightcove.net/1507807800001/B1JOH9o0e_default/index.html' allowfullscreen allow='encrypted-media'></iframe>",
  "embed_in_page": "https://players.brightcove.net/1507807800001/B1JOH9o0e_default/in_page.embed",
  "preview_url": "https://preview-players.brightcove.net/v1/accounts/1507807800001/players/B1JOH9o0e/preview/embeds/default/master/index.html",
  "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v1/accounts/1507807800001/players/B1JOH9o0e/preview/embeds/default/master/index.html' allowfullscreen allow='encrypted-media'></iframe>"
}

Maintenant que le lecteur est créé, vous pouvez accéder à Studio et utiliser le lecteur pour publier une vidéo. Par exemple, le Avancée le code du joueur ressemblerait à ceci, mais bien sûr en utilisant les informations de votre compte.

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

Placez maintenant le code du lecteur dans une page HTML. Notez qu'un id l'attribut a été ajouté au video balise avec une valeur assignée de myPlayerID.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing Player and Plugin Versions</title>
</head>

<body>

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

</body>

</html>

Vous voulez maintenant tester votre plugin (supposons que vous ayez nommé votre plugin myPluginName). Le processus le plus simple consiste à enregistrer votre code localement et à charger simplement votre plugin avec un script marque. Vous appelez ensuite le plugin à charger. Le code des deux étapes est mis en évidence ci-dessous. Un exemple est illustré ici :

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

  //Load my plugin source JavaScript
  <script src="my_plugin_source.js"></script>

  //Load my plugin into the player
  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.myPluginName();
    });
  </script>
...

Vous pouvez maintenant tester votre lecteur et, si nécessaire, effectuer un débogage interactif.

Ajouter le plugin de manière permanente au joueur

Une fois que tout fonctionne bien et que vous souhaitez inclure le plugin avec le lecteur chaque fois que ce lecteur est utilisé, vous pouvez attribuer le plugin au lecteur à l'aide de curl et de l'API Player Management. L'instruction curl suivante est un exemple et vous devrez ajouter vos options de configuration spécifiques et le nom du plugin.

curl \
  --header "Content-Type: application/json" \
	 --user $EMAIL \
	 --request PATCH \
	 --data '{
      "plugins": [{
          "name": "myPluginName",
          "options": {
            "param1": "1",
            "param2": "2"
          }
        }
      ],
      "scripts": [
        "http://domain.com/wherever/myplugin.js"
      ],
      "stylesheets": [
        "http://domain.com/wherever/myplugin.css"
      ]
    }' \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

Après avoir ajouté le plugin, vous voudrez soit aller dans Studio et publier le lecteur (il sera marqué comme nécessitant une publication), soit vous pouvez utiliser l'instruction curl suivante pour publier le lecteur:

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL  \
  --request POST \
  https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish