Beispiel für Brightcove Spieler: Erhalten Sie Sucht Zeit

Beispiel eines Spielers

Wenn Sie in die Suchleiste klicken, sehen Sie die Zeiten, zu denen Sie geklickt haben, unter dem Spieler angezeigt.

Sehen Sie sich den Stift von Brightcove Learning Services (@rcrooks1969) auf CodePen an.

Quellcode

Sehen Sie sich die Komplettlösung auf GitHub an.

Middleware-Funktionen

Dieses Beispiel verwendet die Middleware Video.js, um die Codelösung zu implementieren. Auf einem sehr hohen Niveau sind die Anwendungsfälle, in denen Middleware am meisten Wert ist, wenn Sie das Kernverhalten des Players abfangen und ändern möchten, z. B. das Festlegen der Quelle oder der aktuellen Uhrzeit. Video.js Middleware wird in diesem Dokument im Allgemeinen nicht ausführlich diskutiert, aber der tatsächliche Code, der für die Middleware-Funktion verwendet wird, wird erklärt. Hier sind Dokumente aus Video.js Quellen, die Middleware detailliert beschreiben:

• Middleware (aus dem Dokumentationssatz Video.js)
• Feature-Spotlight: Middleware (aus dem Blog Video.js)
• videojs-playbackrate-Adjuster (eine Beispiel-App)

Implementierung von Middleware-Funktionen mit Brightcove Player

Die einfachste Möglichkeit, eine Middleware-Funktion zu verwenden, besteht darin:

1. Schreiben Sie die Middleware-Funktion.
2. Platzieren Sie die Middleware-Funktion entweder auf der Seite mit dem Player in einem Skripttag oder schließen Sie die Middleware-Funktion mit dem src-Attribut mit einem Skript ein markieren. Beide Implementierungen werden in diesem Dokument angezeigt.
3. Registrieren Sie die Middleware-Funktion mit der use () -Methode beim Player, wie hier gezeigt:

   videojs.use ('mimeType', FunctionName);

   Für die Mime Typ Sie können einen Standard-Video-Mimetyp verwenden, wie Video/mp4 , oder verwenden Sie ein * wenn Sie möchten, dass die Middleware-Funktion auf alle Mimetypen angewendet wird.

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:

• Implementieren Sie die grundlegende Syntax für eine Middleware-Funktion und benennen Sie die Funktion GetSeekedTime.
• Ändern Sie die setCurrentTime () -Methode, um einfach die angestrebte Zeit zurückzugeben.

Erstellen Sie das Skelett für die Middleware-Funktion

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

//+++ Definiere die Middleware-Funktion+++

Die grundlegende Syntax zum Erstellen einer Middleware-Funktion lautet wie folgt:

var getSeekedTime = Funktion (Spieler) {
  Rückkehr {
  ...
};

Ändern Sie die setCurrentTime () -Methode

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

//### Setzt die Suchzeit in der setCurrentTime-Methode ###

In diesem Codeblock wird die eigentliche setCurrentTime () -Methode geändert. Um dies zu verstehen, ist der erste zu wissen, dass der an die Funktion übergebene ct-Wert den Wert widerspiegelt, auf den der Betrachter schrubbt. Daher können Sie der entsprechenden Variablen einfach den Wert zuweisen und diesen Wert zurückgeben, damit setCurrentTime () immer noch ordnungsgemäß funktioniert.

setCurrentTime: Funktion setCurrentTime (ct) {
  seekBarClickedTime = ct;
  return ct;
}}

Styling der Anwendung

Das CSS auf der Seite legt einfach die Größe des Players fest.

Verwenden der Middleware-Funktion

Sobald die Middleware-Funktion geschrieben wurde, möchten Sie sie verwenden. Zwei Wege wurden bereits erwähnt und werden jetzt detailliert beschrieben.

Code auf derselben Seite wie Spieler

Hier definierst du die Middleware-Funktion auf derselben Seite wie der Player und registrierst sie dann.

<video-js id = "myPlayerID"
  data-video-id = "5701202551001"
  Datenkonto = "1752604059001"
  data-player = "Standard"
  data-embedded = "Standard"
  data-application-id=""
  controls=""></video-js>

<div id = "displayTimesHere"> </ div>

<script src = "https://players.brightcove.net/1752604059001/default_default/index.min.js"> </ script>

<script type = "text / javascript">
  var seekBarClickedTime;

  //+++ Definiere die Middleware-Funktion+++
  var getSeekedTime = Funktion (Spieler) {
    Rückkehr {
    // +++ Suchzeit in setCurrentTime-Methode festlegen +++
      setCurrentTime: Funktion setCurrentTime (ct) {
        seekBarClickedTime = ct;
        return ct;
      }
    }
  };

  // Registriere die Middleware beim Player
  videojs.use ('*', getSeekedTime);

  // Mouseup-Ereignis in der Suchleiste initialisieren
  videojs.getPlayer ('myPlayerID'). ready (function () {
    var myPlayer = this;
    myPlayer.controlBar.progressControl.seekBar.on ('mouseup', Funktion (Ereignis) {
      displayTimesHere.innerHTML + = seekBarClickedTime + '<br>';
    });
  });
  </ script>

Code auf Spielerseite enthalten

Im folgenden Code sind das JavaScript für die Middleware-Funktion und die use () -Methode zur Registrierung einfach auf der Seite enthalten.

<video-js id = "myPlayerID"
  data-video-id = "5701202551001"
  Datenkonto = "1752604059001"
  data-player = "Standard"
  data-embedded = "Standard"
  data-application-id=""
  controls=""></video>
<script src = "https://players.brightcove.net/1752604059001/default_default/index.min.js"> </ script>

<script src = "get-seeked-time.js"> </ script>

Siehe die Funktion-in-separater-Datei Abschnitt im GitHub-Repo für den vollständigen Code.