Brightcove Spielerlader

In diesem Thema erfahren Sie, wie Sie mit dem Brightcove Player Loader einen Brightcove Player mit modernen Build-Tools laden. Diese Bibliothek wird als Werkzeug für technisch versierte Kunden angesehen.

Überblick über den Spielerloader

Für Benutzer von Brightcove Player, die weder die In-Page-Einbettung noch die Iframe-Player-Implementierungen kopieren und einfügen möchten, ist dieses Modul in ihre Webanwendung gebündelt und bietet die Möglichkeit, Brightcove Players zu verwenden, ohne Integrationscode schreiben zu müssen, um ihre Spieler herunterzuladen und einzubetten. Dieses Tool löst das Problem mit einer Brightcove-Bibliothek, die jeden veröffentlichten Brightcove Player herunterladen und in das DOM einbetten kann.

Diese Bibliothek unterstützt gängige immergrüne Browser, Chrome, Firefox, Edge und Safari.

Dieses Dokument enthält im Wesentlichen Beispielverwendungen des Brightcove Player Loaders. Ausführliche Details finden Sie im Brightcove-/Player-Loader der Bibliothek GitHub Repo.

Es gibt ein Webpack, das mit Brightcove Player verwendet werden kann. Details dazu finden Sie in der player-loader-webpack-plugin GitHub-Repository.

Installation

Die Bibliothek wird mit NPM installiert, wobei Folgendes verwendet wird:

npm install --save @brightcove/player-loader

Einschließlich der Bibliothek

Für verschiedene Methoden, um die Bibliothek für Ihre Verwendung einzubeziehen, lesen Sie bitte das GitHub-Repo für die Bibliothek.

Implementierung mit einem Versprechen

Sie können ein JavaScript-Versprechen mit der Bibliothek verwenden. Versprechungen sind nicht erforderlich, damit diese Bibliothek funktioniert, aber sie werden empfohlen. Standardmäßig sucht diese Bibliothek nach einem globalen Versprechen. Sie können jedoch explizit eine Promise-Implementierung über den Promise Parameter bereitstellen, der später in diesem Dokument beschrieben wird.

Im Folgenden wird eine Implementierung der Bibliothek mit einem Promise dargestellt. Ein Schlüsselkonzept ist, dass Sie einen Verweis auf den Spieler erhalten, indem Sie var myPlayer = success.ref; im then Abschnitt zur Abwicklung des Versprechens verwenden:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
    brightcovePlayerLoader({
      refNode: document.querySelector('#theDiv'),
      accountId: '1752604059001',
      playerId: 'wHBRh9M3o',
      videoId: '4607357817001'
    })
    .then(function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    })
    .catch(function(error) {
      console.log('error', error);
    })
  </script>

</body>

</html>

Implementierung mit Callbacks

Sie können den Playerloader auch mithilfe von Callbacks über die onSuccess und onFailure Callback-Funktionen implementieren.

Im Folgenden wird eine Implementierung der Bibliothek unter Verwendung von Callbacks dargestellt. Ein Schlüsselkonzept ist, dass Sie einen Verweis auf den Player erhalten, indem Sie var myPlayer = success.ref; in der onSuccess Callback-Funktion verwenden:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>

</head>

<body>
  <script src="brightcove-player-loader.min.js"></script>

  <div id="theDiv">
  </div>

  <script>
  brightcovePlayerLoader({
    refNode: document.querySelector('#theDiv'),
    accountId: '1752604059001',
    playerId: 'wHBRh9M3o',
    videoId: '4607357817001',
    onSuccess: function(success) {
      var myPlayer = success.ref;
      console.log('success', success);
      myPlayer.on('loadedmetadata',function(){
        myPlayer.muted(true);
        myPlayer.play();
      });
    },
    onFailure(error) {
      console.log('error', error);
    }
  });
  </script>

</body>

</html>

Verwendung von Wiedergabebeschränkungen

Zur Verwendung von Wiedergabeeinschränkungen mit dem Brightcove-Player-Loader müssen Sie lediglich einen Verweis auf den Player abrufen und das JSON-Web-Token (JWT) an diesen übergeben.

Hier ist ein Beispiel:

    <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <title>Brightcove Player</title>
          <meta charset="UTF-8">
          <script crossorigin
              src="player-loader/dist/brightcove-player-loader.min.js"></script>
      </head>
      
      <body>
          <main>
              <h1>Brightcove Player</h1>
              <div id="theDiv"></div>
      
          </main>
      </body>
      <script>
          var myJwtToken = "your jwt token";
          var myVideoId = "your video Id";
      
          // +++ Add the Brightcove Player +++
          brightcovePlayerLoader({
              refNode: document.querySelector('#theDiv'),
              accountId: 'your account Id',
              playerId: 'your player Id',
            onSuccess: function (success) {
              // Get a reference to the BC Player
              var myPlayer = success.ref;
              console.log('success', success);
              
              myPlayer.ready(function () {
                // This should ideally be set in the player configuration
                myPlayer.catalog.setPolicyKey(null);
                myPlayer.catalog.setBcovAuthToken(myJwtToken);
                myPlayer.catalog.get({
                  id: myVideoId,
                  type: 'video'
              }).
                  then(function (data) {
                    myPlayer.catalog.load(data);
                    myPlayer.muted(true);
                    myPlayer.play();
                  }).
                  catch(function (error) {
                    throw new Error(error);
                  });
              });
            },
            onFailure(error) {
              console.log('error', error);
            }
          });
    </script>
    </html>

Verfügbare Parameter

Name: accountId

Datentyp: string | number

Beschreibung:
Eine Video Cloud-Konto-ID.

Name: applicationId

Datentyp: string

Beschreibung:
Die Anwendungs-ID, die auf die generierte Einbettung angewendet werden soll.

Name: catalogSearch

Datentyp: string | Objekt

Beschreibung:
Eine durchzuführende Video Cloud-Katalogsuche. Dies kann eine einfache Stringsuche oder ein Objekt sein, das der getSearch() Catalog-Methode entspricht. Wenn ein Wert ohne Zeichenfolge angegeben wird, der nicht als JSON serialisierbar ist, wird dieser Parameter ignoriert.

Name: catalogSequence

Datentyp: Array | Objekt

Beschreibung:
Eine durchzuführende Video Cloud Catalog-Sequenz. Weitere Informationen finden Sie in der getLazySequence() Catalog-Methode. Wenn ein Wert ohne Zeichenfolge angegeben wird, der nicht als JSON serialisierbar ist, wird dieser Parameter ignoriert.

Name: embedId

Datentyp:string

Beschreibung:
Die Brightcove Player-Einbettungs-ID für den Player. Der Standardwert ist 'default'. Der Standardwert ist für die meisten Benutzer korrekt.

Name: embedOptions

Datentyp: Objekt

Beschreibung:
Wird verwendet, um bestimmte Optionen für die Einbettungsgenerierung bereitzustellen. Dazu gehören:

`embedOptions.pip`	boolescher Wert	Wenn `true`, wird die Einbettung in ein `<div class="vjs-pip-container">` Element umbrochen. Dies sollte verwendet werden, wenn Sie Unterstützung für das Brightcove Picture-in-Picture-Plugin benötigen. Der Standardwert ist `false`.
`embedOptions.playlist`	boolescher Wert	Wenn `true`, fügt nach der Einbettung ein `<div class="vjs-playlist">` Element hinzu. Dies sollte verwendet werden, wenn Sie Unterstützung für das Brightcove Playlist UI-Plugin benötigen. Der Standardwert ist `false`.
`embedOptions.responsive`	boolean \| Objekt	Passen Sie den Einbettungscode an, um mithilfe des intrinsic ratio Wrapper-Ansatz. Wenn der Wert wahr ist, wird ein responsiver Einbettungscode mit einem Seitenverhältnis von 16:9 erstellt, der seinen Container füllt. Der Standardwert ist `false`. Ein Objekt kann bereitgestellt werden, um dies mit den folgenden Untereigenschaften anzupassen: `aspectRatio`: Eine Zeichenfolge, die verwendet wird, um das Seitenverhältnis auf einen anderen Wert als 16:9 anzupassen (z. B. `maxWidth`: Eine Zeichenfolge, die verwendet wird, um die maximale Breite des Spielers einzuschränken. Dies sollte CSS-Einheiten wie Pixel (z. B. „960px“) verwenden.
`embedOptions.unminified`	boolescher Wert	Wenn `true`, wird die nicht minifizierte Version des Players verwendet. Dies kann für Debugging-Zwecke nützlich sein, kostet jedoch einen größeren Player-Download. Nicht für die Produktion empfohlen! Der Standardwert ist `false`.

Name: embedType

Datentyp: string

Beschreibung:
Der zu erzeugende Einbettungscodetyp. Der Wert dieses Parameters muss einer der folgenden sein:

'in-page' oder brightcovePlayerLoader.EMBED_TYPE_IN_PAGE: Dies wird auch als erweiterter Einbettungscode bezeichnet und injiziert den Player direkt in die Webseite der obersten Ebene.
'iframe' oder brightcovePlayerLoader.EMBED_TYPE_IFRAME: Dies wird auch als grundlegender Einbettungscode bezeichnet und injiziert den Player als <iframe> Element.

Der Standardwert ist 'in-page'.

Name: onEmbedCreated

Datentyp: Funktion (Element)

Beschreibung:
Ein Rückruf zum Anpassen des Einbettungselements (entweder) video-js Element oder ein iframe Element), bevor es in das DOM eingefügt oder als Ergebnis von angepasst wird embedOptions und bevor der Player heruntergeladen und initialisiert wird. Das embed-Element kann mutiert sein, oder wenn dieser Callback ein Element zurückgibt, wird dieses Element als embed-Element verwendet. Mögliche Anwendungsfälle sind das Hinzufügen/Entfernen von Attributen oder das Hinzufügen von untergeordneten Elementen wie Quellen oder Tracks.

Name: onFailure

Datentyp: Funktion (Fehler)

Beschreibung:
Eine Rückruffunktion, die die Behandlung von Fehlern ermöglicht, wenn Promise ist nicht verfügbar oder nicht erwünscht. Wenn Sie diese Funktion übergeben, wird verhindert, dass ein Promise zurückgegeben wird. Es erhält ein einzelnes Error Objekt als Argument. Der Rückgabewert dieser Funktion wird ignoriert.

Name: onSuccess

Datentyp: Funktion (Objekt)

Beschreibung:
Eine Rückruffunktion, mit der Erfolge behandelt werden können, wenn Promise ist nicht verfügbar oder nicht erwünscht. Wenn Sie diese Funktion übergeben, wird verhindert, dass ein Promise zurückgegeben wird. Es erhält ein einzelnes Success Objekt als Argument. Der Rückgabewert dieser Funktion wird ignoriert.

Name: options

Datentyp: Objekt

Beschreibung:
Ein Video.js Optionen Objekt während des Erstellungsprozesses des Spielers zu bestehen. Diese Optionen haben Vorrang vor allen Einstellungen, die in der Brightcove Player-Konfiguration angegeben sind. Dieser Parameter kann nicht mit iframe-Einbettungen verwendet werden.

Name: playerId

Datentyp: string

Beschreibung:
Eine Brightcove Player-Spieler-ID. Der Standardwert ist 'default'.

Name: playlistId

Datentyp: string | number

Beschreibung:
Eine Video Cloud-Wiedergabelisten-ID oder eine Wiedergabelisten-Referenz-ID.

Name: playlistVideoId

Datentyp: string | number

Beschreibung:

Eine Video Cloud-Video-ID, die in der resultierenden Wiedergabeliste gefunden würde, die von angegeben wurde playlistId. Dieser Parameter wird ignoriert, wenn er playlistId fehlt.

Name: Promise

Datentyp: Funktion (Funktion)

Beschreibung:
Wird verwendet, um explizit a bereitzustellen Promise Implementierung. Falls vorgesehen, wird dies anstelle eines globalen verwendet Promise. Der Standardwert ist window.Promise

Name: refNode

Datentyp: Element | string

Beschreibung:
Required
Das DOM-Element, in das der Player eingebettet wird. Wenn es nicht als DOM-Element angegeben wird, kann es als String angegeben werden, an den übergeben wird document.querySelector.

Name: refNodeInsert

Datentyp: string

Beschreibung:
Die Art und Weise, in der der Player relativ zum Referenz-DOM-Element eingefügt wird (angegeben durch refNode). Der Wert dieses Parameters muss einer der folgenden sein:

'append' oder brightcovePlayerLoader.REF_NODE_INSERT_APPEND: Der Spieler wird das letzte untergeordnete Element des Referenzknotens sein.
'prepend' oder brightcovePlayerLoader.REF_NODE_INSERT_PREPEND: Der Player wird das erste untergeordnete Element des Referenzknotens sein.
'before' oder brightcovePlayerLoader.REF_NODE_INSERT_BEFORE: Der Spieler wird vorheriges Geschwister des Referenzknotens sein.
'after' oder brightcovePlayerLoader.REF_NODE_INSERT_AFTER: Der Spieler wird das nächste Geschwister nach dem Referenzknoten sein.
'replace' oder brightcovePlayerLoader.REF_NODE_INSERT_REPLACE: Der Referenzknoten wird entfernt und durch den Player ersetzt.

Name: videoId

Datentyp: string | number

Beschreibung:
Eine Video Cloud-Video-ID oder eine Video-Referenz-ID.