Paper Contacter le support | état du système L'état du système
Contenu de la page

    Pas à pas: Player des programmes

    Ce document fournit une introduction pratique aux opérations de base du logiciel Player Management API.

    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é HOME à 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.
      Identifiant du compte à copier
    • 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.
      • Le système 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.

    Video Cloud vidéos

    Bien sûr, vous pouvez créer un player en utilisant une vidéo de votre Video Cloud bibliothèque. Au lieu d'utiliser un media section dans les données JSON, vous utilisez un video_cloud section. La déclaration curl ci-dessous montre player création à l'aide d'un Video Cloud ID de la vidéo.

            curl \
              --header "Content-Type: application/json" \
              --user $EMAIL \
              --request POST \
              --data '{
                "name": "Video Cloud CURL 10 March",
                "configuration": {
                  "video_cloud": {
                    "video": "4093372393001"
                  }
                }
              }' \
            https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players
            

    La réponse est logiquement équivalente à la réponse lors de la création d'un player en utilisant media / sources / src Comme montré ci-dessus.

            {
            "id": "HJyMlHiuZ",
            "url": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html",
            "embed_code": "<iframe src="//players.brightcove.net/1507807800001/HJyMlHiuZ_default/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>",
            "embed_in_page": "http://players.brightcove.net/1507807800001/HJyMlHiuZ_default/in_page.embed",
            "preview_url": "http://preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html",
            "preview_embed_code": "<iframe src="//preview-players.brightcove.net/v1/accounts/1507807800001/players/HJyMlHiuZ/preview/embeds/default/master/index.html" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>"
            }
            
            

    Tu peux voir le playerconfiguration en parcourant la valeur URL renvoyée et modifiez la index.html à config.json. Pour l' player créé par l'instruction curl ci-dessus, vous verrez ce qui suit:

            {
              "account_id": "1507807800001",
              "compatibility": true,
              "embed_id": "default",
              "player": {
                "template": {
                  "name": "single-video-template",
                  "version": "6.5.0"
                }
              },
              "player_id": "HJyMlHiuZ",
              "player_name": "Video Cloud CURL 10 March",
              "updated_at": "2017-08-23T17:48:55.622Z",
              "video_cloud": {
                "policy_key": "BCpkADawqM2FnBS3InxzDxU4bd4otJdHKvexlXfhs_XgSj3jmBHAsV2xANIvSPd4KiakMbiQM5oYJPopOcJD7vNnPWGPGsnXCO3_ZGdjPmur53WV_a4JUPWHCLt5oiyekN44i24jZzHMB6hT",
                "video": "4093372393001"
              }
            }
            

    Le système policy_key est automatiquement ajouté au playerconfiguration. Ceci est créé en utilisant le Policy API, et cela permettra de placer des restrictions spéciales sur votre player pour accéder à différentes vidéos. En d'autres termes, la clé de stratégie contrôle les vidéos pouvant être visionnées à quel moment.

    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.
    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é.
      Texte du plugin
      Texte du plugin

    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.

    API du système de livraison

    Le système 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 Ste-by-Step: Système de livraison document.


    Dernière mise à jour de la page le 12 juin 2020