Beispiel für Brightcove Spieler: Andere Spieler auf der Seite stoppen, wenn ein Video gestartet wird

In diesem Thema erfahren Sie, wie Sie alle anderen Brightcove-Player auf einer Seite anhalten, wenn die Videowiedergabe in einem der Player beginnt. Die im Dokument beschriebene Funktionalität erfordert Brightcove Player Version 5.0.3 oder höher.

Beispiel eines Spielers

Fangen Sie an, eines der Videos abzuspielen. Spielen Sie als Nächstes das Video in einem anderen Player ab und sehen Sie, dass die Videowiedergabe bei dem anderen abgespielten Player gestoppt wird.

Sehen Sie den Pen 18179-stopping-andere-Player-Seite-wenn-Videostart von Brightcove Learning Services (@rcrooks1969) auf CodePen.

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

Normalerweise schlägt dieser Abschnitt für Samples einen Entwicklungsansatz vor, der von einer Seite zur Verwendung eines Brightcove Player-Plugins übergeht. In diesem Fall wirkt der Code auf alle Spieler auf der Seite im Konzert und kann nicht einem Spieler als Plugin zugewiesen werden, daher wird kein Plugin-Code angezeigt.

Verwendete API/Plugin-Ressourcen

API-Methoden	API-Ereignisse
spielen ()	spielen
pausieren ()

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 ist keine spezielle Konfiguration erforderlich, aber es gibt drei verschiedene Spieler auf der Seite in <div> HTML-Tags zur Layoutsteuerung.

Anderes HTML

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

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

Bestimmen Sie, wie viele Spieler auf der Seite sind.
Schlaufen Sie über die Spieler, initialisieren Sie sie als Brightcove Players und setzen Sie für jeden auch einen play Event-Listener.
Jedes Mal, wenn ein play Event abgewickelt wird, fahren Sie über die Spieler und pausieren Sie alle Spieler, die nicht den Namen des Spielers haben, der das Event ausgelöst hat.

Erstellen Sie eine Schleife über die Spieler und weisen Sie jedem einen Event-Handler zu

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

// ### Determine the available player IDs ###

Wenn Sie mehrere Spieler auf einer Seite haben, werden diese in einem Objektnamen videojs.players mit Schlüsseln gespeichert, die die Namen der Spieler sind. Sie verwenden die Object.keys() JavaScript-Methode, um die Namen der Spieler zu extrahieren, die Sie für die Schleife haben möchten, nicht die tatsächlichen Spielerobjekte. In der Schleife weisen Sie einen Event-Handler zu und schieben den Player dann in ein Array.

Behandle das `play` Event und stoppe das Spielen anderer Spieler