Support Kontakt Support | Systemstatus Systemstatus

Video-Sitemap-Generator

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

Einführung

Bevor Sie diese App verwenden, sollten Sie lesen Machen Sie Ihren Video Content indexierbar um ein besseres Verständnis für den Zweck von Video - Sitemaps und Strategien für die Automatisierung ihrer Generierung mithilfe von zu erhalten CMS API. Das Generieren der XML-Datei für die Sitemap ist recht einfach. Die größte Herausforderung besteht darin, dass Sie für jedes Video eine eindeutige URL angeben müssen CMS API hat keinen automatischen Zugriff auf diese Informationen. 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 wurde, zu den Video-Metadaten hinzu. Der einfachste Weg, dies zu tun, wäre, eine benutzerdefiniertes Metadatenfeld um die URL in zu speichern.
  2. Hosten Sie die Videos auf einer einzelnen Seite, indem Sie einen URL-Parameter zum Angeben des Videos verwenden id or reference_id Dieses benutzerdefinierte JavaScript auf der Seite wird verwendet, um das Video in das zu laden player.

    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 du das hast id or reference_idmüssen Sie es dem hinzufügen player. Wie Sie das tun, hängt davon ab, ob Sie den Standard verwenden (iframe) oder erweitert (in-page) player Code einbetten. Wahrscheinlich ist es am einfachsten und sichersten, dies zu tun Laden Sie die player dynamisch (oder nicht, wenn aus irgendeinem Grund der URL-Parameter mit der ID nicht vorhanden ist).

    Ein Beispiel für eine einzelne HTML-Seite, die für diesen Zweck verwendet werden kann, ist document in the Einzelne Seite Abschnitt unten.

Mit der folgenden Beispiel-App können Sie eine der beiden Methoden verwenden. Sie müssen nur angeben, welche Methode Sie verwenden möchten, indem Sie Informationen in die entsprechenden Felder eingeben.

Hinweise zur Beispiel-App:

  1. Die App stellt eine Anfrage an die Analytics API Um die Videoaufrufe aller Zeiten zu erhalten, enthalten die von Ihnen angegebenen Client-Anmeldeinformationen keine Berechtigungen für das Analytics API, wird die App fehlschlagen.
  2. Die maximale Anzahl von Videos, die aufgenommen werden können, ist 50,000 und es gibt auch eine 50mb-Beschränkung für die Dateigröße, die Sie möglicherweise mit weniger als 50,000-Videos erreichen. Wenn Sie mehr Videos aufnehmen möchten, müssen Sie diese in mehrere Sitemaps aufteilen und eine Sitemap-Indexdatei hinzufügen. Sehen Googles Sitemap-Dokumentation .
  3. Die von der Beispiel-App generierte Sitemap enthält einige der optionalen Tags für Videos nicht (Informationen dazu finden Sie im oben genannten Google-Dokument). Wenn Sie diese einbinden möchten, können Sie den Code aus dieser App entnehmen und eine geänderte Version erstellen. Der JavaScript- und HTML-Code enthält Kommentare, die angeben, was Sie tun müssen.
    Optionale Tags enthalten oder nicht
    Tags enthalten Tags nicht enthalten
    • player_loc
    • Dauer
    • Ablaufdatum (falls zutreffend)
    • view_count
    • Veröffentlichungsdatum
    • familienfreundlich
    • (geografische) Einschränkung (falls zutreffend)
    • content_loc
    • Wertung
    • Plattform
    • Preis
    • erfordert_abonnement
    • Uploader
    • leben
    • Etikett
    • 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, ist dies jedes Video, das keinen Wert für dieses benutzerdefinierte Feld hat
    • Wenn Sie eine einzelne Seite zum Hosten Ihrer Videos verwenden und die reference_id um sie einzuschließen, und dem Video fehlt ein reference_id
    • Das Video hat kein Vorschaubild
    • Das Video hat keine MP4-Wiedergabe
    • Das Video ist inaktiv
    • Das Video soll zu einem späteren Zeitpunkt starten
    • Das Video sollte vor dem aktuellen Datum enden

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

Wenn Sie Ihre Sitemap nach dem Generieren validieren möchten, stehen Ihnen im Web verschiedene kostenlose Tools zur Verfügung, zum Beispiel:

Kostenloser Sitemap Validator

Anmeldedaten erhalten

So verwenden Sie die CMS API Sie benötigen ordnungsgemäße Anmeldeinformationen.

Der einfachste Weg, um Anmeldeinformationen in den meisten Fällen zu erhalten, ist über den Bereich "Studio Admin API Authentication" (erfordert Administratorberechtigungen für Ihr Konto). Sehen API-Authentifizierungsdaten verwalten für Details. In den meisten Fällen möchten Sie wahrscheinlich nur Berechtigungen für alle erhalten CMS API Operation:

CMS API Berechtigungen
CMS API Berechtigungen

Wenn die von Ihnen benötigten Berechtigungen in Studio nicht verfügbar sind oder wenn Sie sie direkt von der OAuth API, benutze deine Wahl der Erhalten Sie Clientanmeldeinformationen unten aufgeführte Dokumente. 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:

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

Beispiel-App

Hier finden Sie den gesamten mit diesem Beispiel verbundenen Code GitHub-Repository.

Sieh den Stift CMS API Beispiel: Video-Sitemap-Generator von Brightcove Learning Services (@ rcrooks1969) Auf CodePen.

Verwenden des CodePen

Hier sind einige Tipps, um den oben genannten CodePen effektiv zu nutzen:

  • Schalten Sie die tatsächliche Anzeige des um player durch Klicken auf Ergebnis klicken.
  • Klicken Sie auf die HTML / CSS / JS Schaltflächen, um einen der Codetypen anzuzeigen.
  • Eine detaillierte Auf CodePen bearbeiten in der oberen rechten Ecke, um diesen CodePen in Ihr eigenes Konto einzugeben.
  • Hier finden Sie den gesamten mit diesem Beispiel verbundenen Code GitHub-Repository.

Einzelne Seite

Wie oben erwähnt, können Sie eine HTML-Seite erstellen, die für die Position 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. Die App generiert beispielsweise JSON, das Standort-URLs für den Standort der Videoseiten enthält, die den folgenden ähneln:

            <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 die videoId Der URL-Parameter generiert dann dynamisch a player unter Verwendung der von der URL erhaltenen Video-ID. Die gesamte HTML-Seite sieht wie folgt aus:

            <!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 in der Brightcove Player Beispiel: Laden der Player Dynamisch Dokument.

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 Anforderungen von Brightcove-Domänen.) Ein Beispiel-Proxy, der dem von uns verwendeten sehr ähnlich ist, jedoch ohne die Überprüfungen, die Anforderungen von Nicht-Brightcove-Domänen blockieren, befindet sich in Dieses GitHub-Repository. Dort finden Sie auch grundlegende Anweisungen zur Verwendung und eine ausführlichere Anleitung zum Erstellen von Apps rund um den Proxy in Verwenden der REST-APIs.


Seite zuletzt aktualisiert am 12. Juni 2020