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

    Générateur de sitemap vidéo

    Cet exemple montre comment vous pouvez générer un sitemap vidéo en utilisant le CMS API.

    Introduction

    Avant d'utiliser cette application, vous devriez lire Rendre votre contenu vidéo indexable pour mieux comprendre le but des sitemaps vidéo et des stratégies d’automatisation de leur génération à l’aide de la CMS API. Générer le XML pour le sitemap est assez simple. Le plus gros défi est d’inclure une URL unique pour chaque vidéo, et le CMS API n'a pas automatiquement accès à cette information. Pour surmonter cela, vous pouvez faire plusieurs choses:

    1. Ajoutez l'URL où la vidéo est publiée aux métadonnées de la vidéo. Le moyen le 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 d'URL pour spécifier la vidéo. id or reference_id que JavaScript personnalisé dans la page utilisera pour charger la vidéo dans le player.

      Il existe différentes manières d'obtenir la valeur d'un paramètre d'URL spécifique pour la page. Vous trouverez ci-dessous 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 or reference_id, vous devez l'ajouter au player. La manière de procéder dépendra de l'utilisation de la norme (iframe) ou avancé (encart) player code intégré. La chose la plus simple et la plus sûre à faire est probablement de charger le player dynamiquement (ou non, si pour une raison quelconque l'URL param avec l'identifiant n'est pas présent).

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

    L'exemple d'application ci-dessous vous permet d'utiliser l'une ou l'autre méthode. Il vous suffit d'indiquer laquelle en saisissant des informations dans les champs appropriés.

    Notes sur l'exemple d'application:

    1. L'application fait une demande à la Analytics API pour obtenir les vues vidéo de tous les temps, donc si les informations d'identification du client que vous fournissez n'incluent pas les autorisations pour le Analytics API, l'application va échouer.
    2. Le nombre maximal de vidéos pouvant être incluses est 50,000. Il existe également une limite à la taille du fichier 50mb que vous pouvez utiliser avec moins de vidéos 50,000. Si vous avez plus de vidéos à inclure, vous devrez les scinder en plusieurs sitemaps et ajouter un fichier d'index de sitemap. Voir 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 la documentation Google référencée ci-dessus pour obtenir des informations à ce sujet). Si vous souhaitez les inclure, vous pouvez prendre le code de cette application et créer une version modifiée. Les codes JavaScript et HTML contiennent des commentaires indiquant ce que vous devez faire.
      Balises facultatives incluses ou non
      Tags inclus Tags non inclus
      • player_loc
      • durée
      • date d'expiration (le cas échéant)
      • nombre de vues
      • date de publication
      • conviviale et familiale
      • (géo) restriction (le cas échéant)
      • content_loc
      • évaluation
      • PLATEFORME
      • prix
      • requiert_abonnement
      • uploader
      • vivre
      • Étiquette
      • Catégorie
      • gallery_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 n'ayant pas de valeur pour ce champ personnalisé
      • Si vous utilisez une seule page pour héberger vos vidéos et utilisez le reference_id pour les inclure, et la vidéo manque 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 devrait commencer à une date ultérieure
      • La vidéo devait se terminer avant la date du jour.

      Notez que pour toute vidéo ignorée, je consigne un message sur la console du navigateur indiquant le motif et l'identifiant de la vidéo.

    Enfin, si vous souhaitez valider votre sitemap après l'avoir généré, vous disposez de plusieurs outils gratuits pour le faire sur le Web, par exemple:

    Validateur Sitemap gratuit

    Obtenir des informations d'identification

    Pour utiliser la 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 est d'utiliser la section Authentification de l'API Studio Admin (nécessite des autorisations d'administrateur sur votre compte). Voir Gestion des informations d'identification de l'API pour plus de détails. Dans la plupart des cas, vous souhaitez probablement obtenir des autorisations pour tous CMS API opération:

    CMS API Permission
    CMS API Permission

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

                  "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

    Trouver tout le code associé à cet exemple dans cette GitHub référentiel.

    Exemple d'application

    Voir le stylo CMS API Exemple: Générateur de sitemap vidéo par Brightcove Learning Services (@rcrooks1969) Sur CodePen.

    Utilisation du CodePen

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

    • Basculer l'affichage réel du player en cliquant sur le Le résultat .
    • Cliquez HTML / CSS / JS boutons pour afficher l'un des types de code.
    • Cliquez Modifier sur CodePen dans le coin supérieur droit pour bifurquer ce CodePen dans votre propre compte.
    • Trouver tout le code associé à cet exemple dans cette GitHub référentiel.

    Une seule page

    Comme mentionné ci-dessus, vous pouvez créer une page HTML pouvant être utilisée pour l'emplacement de chaque vidéo. L'application modifiera l'URL de la page en utilisant un paramètre de requête qui définit l'ID vidéo que la page doit utiliser. Par exemple, l'application générera un code JSON contenant des URL de localisation similaires aux 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 de la vidéo est en train de changer.

    La page HTML proprement dite lit le videoId Le paramètre URL génère ensuite dynamiquement un player en utilisant l'ID vidéo obtenu à partir de l'URL. La page HTML entière 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 indiquer votre numéro de compte. Pour une explication complète du code, voir le Brightcove Player Exemple: chargement du Player Dynamiquement document.

    Code de proxy

    Pour créer votre propre version de l'exemple d'application sur cette page, vous devez créer et héberger votre propre proxy. (Les proxys 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 vérifications qui bloquent les demandes des domaines non Brightcove, se trouve dans ce dépôt GitHub. Vous y trouverez également des instructions de base pour l’utiliser, ainsi qu’un guide plus élaboré sur la création d’applications autour du proxy dans Utilisation des API REST.


    Dernière mise à jour de la page le 24 août 2020