Beispiel für Brightcove Spieler: Kiosk-App

Beispiel eines Spielers

Der Player spielt ein Video aus dem Array der Videoobjekte in einer Endlosschleife ab.

Siehe die Pen 18186-kiosk-App von Brightcove Learning Services (@rcrooks1969) auf CodePen.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Verwendete API/Plugin-Ressourcen

Player-/HTML-Konfiguration

Dieser Abschnitt beschreibt jede spezielle Konfiguration, die während der Spielererstellung erforderlich ist. Darüber hinaus werden andere HTML-Elemente beschrieben, die der Seite über den In-Page-Einbettungsplayer-Implementierungscode hinaus hinzugefügt werden müssen.

Player-Konfiguration

Für den Brightcove Player, den Sie für dieses Beispiel erstellen, ist keine spezielle Konfiguration erforderlich.

Anderes HTML

Der Seite werden keine anderen HTML-Elemente hinzugefügt.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

• Verwenden Sie die CMS API um die Gesamtzahl der Videos im Zielkonto zu erhalten.
• Da es eine bewährte Methode ist, Informationen für nicht mehr als 25 Videos gleichzeitig abzurufen (die CMS API Gibt KEINE Videoobjekte zurück, sondern Informationen zu den Videos. Berechnen Sie die Anzahl der benötigten Anrufe aus der Gesamtzahl.
• Extrahieren Sie beim Abrufen der Informationen für 25 Videos die IDs und rufen Sie dann die Videoobjekte mit dem Video Cloud-Katalog ab.
• Sobald alle Videoobjekte zurückgegeben wurden, spielen Sie das erste Video ab.
• Wenn ein Video endet, spielen Sie das nächste Video ab.
• Wenn das letzte Video abgespielt wird, beginnen Sie erneut vom Anfang der Liste.

Weitere Details werden in dieser Beschreibung hinzugefügt description:

1. Bereiten Sie sich darauf vor, den Anruf bei der zu tätigen CMS API Das gibt die Anzahl der Videos im Konto zurück.
2. Stellen Sie die eigentliche Anfrage mit dem CMS API für die Zählung. Dieser Schritt verwendet eine Callback-Funktion, was bedeutet, dass die Callback-Funktion als Parameter an eine andere zweite Funktion übergeben wird. Die Callback-Funktion wird dann in der Logik der zweiten Funktion aufgerufen. In diesem Fall extrahiert die Callback-Funktion einfach die count-Eigenschaft aus einem Objekt, das von der CMS-API zurückgegeben wird.
3. Bestimmen Sie die Anzahl der Anrufe, die an die CMS API um alle Videos abzurufen. Dieser Code folgt der besten Vorgehensweise, nach 25 Videos pro Anruf zu fragen. Dies geschieht, indem die Anzahl aller Videos durch 25 geteilt wird.
4. Erstellen Sie eine do-while Schleife, die für die erforderliche Anzahl von Anrufen iteriert, die im vorherigen Schritt festgelegt wurde. Diese Schleife muss sich in der Callback-Funktion der Anforderung für die Videoanzahl befinden.
5. Bereiten Sie sich in der Schleife darauf vor, den Anruf bei der zu tätigen CMS API Dadurch werden 25 Videos vom Konto zurückgegeben.
6. Stellen Sie die eigentliche Anfrage noch in der Schleife mit dem CMS API für die Videodaten. Dieser Schritt verwendet eine Callback-Funktion, was bedeutet, dass die Callback-Funktion als Parameter an eine andere zweite Funktion übergeben wird. Die Callback-Funktion wird dann in der Logik der zweiten Funktion aufgerufen. In diesem Fall führt die Callback-Funktion folgende Aufgaben aus:
   • Extrahieren Sie Daten, um ein Array von Video-IDs für die zurückgegebenen Videoinformationen zu erstellen.
   • Das Array der Video-IDs wird dann als Parameter an eine andere Funktion übergeben, die das vollständige Videoobjekt für jede ID abruft. Die zurückgegebenen Objekte werden in einem Array aller Videoobjekte gespeichert. In diesem Schritt wird auch eine Callback-Funktion verwendet.
   • Prüfen Sie, wann alle Videos zurückgegeben werden (wenn die Anzahl der zurückgegebenen Videos mit der zuvor zurückgegebenen Anzahl übereinstimmt). Wenn die Bedingung erfüllt ist, rufen Sie eine Funktion auf, die das erste Video im Array abspielt (Null-Element).
7. Richten Sie einen Ereignis-Listener ein, um auf das ended Ereignis zu hören. Wenn jedes Video endet, spielen Sie das nächste Video ab oder wenn es sich um das letzte Video im Array handelt, spielen Sie das erste Video ab.

Fordern Sie die Videoanzahl von der CMS-API an

Finden Sie den Code, der mit der Bezeichnung versehen ist:

	// ### Setup for video count CMS API request ###

Der erste Anruf bei der getCMSAPIData() ist für die Gesamtzahl der Videos. Beachten Sie, dass in der Callback-Funktion ein weiterer Aufruf der Funktion innerhalb der do-while Schleife erfolgt.

Das nächste Video am Ende eines abspielenden Videos abspielen

Finden Sie den Code, der mit der Bezeichnung versehen ist:

	// ### Get next video ###

Verwendet die on('ended',...) Logik, um das nächste Video in der Liste abzuspielen. Beachten Sie die currentlyPlayingIndex Tracks, die die Videos abspielen.

Daten mit der CMS-API abrufen

Finden Sie den Code, der mit der Bezeichnung versehen ist:

	// ### Standard functionality for CSM API call ###

Dies ist der Standardcode, der im Learning Guide diskutiert wird: Verwenden des REST-API-Dokuments.

Extrahiere Video-IDs und rufe Videoobjekte ab

Finden Sie den Code, der mit der Bezeichnung versehen ist:

	// ### Extract video IDs ###

Diese Reihe von Funktionen verwendet die zurückgegebenen Videoinformationen, extrahiert die IDs und verwendet dann die CMS API um Videoobjekte abzurufen, die der Player benötigt, um den Videoinhalt tatsächlich wiederzugeben.

Styling der Anwendung

Das einzige CSS hat die Größe des Players.

Plugin-Code

Normalerweise sind bei der Umwandlung des JavaScript in ein Brightcove Player-Plugin nominelle Änderungen erforderlich. Eine erforderliche Änderung besteht darin, die Standardverwendung der ready() Methode durch den Code zu ersetzen, der ein Plugin definiert.

Hier ist der sehr häufig verwendete Start zu JavaScript-Code, der mit dem Player funktioniert:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

Sie ändern die erste Zeile, um die Standardsyntax zum Starten eines Brightcove Player-Plugins zu verwenden:

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

Wie bereits erwähnt, können Sie den JavaScript-Code des Plugins im entsprechenden GitHub Repo dieses Dokuments sehen: kiosk-app.js.

Verwenden des Plugins mit einem Player

Sobald Sie die CSS- und JavaScript-Dateien des Plugins an einem für das Internet zugänglichen Ort gespeichert haben, können Sie das Plugin mit einem Player verwenden. Im Studio SPIELER Modul können Sie einen Spieler wählen, dann in der PLUGINS fügen Sie die URLs zu den CSS- und JavaScript-Dateien hinzu und fügen Sie auch die Name und Optionen , wenn Optionen benötigt werden.

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-Domains.) Ein Beispielproxy, 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-Repository gefunden werden. Dort finden Sie auch grundlegende Anweisungen zur Verwendung und eine ausführlichere Anleitung zum Erstellen von Apps rund um den Proxy unter Verwenden der REST-APIs.