Beispiel für Brightcove Spieler: Deaktivieren Sie Vorwärts-Scrubbing

Beispiel eines Spielers

Anfangs können Sie NICHT vorwärts schrubben, aber es ist möglich, rückwärts zu schrubben. Sobald das Video 50% abgespielt hat, können Sie entweder vorwärts oder rückwärts schrubben. Der Prozentsatz, wann das Vorwärts-Scrubbing erlaubt werden soll, ist im Code einfach festgelegt.

Siehe den Stift Deaktivieren Sie Forward Scrubbing von Brightcove Learning Services (@rcrooks1969) auf CodePen.

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 script Tag oder schließen Sie die Middleware-Funktion mit dem src Attribut mit einem script 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 disableForwardScrubbing.
• Implementieren Sie die erforderliche setSource() Methode.
• Ändern Sie die setCurrentTime() Methode, um zu überprüfen, ob die Zeit, zu der der Betrachter zu schrubben versucht, geringer ist als die aktuelle Zeit im Spieler oder der Prozentsatz des Scrub Forward abgelaufen ist. Wenn beides stimmt, verschieben Sie den Abspielkopf auf diese Zeit. Wenn falsch, lassen Sie das Video zum aktuellen Zeitpunkt abspielen.

Erstellen Sie das Skelett für die Middleware-Funktion

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

// +++ Define the middleware function+++

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

var disableForwardScrubbing = function(player) {
  return {
  ...
};

Beachten Sie, dass das player Objekt an die Funktion übergeben wird.

Implementieren Sie die setSource() Methode

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

// ### Implement setSource() ###

Dies ist eine erforderliche Methode für jede Middleware-Funktion. Durch die Verwendung der gezeigten Syntax wird die Middleware unabhängig vom Videotyp immer ausgewählt:

setSource: function setSource(srcObj, next) {
  next(null, srcObj);
},

Ändern Sie die setCurrentTime () -Methode

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

// ### Alter the setCurrentTime method ###

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. Die if Anweisung prüft, ob der neue Wert kleiner als die aktuelle Uhrzeit des Spielers ist oder den Prozentsatz überschreitet, um das Vorwärts-Scrubbing zu ermöglichen. Wenn einer der Wert true ist, wird der neue Wert zurückgegeben, wodurch der Abspielkopf auf den neuen Wert verschoben wird. Wenn die Bedingung falsch ist, was bedeutet, dass der Betrachter versucht, vorwärts zu schrubben, bevor er erlaubt wird, wird die aktuelle Uhrzeit des Spielers zurückgegeben und die Wiedergabe wird nicht geändert.

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

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"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</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"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

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