Étape par étape : Gestion du lecteur

Introduction

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

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

Démarrer

L'approche adoptée par ce document étape par étape consiste à utiliser des instructions curl pour communiquer avec l'API du service Player. L'outil curl est utilisé sur la ligne de commande pour transférer des données avec la syntaxe URL. Plus d'informations sur curl peuvent être obtenues à partir de http://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 langue préférée pour communiquer avec les API. Consultez le Setup for Player Management Samples qui montre comment utiliser l'authentification de base, AJAX et JavaScript pour écrire des mini-applications pour des tâches de base comme la création d'un lecteur, l'affichage de tous vos joueurs, la suppression de joueurs, etc.

Quelques étapes préliminaires doivent être prises avant de pouvoir commencer à utiliser l'API. Ce sont :

• Connectez-vous à Studio. Si vous avez plusieurs comptes, utilisez la liste déroulante pour sélectionner celui dans lequel vous souhaitez créer vos nouveaux joueurs. Pour que le système d'informations d'identification fonctionne correctement, vous devez disposer des droits d'administrateur sur ce compte. Si vous ne savez pas si un utilisateur dispose de droits d'administrateur, accédez à la page Paramètres utilisateurs pour afficher la liste des utilisateurs ainsi que leur rôle.
• Dans Studio, assurez-vous d'avoir sélectionné HOME dans les listes de modules. Dans le coin supérieur gauche de la page, juste en dessous du nom du compte, vous pourrez copier votre ID de compte.

  

• Sur la ligne de commande, entrez ce qui suit pour affecter la valeur 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 utilisée fréquemment, affectez également cette valeur à une variable d'environnement :

          export EMAIL=YourEmailAddress
          
          

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

créer un lecteur ;

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

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

1. La première instruction curl crée le joueur et 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": "http://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": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
             "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "http://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 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 diffusée à partir d'un serveur HTTP réel.
   • L'utilisation de la embed_in_page fonctionnalité est détaillée dans le document Options disponibles pour le document Code d'intégration avancé (dans la page) .

Mettre à jour un lecteur

Vous avez maintenant effectué les bases de la création d'un joueur. Ensuite, vous apprendrez à faire une simple mise à jour du joueur. Dans ce cas, vous allez configurer le lecteur pour la lecture automatique de la vidéo dans le lecteur, si le navigateur l'autorise.

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

           export PLAYER_ID=YourPlayerID
           
           

2. Pour mettre à jour le lecteur, vous utiliserez la PATCH méthode HTTP. Vous allez envoyer des données pour mettre à jour votre joueur. Vous allez définir l' autoplay option sur 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. Vérifiez que le serveur renvoie des données qui incluent id , preview_url et preview_embed_code valeurs au format JSON suivant:

           {
             "id": "S1qN4xeG7",
             "preview_url": "http://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "http://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 pousser à l'emplacement correct pour que les utilisateurs puissent les afficher. 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 joueurs qui diffèrent des versions d'aperçu. Les versions publiées diffèrent des versions d'aperçu de la manière suivante :

   • 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 intégrée dans la page afin d'améliorer les temps de charge perçus sur les réseaux avec un temps de configuration de demande élevé (c.-à-d. les réseaux de données cellulaires).
   • La version précédente du lecteur est sauvegardée afin qu'elle puisse être récupérée si des problèmes sont découverts après la mise en ligne de la mise à jour.
6. Vérifiez que la réponse JSON de la publication du lecteur s'affiche comme suit :

           {
           "id": "S1qN4xeG7",
           "url": "http://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": "http://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed"
           }
           
           

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

Personnaliser un lecteur

Vous pouvez personnaliser votre joueur à l'aide de plugins. Vous pouvez apprendre à inclure des plugins préexistants dans votre joueur ou à construire les vôtres dans l' étape par étape : Développement de plug-in.

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 du texte sont affectés au paragraphe, puis il est ajouté au lecteur existant. Ce plugin existe déjà pour votre commodité et se trouve à l'adresse //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, le 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 à l'adresse //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 assigner 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 plugin 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 naviguez-la. Vous verrez que le plugin fonctionne et que le texte du plugin est affiché.

   

Lorsqu'un plugin est ajouté au lecteur à l'aide de l'API Player Management, qu'il s'agisse d'un plugin fourni par Brightcove ou d'un plugin personnalisé que vous avez créé, le plugin devient une partie 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 joueur.

1. Pour ce faire, utilisez une GET méthode avec l' 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'obtenir un coup d'oeil à la configuration du lecteur est de parcourir la valeur d'URL renvoyée et de changer le index.html en config.json.

API du système de livraison

Les API Delivery System 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 git. Ces API ne devraient pas être nécessaires par la plupart des gens lors de la création ou de l'édition de lecteurs, mais elles peuvent être un ensemble d'API très intéressant à utiliser à d'autres fins. Si vous voulez les essayer, vous pouvez le faire ici. Pour une introduction pratique, essayez l' étape par étape : Document du système de livraison .