Testen der Player- / Plugin-Version

In diesem Thema erfahren Sie, wie Sie einen Player einer bestimmten Version erstellen und diese Version des Players dann mit einem Plugin testen.

Einleitung

Brightcove Player-Plug-ins können Ihre eigenen Kreationen sein oder von Brightcove bereitgestellte Plug-ins. Sie erhalten drei Testoptionen:

Verwenden von Studio zum Erstellen eines Players und Hinzufügen des Plugins und der Konfigurationen.
Verwenden Sie Studio, um den Player zu erstellen, und fügen Sie dann in HTML programmgesteuert das Plugin hinzu.
Verwenden der Player Management API und locken. Das locken Das Tool wird in der Befehlszeile verwendet, um die Player-Verwaltungs-API zu nutzen. Eine Einführung in die Verwendung von Curl finden Sie in der Schnellstart: Spielerverwaltung dokumentieren. Wenn Sie mit HTTP-Client-Tools vertraut sind, wie z Postbote können sie auch verwendet werden. Der Vorteil dieses Ansatzes besteht darin, dass Sie eine beliebige Version des gewünschten Players auswählen können, nicht nur die, die in Studio verfügbar sind.

Testen der Vorabversionen des Brightcove-Plugins

Manchmal stellt Brightcove Vorabversionen bestimmter Plugins zur Verfügung. Sie können die Anweisungen in diesem Dokument verwenden, um sicherzustellen, dass Ihr Brightcove Player und andere Plugins mit der Vorabversion funktionieren.

Verwenden von Studio

In den folgenden Schritten werden Sie durch den Prozess der Verwendung von Studio zum Erstellen eines Players und zum Hinzufügen eines Plugins zum Testen zum Player geführt.

Öffnen Sie das PLAYERS-Modul und erstellen Sie entweder einen neuen Player oder suchen Sie den Player, dem Sie das Plugin hinzufügen möchten.
Klicken Sie auf den Link für den Spieler, um die Eigenschaften des Spielers zu öffnen.
Klicken Plugins im linken Navigationsmenü.
Klicken Plugin hinzufügen und wählen Sie Benutzerdefiniertes Plugin.
Für die Plugin Name Geben Sie den Namen des gewünschten Plugins ein.
Wenn Sie ein Brightcove-Pre-Release-Plug-in testen, werden die URLs für JavaScript und CSS bereitgestellt.
Geben Sie die gewünschten Plugins ein JavaScript URL.
Geben Sie die gewünschten Plugins ein CSS URL.
Geben Sie ggf. die Konfigurationsoptionen für das gewünschte Plugin ein.
Klicken Sie auf Speichern.
Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.

Sie können jetzt ein Video mit dem neu konfigurierten Player veröffentlichen und das Plugin testen.

Fügen Sie das Plugin programmgesteuert hinzu

In diesem Abschnitt des Dokuments erstellen Sie den Player in Studio und fügen das Plugin mithilfe von Code in eine HTML-Seite ein.

Wählen Sie in Studio das PLAYERS Modul aus.
Erstellen Sie einen neuen Player mit der gewünschten Version aus der Dropdown-Liste.
Gehe zum MEDIEN Modul und veröffentlichen Sie ein Video.
Kopiere das Fortgeschrittene Implementierungscode (in die Seite einbetten).
Fügen Sie den Player-Code in eine HTML-Seite ein.
Fügen Sie den Pfad zur CSS-Datei mithilfe eines HTML-Codes hinzu <link> Etikett.
Fügen Sie den Pfad zur JavaScript-Datei mithilfe von HTML hinzu <script> Etikett.
Sobald der Player bereit ist, rufen Sie das Plugin auf und übergeben Sie alle Optionen.

Das Folgende zeigt einen allgemeinen Überblick über den benötigten Code:

<!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Testing a plugin</title>
    <link href="//url_to_my_css/my.css" rel="stylesheet">
  </head>

  <body>

    <video-js id="myPlayerID"
      data-video-id="5350958927001"
      data-account="1507807800001"
      data-player="rJeuIHdbmW"
      data-embed="default"
      data-application-id=""
      controls=""></video-js>
    <script src="https://players.brightcove.net/1507807800001/rJeuIHdbmW_default/index.min.js"></script>

    <script src="//url_to_my_js/my.js"></script>

    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this,
        options = {};
        options.prop1 = "value1";
        options.prop2 = "value2";

        myPlayer.pluginName(options);
      });
    </script>

  </body>

  </html>

Sie können jetzt diese Seite durchsuchen, um Ihr Plugin zu testen.

Verwenden von Curl und der Player Management API

In diesem Abschnitt des Dokuments erfahren Sie, wie Sie Curl verwenden und die Player-Verwaltungs-API nutzen können, um ein Plugin mit einem Player zu testen. Der Vorteil dieses Ansatzes besteht darin, dass Sie eine beliebige Version des gewünschten Players auswählen können, nicht nur die, die in Studio verfügbar sind.

Spieler erstellen

Sie haben jetzt erfolgreich einen Player einer bestimmten Version erstellt.

Erstellen Sie eine Testseite

Nachdem Ihr Player erstellt wurde, möchten Sie Ihr Plugin damit testen. Die Schritte in diesem Abschnitt führen Sie durch die erweiterte Implementierung des Player-Codes und den Test mit Ihrem Plugin.

Wie in der Schritt für Schritt: Spielerverwaltung Dokument möchten Sie Umgebungsvariablen für Folgendes einrichten:
- Deine E-Mail
```
export EMAIL=YourEmailAddress
```
- Deine Kontonummer
```
export ACCOUNT_ID=YourAccountID
```
- Ihre Spieler-ID, sobald der Spieler erstellt wurde
```
export PLAYER_ID=MyPlayerID
```
In Curl verwenden Sie die Variable, der ein vorangestellt ist $ , wie so: $EMAIL

So erstellen Sie einen Player mit dem Namen Sechs-Oh-Spieler mit Version 6.0.0 Sie würden die folgende Curl-Anweisung in das Terminal einfügen (im folgenden Screenshot gelb hervorgehoben):

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request POST \
  --data '{
      "name": "six-oh player",
      "configuration": {
        "player": {
          "template": {
            "name": "single-video-template",
            "version": "6.0.0"
          }
        }
      }
    }' \
    https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

Nach dem Drücken Eingeben Sie werden aufgefordert, Ihr Brightcove-Passwort einzugeben, das Sie eingeben werden (im folgenden Screenshot rot hervorgehoben).

Schließlich gibt die Player-Verwaltungs-API Player-Informationen zu dem Player zurück, den Sie gerade im JSON-Format erstellt haben (im folgenden Screenshot grün hervorgehoben).

Der besser formatierte Player JSON wird hier gezeigt:

{
  "id": "B1JOH9o0e",
  "url": "https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.html",
  "embed_code": "<iframe src='//players.brightcove.net/1507807800001/B1JOH9o0e_default/index.html' allowfullscreen allow='encrypted-media'></iframe>",
  "embed_in_page": "https://players.brightcove.net/1507807800001/B1JOH9o0e_default/in_page.embed",
  "preview_url": "https://preview-players.brightcove.net/v1/accounts/1507807800001/players/B1JOH9o0e/preview/embeds/default/master/index.html",
  "preview_embed_code": "<iframe src='//preview-players.brightcove.net/v1/accounts/1507807800001/players/B1JOH9o0e/preview/embeds/default/master/index.html' allowfullscreen allow='encrypted-media'></iframe>"
}

Nachdem der Player erstellt wurde, können Sie in Studio den Player zum Veröffentlichen eines Videos verwenden. Zum Beispiel die Fortgeschrittene Der Spielercode würde ungefähr so aussehen, aber natürlich unter Verwendung Ihrer Kontoinformationen.

<video-js data-video-id="5350958927001"
  data-account="1507807800001"
  data-player="B1JOH9o0e"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video-js>
<script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>

Platzieren Sie nun den Player-Code in einer HTML-Seite. Beachten Sie, dass ein id Attribut wurde dem hinzugefügt video Tag mit einem zugewiesenen Wert von myPlayerID.

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing Player and Plugin Versions</title>
</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="5350958927001"
    data-account="1507807800001"
    data-player="B1JOH9o0e"
    data-embed="default"
     data-application-id=""
     controls=""
    width="640"
    height="360"></video-js>
  <script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>

</body>

</html>

Jetzt möchten Sie Ihr Plugin testen (vorausgesetzt, Sie haben Ihr Plugin benannt myPluginName). Am einfachsten ist es, Ihren Code lokal zu speichern und Ihr Plugin einfach mit einem zu laden script Etikett. Sie rufen dann das zu ladende Plugin auf. Der Code für beide Schritte ist unten hervorgehoben. Ein Beispiel wird hier gezeigt:

...
  <video-js data-video-id="5350958927001"
    data-account="1507807800001"
    data-player="B1JOH9o0e"
    data-embed="default"
     data-application-id=""
     controls=""
    width="640"
    height="360"></video-js>
  <script src="https://players.brightcove.net/1507807800001/B1JOH9o0e_default/index.min.js"></script>

  //Load my plugin source JavaScript
  <script src="my_plugin_source.js"></script>

  //Load my plugin into the player
  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.myPluginName();
    });
  </script>
...

Sie können jetzt Ihren Player testen und bei Bedarf interaktiv debuggen.

Plugin dauerhaft zum Player hinzufügen

Sobald alles gut funktioniert und Sie das Plugin bei jeder Verwendung des Players in den Player aufnehmen möchten, können Sie das Plugin mithilfe von Curl und der Player-Verwaltungs-API dem Player zuweisen. Die folgende Curl-Anweisung ist ein Beispiel und Sie müssen Ihre spezifischen Konfigurationsoptionen und den Plugin-Namen hinzufügen.

curl \
  --header "Content-Type: application/json" \
	 --user $EMAIL \
	 --request PATCH \
	 --data '{
      "plugins": [{
          "name": "myPluginName",
          "options": {
            "param1": "1",
            "param2": "2"
          }
        }
      ],
      "scripts": [
        "http://domain.com/wherever/myplugin.js"
      ],
      "stylesheets": [
        "http://domain.com/wherever/myplugin.css"
      ]
    }' \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

Nach dem Hinzufügen des Plugins möchten Sie entweder in Studio den Player veröffentlichen (er wird als veröffentlichungsbedürftig markiert), oder Sie können die folgende Curl-Anweisung verwenden, um den 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