Étape par étape : Gestion des joueurs

Introduction

Dans ce document étape par étape, vous effectuerez les tâches suivantes :

• Créer un joueur
• Mettre à jour le lecteur pour lire automatiquement la vidéo
• Personnaliser un lecteur en ajoutant un plugin
• Afficher la configuration d'un lecteur

Commencer

L'approche adoptée par ce document étape par étape consiste à utiliser des instructions curl pour communiquer avec l'API Player Service. L'outil curl est utilisé sur la ligne de commande pour transférer des données avec la syntaxe d'URL. Plus d'informations sur curl peuvent être obtenues sur https://curl.haxx.se.

Vous n'avez certainement pas à utiliser curl comme vous le faites dans ce document étape par étape pour des simplifications. Vous pouvez bien sûr utiliser votre langage préféré pour communiquer avec les API. Vérifiez Configuration pour les exemples de gestion des joueurs qui montre comment utiliser l'authentification de base, AJAX et JavaScript pour écrire des mini-applications pour des tâches de base comme créer un lecteur, afficher tous vos lecteurs, supprimer des lecteurs, etc.

Quelques étapes préliminaires doivent être effectuées avant de pouvoir commencer à utiliser l'API. Il s'agit des éléments suivants :

• Se connecter à Studio. Si vous avez plusieurs comptes, utilisez le menu déroulant pour sélectionner celui dans lequel vous souhaitez créer vos nouveaux joueurs. Pour que le système d'identification fonctionne correctement, vous devez disposer des droits d'administrateur sur ce compte. Si vous n'êtes pas sûr qu'un utilisateur dispose de droits d'administrateur, accédez à la page Paramètres des utilisateurs pour voir les utilisateurs répertoriés avec leur rôle.
• Dans Studio, assurez-vous d'avoir sélectionné DOMICILE à partir des listes de modules. Dans le coin supérieur gauche de la page, juste en dessous du nom du compte, vous pourrez copier votre identifiant de compte.

  

• Sur la ligne de commande, saisissez ce qui suit pour affecter la valeur d'ID de compte à une variable d'environnement :

          export ACCOUNT_ID=YourAccountID
          
          

• L'authentification sera gérée en fournissant l'adresse e-mail de votre compte dans le cadre de la déclaration curl, puis l'API vous demandera un mot de passe. Étant donné que l'adresse e-mail sera fréquemment utilisée, attribuez également cette valeur à une variable d'environnement :

          export EMAIL=YourEmailAddress
          
          

Vous êtes maintenant prêt à commencer à utiliser l'API.

Créer un joueur

Vous pouvez désormais créer un lecteur avec un appel à l'API Player Management. Cet appel API est expliqué en détail dans le Présentation de l'API de gestion des joueurs document. Il est suggéré de copier et de coller les instructions curl suivantes dans la ligne de commande.

Les étapes suivantes vous aident à créer un lecteur.

1. La première instruction curl crée le lecteur et lui attribue un nom et une description. Après avoir collé cette instruction sur la ligne de commande et appuyez sur Entrée, vous serez invité à entrer votre mot de passe.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request POST \
             --data '{
               "name": "My New Player Name v2",
               "description": "My new player description"
               }' \
             https://players.api.brightcove.com/v1/accounts/{account_id}/players
           

   Vous verrez que le serveur renvoie les données de réponse au format JSON :

           {
             "id": "S1qN4xeG7",
             "url": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html",
             "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>",
             "embed_in_page": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
             "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed",
             "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
           }
           

2. Affichez votre lecteur en utilisant l'une (ou toutes) des valeurs suivantes (à ce stade, il n'y a pas de vidéo dans le lecteur, mais vous pouvez publier une vidéo à l'aide de votre lecteur nouvellement créé à l'aide de Studio) :
   • Copiez le url dans un navigateur pour voir votre lecteur.
   • Copiez le embed_code dans une page HTML pour afficher votre lecteur dans un iframe. Pour que cela fonctionne correctement, la page contenant l'iframe doit être servie à partir d'un serveur HTTP réel.
   • Les embed_in_page l'utilisation de la fonctionnalité est détaillée dans le Options disponibles pour le code d'intégration avancé (dans la page) document.

Mettre à jour un joueur

Vous avez maintenant effectué les bases de la création d'un lecteur. Ensuite, vous apprendrez à faire une simple mise à jour du lecteur. Dans ce cas, vous configurerez le lecteur pour lire automatiquement la vidéo dans le lecteur, si le navigateur le permet.

1. Dans le JSON renvoyé de la création du joueur, un id valeur a été affichée. Copiez ceci dans un PLAYER_ID variable d'environnement.

           export PLAYER_ID=YourPlayerID
           
           

2. Pour mettre à jour le lecteur, vous utiliserez le HTTP PATCH méthode. Vous enverrez des données pour mettre à jour votre lecteur. Vous définirez le autoplay possibilité de true. Copiez et collez l'instruction curl suivante et exécutez-la.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request PATCH \
             --data '{
               "autoplay": true
             }' \
           https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
           

3. Assurez-vous que le serveur renvoie des données qui incluent les id , preview_url et des preview_embed_code valeurs au format JSON suivant :

           {
             "id": "S1qN4xeG7",
             "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/in_page.embed",
             "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>"
           }
           

4. Utilisez soit le preview_url ou preview_embed_code valeurs pour voir les changements dans la configuration de votre lecteur. Vous verrez que la lecture automatique est maintenant vraie.
5. Vous allez maintenant publier le lecteur pour le placer à l'emplacement correct afin que les utilisateurs puissent le voir. Entrez la commande suivante :

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

   Une fois le lecteur publié, vous aurez des lecteurs différents des versions préliminaires. Les versions publiées diffèrent des versions préliminaires de ces manières :

   • Le JavaScript et le CSS sont minifiés, concaténés et intégrés directement dans le lecteur.
   • Une version basse résolution de l'image de l'affiche est générée et insérée dans la page pour améliorer les temps de chargement perçus sur les réseaux avec un temps de configuration de demande élevé (c'est-à-dire les réseaux de données cellulaires).
   • La version précédente du lecteur est enregistrée afin qu'elle puisse être récupérée si des problèmes sont découverts après le lancement de la mise à jour.
6. Vérifiez que la réponse JSON de la publication du lecteur apparaît comme suit :

           {
           "id": "S1qN4xeG7",
           "url": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html",
           "embed_code": "<iframe src='//players.brightcove.net/1507807800001/S1qN4xeG7_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>",
           "embed_in_page": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed"
           }
           
           

7. Utilisez l'une des implémentations du lecteur pour vous assurer que votre lecteur publié fonctionne correctement.

Personnaliser un lecteur

Vous pouvez personnaliser votre lecteur à l'aide de plugins. Vous pouvez apprendre à inclure des extensions préexistantes dans votre lecteur ou à créer les vôtres dans la section Étape par étape : Développement de plugins.

Dans ce cas, vous utiliserez un plugin préexistant très simple pour superposer un message texte sur la vidéo. Voici le code d'un plugin qui crée une balise de paragraphe HTML. Remarque : un nom de classe et un texte sont attribués au paragraphe, puis ils sont ajoutés au lecteur existant. Ce plugin existe déjà pour votre commodité et se trouve à //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js.

        videojs.registerPlugin('firstPlugin', function() {
          var player = this,
          overlay = document.createElement('p');
          overlay.className = 'vjs-overlay';
          overlay.innerHTML = "First Plugin Working!";
          player.el().appendChild(overlay);
        });
        
        

Le paragraphe doit être stylisé pour éviter, dans ce cas particulier, un texte noir sur fond noir. Les styles suivants sont appliqués au nom de classe du paragraphe. Cette feuille de style existe déjà pour votre commodité et se trouve à //solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css.

        .vjs-overlay {
          background-color: #333333;
          color: white;
          font-size: 2em;
          padding: 5px;
          position: absolute;
          top: 100px;
          left: 20px;
          width: 150px;
        }
        
        

Tout comme vous avez utilisé une instruction curl pour attribuer la source vidéo et l'image de l'affiche, vous utiliserez une instruction curl pour indiquer au lecteur ce qui suit :

• Emplacement du fichier JavaScript qui contient le code du plugin
• Emplacement de la feuille de style
• Le nom du plugin à utiliser avec le lecteur

1. Utilisez l'instruction curl suivante pour rendre le plug-in fonctionnel.

           curl\
           --header "Content-Type: application/json"\
           --user $EMAIL\
           --request PATCH\
           --data '{
             "scripts": [
               "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"
              ],
              "stylesheets": [
               "//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"
              ],
              "plugins": [{
                "name": "firstPlugin"
              }]
             }'\
           https: //players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
           

2. Utilisez l'instruction curl suivante pour publier le lecteur mis à jour. Il s'agit du même code de publication que celui que vous avez utilisé dans la section précédente pour publier un lecteur.

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

3. Copiez l'URL renvoyée et parcourez-la. Vous verrez que le plugin fonctionne et le texte du plugin s'affiche.

   

Lorsqu'un plug-in est ajouté au lecteur à l'aide de l'API de gestion du lecteur, qu'il s'agisse d'un plug-in fourni par Brightcove ou d'un plug-in personnalisé que vous avez créé, le plug-in devient partie intégrante du code du lecteur lui-même.

Configuration de l'affichage

Pour déboguer et confirmer le travail que vous avez effectué, il est souvent utile d'afficher la configuration d'un lecteur.

1. Pour ce faire, utilisez un GET méthode avec le configuration URL.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request GET \
             https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/configuration
           
           

2. Vérifiez que la réponse de configuration JSON est similaire à la suivante :

           {
             "media": {
               "poster": {
                 "highres": "//solutions.brightcove.com/bcls/assets/images/Tiger.jpg"
               },
               "sources": [{
                 "type": "application/x-mpegURL",
                 "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8"
               }, {
                 "type": "video/mp4",
                 "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4"
               }]
             },
             "compatibility": true,
             "video_cloud": {
               "video": "4093372393001",
               "policy_key": "BCpkADawqM3ugPRAtcx48_C4FjXiEiJORcRFnXkeL9siQUpauO_o7SaIhSnYvM24nUCeD74UFG1LMW8vtmaftsO1vYeeOn2iglfvEbG-c0PYwJ_zQCQGsvkrbgrNyEDvbEKjyrsQVXj0DOco"
             },
             "player": {
               "template": {
                 "name": "single-video-template",
                 "version": "6.7.0"
               }
             },
             "scripts": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.js"],
             "stylesheets": ["//solutions.brightcove.com/bcls/video-js/new-player/first-plugin.css"],
             "plugins": [{
               "name": "firstPlugin"
             }]
           }
           

Une autre façon d'avoir un aperçu de la configuration du lecteur est de parcourir la valeur de l'URL renvoyée et de modifier le index.html à config.json.

API du système de livraison

Les API du système de livraison permettent la gestion et le déploiement d'un groupe de fichiers, appelé référentiel. Ces fichiers sont gérés via les API REST et via git. Ces API ne devraient pas être nécessaires à la plupart des gens lors de la création ou de l'édition de lecteurs, mais elles peuvent constituer un ensemble d'API très intéressant à utiliser à d'autres fins. Si vous souhaitez les essayer, vous pouvez fais-le ici. Pour une introduction pratique, essayez le Étape par étape : Système de livraison document.