Schritt für Schritt: Spieler-Management

Einleitung

In diesem Schritt-für-Schritt-Dokument führen Sie die folgenden Aufgaben durch:

• Spieler erstellen
• Aktualisieren Sie den Player, um das Video automatisch abzuspielen
• Passen Sie einen Player an, indem Sie ein Plugin hinzufügen
• Anzeige der Konfiguration für einen Spieler

Loslegen

Der Ansatz in diesem Schritt-für-Schritt-Dokument besteht darin, curl-Anweisungen zu verwenden, um mit der Player-Dienst-API zu kommunizieren. Das curl-Tool wird in der Befehlszeile verwendet, um Daten mit URL-Syntax zu übertragen. Weitere Informationen über curl erhalten Sie unter https://curl.haxx.se.

Der Einfachheit halber müssen Sie Curl sicherlich nicht wie in diesem Schritt-für-Schritt-Dokument verwenden. Sie können natürlich Ihre Lieblingssprache verwenden, um mit den APIs zu kommunizieren. Besuche die Setup für Spielermanagement-Beispiele Dies zeigt, wie Sie die Basisauthentifizierung, AJAX und JavaScript verwenden, um einige Mini-Apps für grundlegende Aufgaben wie das Erstellen eines Players, das Anzeigen aller Ihrer Player, das Löschen von Playern usw. zu schreiben.

Bevor Sie mit der Verwendung der API beginnen können, sind einige vorbereitende Schritte erforderlich. Diese sind:

• Anmeldung im Studio. Wenn Sie mehrere Konten haben, verwenden Sie das Dropdown-Menü, um das Konto auszuwählen, in dem Sie Ihre neuen Spieler erstellen möchten. Damit das Anmeldesystem ordnungsgemäß funktioniert, müssen Sie über Administratorrechte für dieses Konto verfügen. Wenn Sie sich nicht sicher sind, ob ein Benutzer über Administratorrechte verfügt, rufen Sie die Seite Benutzereinstellungen auf, um die Liste der Benutzer mit ihrer Rolle anzuzeigen.
• Stellen Sie in Studio sicher, dass Sie ausgewählt haben HEIMAT aus den Modullisten. In der oberen linken Ecke der Seite, direkt unter dem Kontonamen, können Sie Ihre Konto-ID.

  

• Geben Sie in der Befehlszeile Folgendes ein, um den Wert für die Konto-ID einer Umgebungsvariablen zuzuweisen:

          export ACCOUNT_ID=YourAccountID
          
          

• Die Authentifizierung erfolgt durch Angabe Ihrer Konto-E-Mail-Adresse als Teil der curl-Anweisung, und dann fordert die API Sie zur Eingabe eines Passworts auf. Da die E-Mail-Adresse häufig verwendet wird, weisen Sie diesen Wert auch einer Umgebungsvariablen zu:

          export EMAIL=YourEmailAddress
          
          

Sie können jetzt mit der Verwendung der API beginnen.

Spieler erstellen

Sie können jetzt einen Player mit einem Aufruf an die Player Management API erstellen. Dieser API-Aufruf wird ausführlich im Übersicht über die Spielerverwaltungs-API dokumentieren. Es wird empfohlen, die folgenden curl-Anweisungen zu kopieren und in die Befehlszeile einzufügen.

Die folgenden Schritte helfen Ihnen beim Erstellen eines Players.

1. Die erste curl-Anweisung erstellt den Player und weist einen Namen und eine Beschreibung zu. Nachdem Sie diese Anweisung in die Befehlszeile eingefügt und gedrückt haben Eingeben werden Sie zur Eingabe Ihres Passworts aufgefordert.

           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
           

   Sie sehen, dass der Server Antwortdaten im JSON-Format zurückgibt:

           {
             "id": "S1qN4xeG7",
             "url": "https://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": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed",
             "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "https://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. Zeigen Sie Ihren Player an, indem Sie einen (oder alle) der folgenden Werte verwenden (derzeit befindet sich kein Video im Player, aber Sie können ein Video mit Ihrem neu erstellten Player mit Studio veröffentlichen):
   • Kopiere das url in einen Browser, um Ihren Player anzuzeigen.
   • Kopiere das embed_code in eine HTML-Seite, um Ihren Player in einem Iframe anzuzeigen. Damit dies richtig funktioniert, muss die Seite, die den iframe enthält, von einem tatsächlichen HTTP-Server bereitgestellt werden.
   • Die embed_in_page Die Verwendung der Funktion wird in der Verfügbare Optionen für den erweiterten (in-page) Einbettungscode dokumentieren.

Aktualisiere einen Spieler

Sie haben nun die Grundlagen zum Erstellen eines Players durchgeführt. Als Nächstes erfahren Sie, wie Sie ein einfaches Update des Players durchführen. In diesem Fall stellen Sie den Player so ein, dass er das Video im Player automatisch abspielt, sofern der Browser dies zulässt.

1. Im zurückgegebenen JSON von der Spielererstellung und id Wert angezeigt wurde. Kopieren Sie dies in a PLAYER_ID Umgebungsvariable.

           export PLAYER_ID=YourPlayerID
           
           

2. Um den Player zu aktualisieren, verwenden Sie das HTTP PATCH Methode. Sie senden Daten, um Ihren Player zu aktualisieren. Sie werden die autoplay Option zu true. Kopieren Sie die folgende Curl-Anweisung, fügen Sie sie ein und führen Sie sie aus.

           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. Stellen Sie sicher, dass der Server Daten zurückgibt, die die enthalten id , preview_url Und preview_embed_code Werte im folgenden JSON-Format:

           {
             "id": "S1qN4xeG7",
             "preview_url": "https://preview-players.brightcove.net/v2/accounts/1507807800001/players/S1qN4xeG7/preview/embeds/default/master/index.html",
             "preview_embed_in_page": "https://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. Verwenden Sie entweder die preview_url oder preview_embed_code Werte, um die Änderungen in der Konfiguration Ihres Players anzuzeigen. Sie werden sehen, dass Autoplay jetzt wahr ist.
5. Jetzt veröffentlichen Sie den Player, um ihn an den richtigen Speicherort zu verschieben, damit Benutzer ihn anzeigen können. Geben Sie den folgenden Befehl ein:

           curl \
           --header "Content-Type: application/json" \
           --user $EMAIL \
           --request POST \
           https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish
           
           

   Sobald der Player veröffentlicht ist, haben Sie Player, die sich von den Vorschauversionen unterscheiden. Die veröffentlichten Versionen unterscheiden sich in folgenden Punkten von den Vorschauversionen:

   • JavaScript und CSS werden minimiert, verkettet und direkt in den Player eingebunden.
   • Eine Version des Posters mit niedriger Auflösung wird generiert und in die Seite eingefügt, um die wahrgenommenen Ladezeiten in Netzwerken mit einer hohen Anforderungsaufbauzeit (z. B. Mobilfunknetze) zu verbessern.
   • Die vorherige Version des Players wird gespeichert, damit sie wiederhergestellt werden kann, wenn nach dem Live-Schalten des Updates Probleme festgestellt werden.
6. Stellen Sie sicher, dass die JSON-Antwort vom Veröffentlichen des Players wie folgt aussieht:

           {
           "id": "S1qN4xeG7",
           "url": "https://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": "https://players.brightcove.net/1507807800001/S1qN4xeG7_default/in_page.embed"
           }
           
           

7. Verwenden Sie eine der Player-Implementierungen, um sicherzustellen, dass Ihr veröffentlichter Player ordnungsgemäß funktioniert.

Einen Spieler anpassen

Sie können Ihren Player mit Plugins anpassen. Sie können lernen, wie Sie bereits vorhandene Plugins in Ihren Player einbinden oder Ihre eigenen erstellen Schritt für Schritt: Plugin-Entwicklung.

In diesem Fall verwenden Sie ein sehr einfaches, bereits vorhandenes Plugin, um eine Textnachricht über das Video zu legen. Es folgt der Code für ein Plugin, das ein HTML-Absatz-Tag erstellt. Hinweis: Dem Absatz wird ein Klassenname und Text zugewiesen, dann wird er an den vorhandenen Player angehängt. Dieses Plugin existiert bereits für Ihre Bequemlichkeit und befindet sich unter //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);
        });
        
        

Der Absatz muss formatiert werden, um in diesem speziellen Fall schwarzen Text auf schwarzem Hintergrund zu verhindern. Die folgenden Stile werden auf den Klassennamen des Absatzes angewendet. Dieses Stylesheet existiert bereits für Ihre Bequemlichkeit und befindet sich unter //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;
        }
        
        

So wie Sie eine curl-Anweisung verwendet haben, um die Videoquelle und das Posterbild zuzuweisen, verwenden Sie eine curl-Anweisung, um dem Player Folgendes mitzuteilen:

• Speicherort der JavaScript-Datei, die den Code für das Plugin enthält
• Speicherort des Stylesheets
• Der mit dem Player zu verwendende Plugin-Name

1. Verwenden Sie die folgende curl-Anweisung, um das Plugin funktionsfähig zu machen.

           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. Verwenden Sie die folgende curl-Anweisung, um den aktualisierten Player zu veröffentlichen. Dies ist derselbe Veröffentlichungscode, den Sie im vorherigen Abschnitt verwendet haben, um einen Player zu veröffentlichen.

           curl \
             --header "Content-Type: application/json" \
             --user $EMAIL \
             --request POST \
             https://players.api.brightcove.com/v2/accounts/{account_id}/players/{player_id}/publish
           

3. Kopieren Sie die zurückgegebene URL und durchsuchen Sie sie. Sie werden sehen, dass das Plugin funktioniert und der Plugin-Text wird angezeigt.

   

Wenn dem Player mithilfe der Player-Verwaltungs-API ein Plug-in hinzugefügt wird, sei es ein von Brightcove bereitgestelltes Plug-in oder ein von Ihnen erstelltes benutzerdefiniertes Plug-in, wird das Plug-in Teil des Player-Codes selbst.

Anzeigekonfiguration

Um Fehler zu beheben und die von Ihnen durchgeführte Arbeit zu bestätigen, ist es oft hilfreich, die Konfiguration eines Players anzuzeigen.

1. Verwenden Sie dazu a GET Methode mit der 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. Stellen Sie sicher, dass die JSON-Konfigurationsantwort wie folgt aussieht:

           {
             "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"
             }]
           }
           

Eine andere Möglichkeit, sich die Konfiguration des Players anzusehen, besteht darin, den zurückgegebenen URL-Wert zu durchsuchen und die index.html zu config.json.

Liefersystem-APIs

Die Delivery System APIs ermöglichen die Verwaltung und Bereitstellung einer Gruppe von Dateien, die als Repository bezeichnet werden. Diese Dateien werden über REST-APIs und über git verwaltet. Diese APIs sollten von den meisten Benutzern beim Erstellen oder Bearbeiten von Playern nicht benötigt werden, aber sie können eine sehr interessante Gruppe von APIs sein, die für andere Zwecke verwendet werden können. Wenn du sie ausprobieren möchtest, kannst du das hier tun. Probieren Sie für eine praktische Einführung die Schritt für Schritt: Liefersystem dokumentieren.