Support Kontaktieren Sie Support | Systemstatus Systemstatus
Inhalt der Seite

    Video-Sitemap-Gener

    Dieses Beispiel zeigt, wie Sie mit der CMS-API eine Video-Sitemap erstellen können.

    Einführung

    Bevor Sie diese App verwenden, sollten Sie Making Your Video Content Indexable lesen, um den Zweck von Video-Sitemaps und Strategien zur Automatisierung der Generierung mit der CMS-API besser zu verstehen. Das Generieren des XML für die Sitemap ist ziemlich einfach. Die größte Herausforderung besteht darin, dass Sie für jedes Video eine eindeutige URL angeben müssen und die CMS API keinen automatischen Zugriff auf diese Informationen hat. Um dies zu überwinden, gibt es ein paar Dinge, die Sie tun können:

    1. Fügen Sie die URL, unter der das Video veröffentlicht wird, zu den Video-Metadaten hinzu. Am einfachsten wäre es, ein benutzerdefiniertes Metadatenfeld zu erstellen, in dem die URL gespeichert wird.
    2. Hosten Sie die Videos auf einer einzelnen Seite und geben Sie das Video mithilfe eines URL-Parameters an id oder reference_id Dieses benutzerdefinierte JavaScript auf der Seite wird verwendet, um das Video in den Player zu laden.

      Es gibt verschiedene Möglichkeiten, den Wert eines bestimmten URL-Parameters für die Seite abzurufen. Im Folgenden finden Sie eine Funktion, die wir in einigen unserer Beispiel-Apps verwenden:

                  /**
                   * 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, " "));
                  }

      Sobald Sie das id oder haben reference_id , müssen Sie es dem Player hinzufügen. Wie Sie das machen, hängt davon ab, ob Sie den Standard- (iframe) oder erweiterten (In-Page-) Einbettungscode verwenden. Wahrscheinlich ist das Einfachste und Sicherste zu Laden Sie den Player dynamisch (oder nicht, wenn aus irgendeinem Grund der URL-Parameter mit der ID nicht vorhanden ist).

      Ein Beispiel für eine einzelne Seite von HTML, die für diesen Zweck verwendet werden kann, ist ein Dokument im Abschnitt Einzelseite unten.

    Mit der folgenden Beispiel-App können Sie beide Methoden verwenden - Sie müssen sie nur mitteilen, indem Sie Informationen in die entsprechenden Felder eingeben.

    Hinweise zur Beispiel-App:

    1. Die App stellt eine Anfrage an die, die Videoaufrufe aller Zeiten Analytics API zu erhalten. Wenn die von Ihnen bereitgestellten Client-Anmeldeinformationen keine Berechtigungen für die Analytics-API enthalten, schlägt die App fehl.
    2. Die maximale Anzahl von Videos, die enthalten sein können, beträgt 50.000, und es gibt auch eine Beschränkung von 50 MB für die Dateigröße, die Sie möglicherweise mit weniger als 50.000 Videos treffen. Wenn Sie mehr Videos als diese einschließen müssen, müssen Sie sie in mehrere Sitemaps aufteilen und eine Sitemap-Indexdatei hinzufügen. Weitere Informationen finden Sie in der Sitemap-Dokumentation von Google .
    3. Die von der Beispiel-App erzeugte Sitemap enthält keine der optionalen Tags für Videos (siehe oben verwiesen Google-Dokument für Informationen). Wenn Sie diese hinzufügen möchten, können Sie den Code aus dieser App entnehmen und eine modifizierte Version erstellen. Es gibt Kommentare im JavaScript- und HTML-Code, die angeben, was Sie tun müssen.
      Optionale Tags enthalten oder nicht
      Schlagworte eingeschlossen Tags nicht im Lieferumfang enthalten
      • player_loc
      • duration
      • expiration_date (falls zutreffend)
      • view_count
      • publication_date
      • family_freundlich
      • (Geo) Beschränkung (falls zutreffend)
      • content_loc
      • rating
      • Plattform
      • Preis
      • requires_abonnement
      • Uploader
      • live
      • tag
      • Kategorie
      • gallery_loc
    4. Videos werden wie folgt übersprungen, wenn sie die erforderlichen Bedingungen nicht erfüllen:
      • Wenn Sie die URL der Videoseite in einem benutzerdefinierten Feld speichern, kann jedes Video, das keinen Wert für dieses benutzerdefinierte Feld hat
      • Wenn Sie eine einzelne Seite zum Hosten Ihrer Videos verwenden und diese verwenden, reference_id um sie aufzunehmen, und dem Video fehlt ein reference_id
      • Das Video hat kein Thumbnail-Bild
      • Das Video hat keine MP4-Formatvariante
      • Das Video ist inaktiv
      • Das Video soll zu einem zukünftigen Datum beginnen
      • Das Video sollte vor dem aktuellen Datum enden

      Beachten Sie, dass ich für jedes übersprungene Video eine Meldung an die Browserkonsole protokolliere, in der der Grund und die Video-ID angegeben sind.

    Wenn Sie Ihre Sitemap nach der Erstellung validieren möchten, gibt es im Internet mehrere kostenlose Tools, um dies zu tun - zum Beispiel:

    Kostenloser Sitemap-Validator

    Anmeldedaten abrufen

    Um das zu verwenden, benötigen CMS API Sie die richtigen Anmeldeinformationen.

    Der einfachste Weg, um Anmeldeinformationen zu erhalten, ist in den meisten Fällen der Abschnitt Studio-Admin-API-Authentifizierung (erfordert Administratorberechtigungen für Ihr Konto). Weitere Informationen finden Sie unter Verwalten von API-Authentifizierungsanmel In den meisten Fällen möchten Sie wahrscheinlich nur Berechtigungen für alle CMS API Operationen erhalten:

    CMS API Berechtigungen
    CMS API Berechtigungen

    Wenn die von Ihnen benötigten Berechtigungen in Studio nicht verfügbar sind oder wenn Sie sie lieber direkt aus der OAuth-API beziehen möchten, verwenden Sie die unten aufgeführten Dokumente Ihrer Wahl für Client-Anmeldeinformationen . Für welche Option Sie sich auch entscheiden, Sie müssen nach den korrekten Betriebsberechtigungen fragen. Folgendes kann mit cURL, Postman oder unserer Online-App verwendet werden, um alle Berechtigungen für die CMS-API zu erhalten:

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

    Beispiel-App

    Quellcode

    Finden Sie den gesamten mit diesem Beispiel verknüpften Code in diesem GitHub-Repository.

    Beispiel-App

    Siehe das CMS API Stift-Beispiel: Video Sitemap Generator von Brightcove Learning Services ( rcrooks1969 ) auf CodePen.

    Verwenden des CodePen

    Hier sind einige Tipps, um das obige CodePen effektiv zu nutzen:

    • Schalten Sie die tatsächliche Anzeige des Players ein, indem Sie auf die Schaltfläche Ergebnis klicken.
    • Klicken Sie auf die Tasten HTML/CSS/JS , um EINEN der Codetypen anzuzeigen.
    • Klicke auf CodePen in der oberen rechten Ecke auf Bearbeiten , um diesen CodePen in dein eigenes Konto einzufügen.
    • Finden Sie den gesamten mit diesem Beispiel verknüpften Code in diesem GitHub-Repository.

    Einzelne Seite

    Wie oben erwähnt, können Sie eine HTML-Seite erstellen, die für den Speicherort jedes Videos verwendet werden kann. Die App ändert die URL für die Seite mithilfe eines Abfrageparameters, der die Video-ID definiert, die die Seite verwenden soll. Zum Beispiel generiert die App JSON, die Standort-URLs ähnlich den folgenden für den Speicherort der Videoseiten enthält:

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

    Beachten Sie, dass sich nur die Video-ID ändert.

    Die eigentliche HTML-Seite liest den VideoID-URL-Parameter und generiert dann dynamisch einen Player mit der von der URL erhaltenen Video-ID. Die gesamte HTML-Seite wird wie folgt angezeigt:

                <!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>

    Sie müssen Ihre Kontonummer eingeben. Eine vollständige Erklärung des Codes finden Sie im Brightcove Player Sample: Das Player-Dokument wird dynamisch geladen .

    Proxy-Code

    Um Ihre eigene Version der Beispiel-App auf dieser Seite zu erstellen, müssen Sie Ihren eigenen Proxy erstellen und hosten. (Die von Brightcove Learning Services verwendeten Proxys akzeptieren nur Anfragen von Brightcove-Domänen.) Ein Beispiel-Proxy, der dem von uns verwendeten sehr ähnlich ist, aber ohne die Prüfungen, die Anfragen von Nicht-BrightCove-Domänen blockieren, kann in diesem GitHub-Repositorygefunden werden. Dort finden Sie auch grundlegende Anweisungen zur Verwendung und eine ausführlichere Anleitung zum Erstellen von Apps rund um den Proxy unter Using the REST APIs.


    Seite zuletzt aktualisiert am 28 Sep 2020