Beispiel für Brightcove Spieler: Schwebender Spieler

In diesem Thema erfahren Sie, wie Sie HTML, CSS und JavaScript auf der Seite so konfigurieren, dass der Player an eine neue Position gezogen und dort fixiert werden kann (bis er erneut gezogen wird). Die Spielerposition bleibt dann fest, auch wenn der Benutzer auf der Seite nach oben und unten scrollt.

Beispiel eines Spielers

Ziehen Sie den Spieler mit dem Pluszeichen (+) oben links im Spieler an einen Ort und legen Sie ihn ab. Scrollen Sie dann den Seitentext nach oben und unten und Sie sehen, dass der Spieler an Ort und Stelle fixiert bleibt.

Siehe den Pen 18195-Floating-Spieler 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

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.

Verwendete API/Plugin-Ressourcen

In diesem Beispiel werden keine Brightcove Player API-Ressourcen verwendet. Es ist alles CSS und JavaScript.

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

Ein <div> HTML-Tag umschließt den Spielercode.

Ablauf der Anwendung

Die grundlegende Logik hinter dieser Anwendung lautet:

  • Erstellen Sie einen Event-Handler für das onmousedown Ereignis (ziehen Sie an)
  • Erstellen Sie einen Event-Handler für das onmouseup Ereignis (Dropping)
  • Erstellen Sie einen Event-Handler für das onmousemove Ereignis (ziehen)

Handeln Sie mit der Maus unten

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

// ### Act on mouse down ###

Bereitet sich auf das Ziehen des Spielers vor und setzt den Event-Handler für onmousemove.

Handeln Sie bei Mausbewegung

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

// ### Act on mouse move ###

Verfolgt die Mausposition auf dem Bildschirm.

Handeln Sie mit der Maus hoch

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

// ### Act on mouse up ###

Legt die Spielerposition fest und löscht beispielsweise mehrere Event-Handler onmousemove.

Styling der Anwendung

Das CSS für #playerWrapper:before definiert den Kreis mit dem Steckerzeichen darin, das sich oben links im Player befindet. Das CSS für #playerWrapper definiert die Grenze um den Spieler.

Plugin-Code

In diesem Beispiel gibt es kein echtes Brightcove Player-Plugin, da kein Brightcove Player API-Code verwendet wird. Das JavaScript und das CSS können in separate Dateien verschoben und im Code verknüpft werden. Dies wird im Plugin-Ordner in GitHub angezeigt.