Pas à pas: Player Direction

Introduction

Dans ce document pas à pas, vous effectuerez les tâches suivantes:

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

Commencez gratuitement

L'approche de ce document étape par étape consiste à utiliser des instructions curl pour communiquer avec le Player API de service. 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 auprès de http://curl.haxx.se.

Vous n'avez certainement pas à utiliser curl comme vous le faites dans ce document détaillé, par souci de simplicité. Vous pouvez bien sûr utiliser votre langue préférée pour communiquer avec les API. Vérifiez Mis en place pour Player Échantillons de gestion 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 player, affichant tous vos players, suppression players, etc.

Quelques étapes préliminaires doivent être effectuées avant de pouvoir commencer à utiliser l'API. Ceux-ci sont:

• Connectez-vous à Studio. Si vous avez plusieurs comptes, utilisez le menu déroulant pour sélectionner celui dans lequel vous souhaitez créer votre nouveau compte. players. 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 a des 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é ACCUEIL à partir des listes de modules. Dans le coin supérieur gauche de la page, vous pourrez, juste en dessous du nom du compte, copier votre identifiant de compte.

  

• Sur la ligne de commande, entrez les informations suivantes pour affecter la valeur de l'ID de compte à une variable d'environnement:

          export ACCOUNT_ID=YourAccountID
          
          

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

          export EMAIL=YourEmailAddress
          
          

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

Créer un player

Vous pouvez maintenant créer un player avec un appel au Player Management API. Cet appel API est expliqué en détail dans la section Player Management API Vue d'ensemble document. Il est suggéré de copier et coller les instructions curl suivantes sur la ligne de commande.

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

1. La première instruction curl crée le player et attribue un nom et une description. Après avoir collé cette instruction sur la ligne de commande et appuyé sur Entrer, 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 le serveur retourner 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. Voir votre player en utilisant une (ou toutes) des valeurs suivantes (à ce stade, il n'y a pas de vidéo dans player, mais vous pouvez publier une vidéo en utilisant votre nouvelle création player en utilisant Studio):
   • Copiez le url dans un navigateur pour voir votre player.
   • Copiez le embed_code dans une page HTML pour afficher votre player dans un iframe. Pour que cela fonctionne correctement, la page contenant l'iframe doit être servie à partir d'un serveur HTTP réel.
   • La embed_in_page l'utilisation de la fonctionnalité est détaillée dans le Options disponibles pour le code incorporé avancé (sur la page) document.

Mettre à jour un player

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

1. Dans le JSON renvoyé par player création d'un id la valeur était affichée. Copiez ceci dans un PLAYER_ID variable d'environnement.

           export PLAYER_ID=YourPlayerID
           
           

2. Pour mettre à jour le player vous utiliserez le HTTP PATCH méthode. Vous enverrez des données pour mettre à jour votre player. Vous définirez la autoplay Option 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 les données qui incluent le id , preview_url et preview_embed_code valeurs dans le 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 or preview_embed_code valeurs pour voir les changements dans votre playerconfiguration. Vous verrez que la lecture automatique est désormais vraie.
5. Vous allez maintenant publier le player pour le pousser à l'emplacement correct pour 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 que le player est publié, vous aurez players qui diffèrent des versions d'aperçu. Les versions publiées diffèrent des versions d'aperçu sur ces points:

   • Le JavaScript et le CSS sont minifiés, concaténés et intégrés dans le player directement.
   • Une version basse résolution de l'image de l'affiche est générée et intégrée dans la page pour améliorer les temps de chargement perçus sur les réseaux ayant un temps de configuration des demandes élevé (c.-à-d. Les réseaux de données cellulaires).
   • La version précédente du player est enregistré afin qu'il puisse être récupéré si des problèmes sont découverts après la mise à jour live.
6. Vérifiez que la réponse JSON de la publication du player apparaît 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'un des player implémentations pour être sûr que votre publié player fonctionne correctement.

Personnalisez un player

Vous pouvez personnaliser votre player en utilisant des plugins. Vous pouvez apprendre à inclure des plugins préexistants dans votre player ou construisez votre propre Pas à pas: 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 à l'existant player. 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, 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 affecter la source vidéo et l'image de l'affiche, vous utiliserez une instruction curl pour indiquer player ce qui suit:

• Emplacement du fichier JavaScript contenant le code du plug-in
• Emplacement de la feuille de style
• Le nom du plugin à utiliser avec le player

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 la mise à jour player. Il s'agit du même code de publication que vous avez utilisé dans la section précédente pour publier un player.

           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 est affiché.

   

Lorsqu'un plugin est ajouté à la player utilisant l' Player Management API, que ce soit un plugin fourni par Brightcove ou un plugin personnalisé que vous avez créé, le plugin fait partie du player code lui-même.

Afficher la configuration

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

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 la 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 de voir le playerLa configuration de est en parcourant la valeur URL renvoyée et en modifiant le index.html à config.json.

Delivery system APIs

La Delivery System APIs 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. La plupart des utilisateurs ne devraient pas avoir besoin de ces API lors de la création ou de la modification players, mais ils peuvent être un ensemble très intéressant d'API à utiliser à d'autres fins. Si vous souhaitez les essayer, vous pouvez faites-le ici. Pour une introduction pratique, essayez le Étape par étape: Delivesystème ry document.