Beispiel für Brightcove Spieler: Passwort zum Ansehen von Video

In diesem Thema erfahren Sie, wie Sie nach einem Kennwort fragen, um das Video anzuzeigen.

Beispiel eines Spielers

In diesem Beispiel müssen Sie ein Passwort eingeben, um das Video abzuspielen. Sie können entweder auf klicken Anmelden Taste oder drücken Sie die Eingeben Taste, nachdem Sie das Passwort eingegeben haben. Zum Testen lautet das Passwort thepass. Wenn Sie das falsche Passwort eingeben, erscheint ein JavaScript-Warnfeld mit einer entsprechenden Meldung.

Sehen Sie sich das Stift-Passwort zum Anzeigen von Videos von Brightcove Learning Services (@rcrooks1969) auf CodePen an.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

CodePen verwenden

Hier sind einige Tipps zur effektiven Verwendung des obigen CodePen:

  • Schalten Sie die tatsächliche Anzeige des Players um, indem Sie auf klicken Result Taste.
  • Drücke den HTML/CSS/JS Schaltflächen zur Anzeige EINES der Codetypen.
  • Später in diesem Dokument werden die Logik, der Ablauf und das Styling der Anwendung in der Player/HTML-Konfiguration, im Anwendungsfluss und im Anwendungsstyling diskutiert Abschnitte. Der beste Weg, um den Informationen in diesen Abschnitten zu folgen, besteht darin:
    1. Drücke den EDIT ON CODEPEN Klicken Sie im CodePen auf die Schaltfläche und halten Sie den Code in einem Browser / einer Browser-Registerkarte bereit.
    2. Passen Sie in CodePen an, welcher Code angezeigt werden soll. Sie können die Breite verschiedener CodeAbschnitte in CodePen ändern.
    3. Sieh den Player-/HTML-Konfiguration , Bewerbungsablauf und/oder Bewerbungsstyling Abschnitte in einem anderen Browser/Browser-Tab. Sie können nun den Codeerklärungen folgen und gleichzeitig den Code anzeigen.

Entwicklungs-Sequenz

Hier ist die empfohlene Entwicklungssequenz:

  1. Verwenden Sie die In-Page-Embed-Player-Implementierung, um die Funktionalität Ihres Players, Plugins und CSS zu testen (falls CSS benötigt wird)
  2. Legen Sie JavaScript und CSS des Plugins in separate Dateien zum lokalen Testen
  3. Stellen Sie den Plugin-Code und das CSS auf Ihrem Server bereit, sobald Sie Fehler herausgefunden haben
  4. Benutze Studio, um das Plugin und das CSS deinem Player hinzuzufügen
  5. Ersetzen Sie die In-Page-Embed-Player-Implementierung, wenn Sie feststellen, dass die Iframe-Implementierung besser passt (im nächsten Abschnitt beschrieben)

Weitere Informationen zu diesen Schritten finden Sie in der Schritt-für-Schritt-Anleitung: Leitfaden zur Entwicklung von Plugins

iframe oder In-Page einbetten

Bei der Entwicklung von Verbesserungen für den Brightcove Player müssen Sie entscheiden, ob der Code am besten für die Iframe- oder In-Page-Einbettungsimplementierung geeignet ist. Die Best Practice-Empfehlung besteht darin, ein Plugin zur Verwendung mit einer Iframe-Implementierung zu erstellen. Die Vorteile der Verwendung des iFrame-Players sind:

  • Keine Kollisionen mit vorhandenem JavaScript und/oder CSS
  • Reaktionsschnell
  • Der iframe erleichtert die Verwendung in Social-Media-Apps (oder wann immer das Video in andere Apps „reisen“ muss)

Obwohl die Integration des In-Page-Einbettungsplayers komplexer sein kann, planen Sie Ihren Code in dieser Implementierung manchmal. Um zu verallgemeinern, ist dieser Ansatz am besten, wenn die enthaltende Seite mit dem Spieler kommunizieren muss. Im Einzelnen sind hier einige Beispiele:

  • Der Code auf der enthaltenden Seite muss Spielerereignisse abhören und darauf reagieren
  • Der Player verwendet Stile von der enthaltenden Seite
  • Der Iframe führt dazu, dass die App-Logik fehlschlägt, wie eine Weiterleitung von der enthaltenen Seite

Selbst wenn Ihre endgültige Implementierung den Iframe-Code nicht verwendet, können Sie den In-Page-Einbettungscode trotzdem mit einem Plugin für Ihr JavaScript und einer separaten Datei für Ihr CSS verwenden. Dies kapselt Ihre Logik, sodass Sie sie problemlos in mehreren Spielern verwenden können.

Leichte Sicherheit

Dieses Dokument enthält Code für zwei verschiedene Ansätze, um Lichtsicherheit beim Betrachten eines Videos zu bieten. Keine dieser Implementierungen ist kugelsichere Möglichkeiten, Ihre Videos vor Zuschauern zu schützen, die Sie Ihre Videos nicht abspielen möchten. Sie bieten eine kleine Barriere, die etwas Wissen und Mühe erfordert, um das richtige Passwort zu finden. Wenn eine absolut sichere Methode zum Schutz Ihrer Videos benötigt wird, lesen Sie die Übersicht: Content-Schutz und Überblick: Digital Rights Management (DRM) in Video Cloud-Dokumenten, damit Sie loslegen können. Die nächsten beiden Abschnitte dieses Dokuments enthalten Einzelheiten zu den beiden Ansätzen.

Speichern Sie das Passwort im benutzerdefinierten Feld eines Videos

Bei diesem Ansatz a Passwort Das benutzerdefinierte Feld wird aus dem Video gelesen und mit dem Passwort verglichen, das in das Formular eingegeben wurde, das den Player überlagert. Weitere Informationen zum Erstellen des benutzerdefinierten Felds finden Sie unter Erstellen benutzerdefinierter Metadatenfelder dokumentieren.

Die Hauptvorteile dieses Ansatzes sind:

  • Jedes Video kann ein anderes Passwort haben.
  • Wenn kein Passwort in das benutzerdefinierte Feld eingegeben wird, wird der Betrachter des Videos NICHT zur Eingabe eines Passworts aufgefordert.

Die Hauptnachteile sind:

  • Der Videokonfiguration muss ein benutzerdefiniertes Feld hinzugefügt werden (ein einziger Akt).
  • Für jedes Video, für das Sie die Anzeige einschränken möchten, muss ein Passwort eingegeben werden.

Der Code für diese Version des Plugins ist in diesem Dokument detailliert und die Plugin-Version befindet sich hier.

Übergeben Sie Anmeldeinformationen an

Hier wird die Implementierungslogik in ein benutzerdefiniertes Plugin platziert, und das Passwort für alle Videos, die in dem Player angezeigt werden, mit dem das Plugin verknüpft ist, wird als Option übergeben, wie im folgenden Screenshot gezeigt.

Der Hauptvorteil dieses Ansatzes ist:

  • Ein Passwort funktioniert als gültige Anmeldeinformationen für alle Videos, die mit dem Player angesehen werden, in dem das Plugin geladen ist.

Die Hauptnachteile sind:

  • Um verschiedene Passwörter zu verwenden, musst du verschiedene Spieler verwenden.
  • Für jedes im Player angesehene Video muss ein Passwort eingegeben werden, um das Video abzuspielen.

Der Code für diese Version des Plugins folgt sehr genau dem in diesem Dokument beschriebenen Code (es ist eigentlich ein bisschen einfacher) und die Plugin-Version befindet sich hier.

Verwendete API/Plugin-Ressourcen

API-Methoden API-Ereignisse API-Eigenschaften Spieler-Klassen
spielen () Loadstart MediaInfo.CustomFields ModalDialog
am ()      
eins ()      
gedämpft ()      
addChild ()      

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:

  • Prüfen Sie, ob im password benutzerdefinierten Feld ein Passwort vorhanden ist. Wenn ja, öffnen Sie den Modal Dialog, wenn nicht, spielen Sie das Video ab.
  • Zeigen Sie im ModalDialog ein Formular an, in dem der Benutzer ein Passwort eingeben kann.
  • Nachdem ein Passwort eingegeben wurde und entweder die Anmelden Schaltfläche angeklickt wird oder Eingeben gedrückt wird, vergleichen Sie das eingegebene Passwort mit dem in den Metadaten des Videos gespeicherten.
  • Wenn das richtige Passwort eingegeben wurde, spielen Sie das Video ab. Wenn nicht, öffnen Sie ein Warnfeld mit einer entsprechenden Nachricht.

ModalDialog bei Bedarf anzeigen

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

// ### Display ModalDialog if password in video's custom field ###

Nachdem Sie darauf gewartet haben, dass das loadstart Ereignis ausgelöst wird, damit das mediainfo Objekt gelesen werden kann, wird das Passwort empfangen und überprüft, ob es nicht definiert ist. Wenn ja, spielen Sie einfach das Video ab, sonst zeigen Sie den ModalDialog an, der das Passwortformular enthält. Die uncloseable Option wird hinzugefügt, damit der Benutzer nicht nur die ESC-Taste drückt und das Video abspielt.

Verwenden Sie Ereignis-Listener, um die Kennwort

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

// ### Add event listeners to check password ###

Zwei Ereignis-Listener sind eingerichtet, einer, wenn der Benutzer auf die Schaltfläche klickt und der andere, wenn der Benutzer die Eingabetaste drückt. Sobald das dynamisch erstellte Formular in platziert wurde newElement, ist es im DOM verfügbar. Sie können dann die querySelector() Methode von JavaScript verwenden, um ein Handle für das Element zu erhalten und Ereignishandler zuzuweisen.

Prüfen Sie ob das Passwort richtig

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

// ### Check entered password against saved password and act accordingly ###

Nachdem Sie das value Kennworteingabeelement erhalten haben, können Sie mit dem Passwort aus dem benutzerdefinierten Feld des Videos vergleichen. Dann spielen Sie entweder das Video oder das Popup ab und die Warnung, dass das Passwort nicht übereinstimmt.

Styling der Anwendung

Es gibt eine kleine Menge an CSS, um die Größe des Players und das Aussehen des Formulars zu steuern.

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: password-to-view.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.