assistance Contacter le support | Étatétat du système du système
Contenu de la page

    Générateur de plan du site vidéo

    Cet exemple montre comment générer un sitemap vidéo à l'aide de l'API CMS.

    Introduction

    Avant d'utiliser cette application, vous devez lire Making Your Video Content Indexable pour mieux comprendre l'objectif des sitemaps vidéo et des stratégies pour automatiser leur génération à l'aide de l'API CMS. La génération du XML pour le sitemap est assez simple. Le plus grand défi est que vous devez inclure une URL unique pour chaque vidéo, et l' CMS API n'a pas accès automatique à ces informations. Pour surmonter cela, il y a quelques choses que vous pouvez faire :

    1. Ajoutez l'URL où la vidéo est publiée dans les métadonnées vidéo. La façon la plus simple de le faire serait de créer un champ de métadonnées personnalisé pour stocker l'URL dans.
    2. Hébergez les vidéos sur une seule page, en utilisant un paramètre URL pour spécifier la vidéo id ou reference_id que JavaScript personnalisé dans la page utilisera pour charger la vidéo dans le lecteur.

      Il existe différentes façons d'obtenir la valeur d'un paramètre d'URL spécifique pour la page. Voici une fonction que nous utilisons dans certains de nos exemples d'applications :

                  /**
                   * gets value of a URL param on current page URL if exists
                   * @param {string} name the param you want the value of
                   * @return {string} result value of param if exists or null
                   */
                  function getURLparam(name) {
                      var regex,
                          results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                  }

      Une fois que vous avez le id ou reference_id , vous devez l'ajouter au joueur. La façon dont vous faites cela dépendra si vous utilisez le code d'intégration du lecteur standard (iframe) ou avancé (dans la page). Probablement la chose la plus simple et la plus sûre à faire est de charger le lecteur dynamiquement (ou non, si pour une raison quelconque le paramètre d'URL avec l'identifiant n'est pas présent).

      Un exemple d'une seule page de HTML pouvant être utilisée à cette fin est le document dans la section Page unique ci-dessous.

    L'exemple d'application ci-dessous vous permet d'utiliser l'une ou l'autre méthode - il suffit de lui dire laquelle en entrant des informations dans les champs appropriés.

    Remarques sur l'exemple d'application :

    1. L'application envoie une demande Analytics API à l'pour obtenir les vues vidéo de tous les temps. Par conséquent, si les informations d'identification client que vous fournissez n'incluent pas les autorisations pour l'API Analytics, l'application échouera.
    2. Le nombre maximal de vidéos pouvant être incluses est de 50 000 et il y a aussi une limite de 50 Mo à la taille du fichier, que vous pouvez atteindre avec moins de 50 000 vidéos. Si vous avez plus de vidéos que cela à inclure, vous devrez les diviser en plusieurs sitemaps et ajouter un fichier d'index sitemap. Consultez la documentation du sitemap de Google pour plus d'informations.
    3. Le sitemap généré par l'exemple d'application n'inclut pas certaines des balises facultatives pour les vidéos (voir le document Google référencé ci-dessus pour plus d'informations à leur sujet). Si vous souhaitez les inclure, vous pouvez prendre le code de cette application et créer une version modifiée. Il y a des commentaires dans le code JavaScript et HTML pour indiquer ce que vous devez faire.
      Étiquettes facultatives incluses ou non
      Étiquettes incluses Étiquettes non incluses
      • player_loc
      • duration
      • expiration_date (le cas échéant)
      • view_count
      • publication_date
      • familial_friendly
      • (géo) restriction (le cas échéant)
      • content_loc
      • rating
      • plate-forme
      • prix
      • requires_abonnement
      • gestionnaire d'upload
      • en direct
      • tag
      • catégorie
      • galerie_loc
    4. Les vidéos seront ignorées si elles ne remplissent pas les conditions nécessaires, comme suit :
      • Si vous stockez l'URL de la page vidéo dans un champ personnalisé, toute vidéo qui n'a pas de valeur pour ce champ personnalisé
      • Si vous utilisez une seule page pour héberger vos vidéos, et que vous utilisez le reference_id pour les inclure, et que la vidéo n'a pas un reference_id
      • La vidéo n'a pas d'image miniature
      • La vidéo n'a pas de rendu MP4
      • La vidéo est inactive
      • La vidéo est prévue pour commencer à une date ultérieure
      • La vidéo devait se terminer avant la date actuelle

      Notez que pour toute vidéo ignorée, j'enregistre un message sur la console du navigateur indiquant la raison et l'identifiant vidéo.

    Enfin, si vous voulez valider votre sitemap après l'avoir généré, il existe plusieurs outils gratuits sur le web pour le faire - par exemple :

    Validateur gratuit de plan du site

    Obtenir des informations

    Pour utiliser le, CMS API vous aurez besoin d'informations d'identification appropriées.

    Le moyen le plus simple d'obtenir des informations d'identification dans la plupart des cas consiste à utiliser la section Authentification de l'API d'administration Studio (nécessite des autorisations d'administrateur sur votre compte). Pour plus de détails, reportez-vous à Gestion des informations d'authentification API Dans la plupart des cas, vous voulez probablement juste obtenir des autorisations pour toutes les CMS API opérations :

    Autorisations API CMS
    Autorisations API CMS

    Si les autorisations dont vous avez besoin ne sont pas disponibles dans Studio, ou si vous préférez les obtenir directement à partir de l'API OAuth, utilisez les documents Obtenir les informations d'identification du client répertoriés ci-dessous. Quelle que soit l'option que vous choisissez, vous devrez demander les autorisations d'opération correctes. Les éléments suivants peuvent être utilisés avec cURL, Postman ou notre application en ligne pour obtenir toutes les autorisations pour l'API CMS :

                  "operations": [
                    "video-cloud/video/all",
                    "video-cloud/playlist/all",
                    "video-cloud/sharing-relationships/all",
                    "video-cloud/notifications/all"
                    "video-cloud/analytics/read"
                  ]

    Exemple d'application

    Code source

    Trouvez tout le code associé à cet exemple dans ce dépôt GitHub.

    Exemple d'application

    Voir l' CMS API exemple de stylo : Générateur de plan de site vidéo par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

    Utilisation du CodePen

    Voici quelques conseils pour utiliser efficacement le CodePen ci-dessus :

    • Basculez l'affichage réel du joueur en cliquant sur le bouton Résultat .
    • Cliquez sur les boutons HTML/CSS/JS pour afficher L'UN des types de code.
    • Cliquez sur Modifier sur CodePen dans le coin supérieur droit pour incorporer ce CodePen dans votre propre compte.
    • Trouvez tout le code associé à cet exemple dans ce dépôt GitHub.

    Une seule page

    Comme mentionné ci-dessus, vous pouvez créer une page HTML qui peut être utilisée pour l'emplacement de chaque vidéo. L'application modifie l'URL de la page à l'aide d'un paramètre de requête qui définit l'ID vidéo que la page doit utiliser. Par exemple, l'application génère JSON contenant des URL de localisation similaires à celles suivantes pour l'emplacement des pages vidéo :

                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5984663997001]]>
                </loc>
                ...
                <loc>
                    <![CDATA[http://my.site.net/videos.html?videoId=5982130568001]]>
                </loc>

    Notez que seul l'ID vidéo est en train de changer.

    La page HTML réelle lit le paramètre d'URL VideoID puis génère dynamiquement un lecteur à l'aide de l'ID vidéo obtenu à partir de l'URL. Toute la page HTML apparaît comme suit :

                <!doctype html>
                <html>
                
                <head>
                  <meta charset="UTF-8">
                  <title>Load Player Dynamically from URL Param</title>
                  <!-- Page styles -->
                  <style>
                    .video-js {
                      width: 640px;
                      height: 360px;
                    }
                  </style>
                </head>
                
                <body>
                  <div id="placeHolder"></div>
                  <!-- custom script -->
                  <script type="text/JavaScript">
                    var myPlayer,
                      playerHTML,
                      playerData = {},
                      theURLParam = '',
                      // Set the account ID to your account
                      myAccountId = '1507807800001';
                
                     // Read URL param for video ID
                    theURLParam = geturlparam('videoId');
                
                    // Assign data for the player instantiation
                    playerData = {
                      'accountId': myAccountId,
                      'playerId': 'default',
                      'videoId': theURLParam
                    };
                
                    // Call function that builds player
                    addPlayer();
                
                    /**
                     * gets value of a url param on current page url if exists
                     * @param {string} name the param you want the value of
                     * @return {string} result value of param if exists or null
                     */
                    function geturlparam(name) {
                      var regex,
                        results;
                      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                      regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
                      results = regex.exec(location.search);
                      return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
                    };
                
                    // Dynamically adds player to page
                    function addPlayer() {
                      // Dynamically build the player video element
                      playerHTML = '<video-js id=\"myPlayerID\" data-video-id=\"' + playerData.videoId + '\"  data-account=\"' + playerData.accountId + '\" data-player=\"' + playerData.playerId + '\" data-embed=\"default\" class=\"video-js\" controls></video-js>';
                      // Inject the player code into the DOM
                      document.getElementById('placeHolder').innerHTML = playerHTML;
                      // Add and execute the player script tag
                      var s = document.createElement('script');
                      s.src = "https://players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";
                      document.body.appendChild(s);
                      s.onload = callback;
                    }
                
                     // Initialize the player and start the video
                    function callback() {
                      myPlayer = bc('myPlayerID');
                      // Can also use the following to assign a player instance to the variable if you choose not to use IDs for elements directly
                      // myPlayer = bc(document.getElementById('myPlayerID'));
                      myPlayer.on('loadedmetadata', function () {
                        // Mute the audio track, if there is one, so video will autoplay on button click
                        myPlayer.muted(true);
                        myPlayer.play();
                      })
                    }
                  </script>
                </body>
                
                </html>

    Vous devrez inscrire votre numéro de compte. Pour une explication complète du code, consultez l' exemple de lecteur Brightcove : Chargement dynamique du document Player .

    Code proxy

    Afin de construire votre propre version de l'exemple d'application sur cette page, vous devez créer et héberger votre propre proxy. (Les proxy utilisés par Brightcove Learning Services acceptent uniquement les demandes des domaines Brightcove.) Un exemple de proxy, très similaire à celui que nous utilisons, mais sans les contrôles qui bloquent les demandes provenant de domaines non-BrightCove, peut être trouvé dans ce dépôt GitHub. Vous trouverez également des instructions de base pour l'utiliser là-bas, ainsi qu'un guide plus élaboré pour créer des applications autour du proxy dans Utilisation des API REST.