Beispiel eines Spielers
Fahren Sie mit der Maus über und aus dem Player unten, um die Funktionalität zu sehen.
Siehe den Pen 18165-Vergrößerung-Player-Mouseover von Brightcove Learning Services (@bcls1969) 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:
- 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.
- Passen Sie in CodePen an, welcher Code angezeigt werden soll. Sie können die Breite verschiedener CodeAbschnitte in CodePen ändern.
- 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:
- Verwenden Sie die In-Page-Embed-Player-Implementierung, um die Funktionalität Ihres Players, Plugins und CSS zu testen (falls CSS benötigt wird)
- Legen Sie JavaScript und CSS des Plugins in separate Dateien zum lokalen Testen
- Stellen Sie den Plugin-Code und das CSS auf Ihrem Server bereit, sobald Sie Fehler herausgefunden haben
- Benutze Studio, um das Plugin und das CSS deinem Player hinzuzufügen
- 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.
Einzelheiten zur Implementierung
Es gibt zusätzliche Logik, die die Player-API verwendet, um das Verkleinerungsverhalten während der Wiedergabe des Videos zu entfernen und es dann erneut wiederherzustellen, wenn das Video angehalten oder beendet wird. Wie hier erstellt, muss dieses Beispiel das Advanced(In-Page-) Player Embed verwenden. Sie könnten diese Funktionalität auch mit dem iframe Einbettungscode erstellen, aber die Logik wäre ein wenig anders und würde sich nicht dazu eignet, in ein Plugin umgewandelt zu werden.
Verwendete API/Plugin-Ressourcen
| API-Ereignisse |
|---|
| spielen |
| pausieren |
| endete |
Player-/HTML-Konfiguration
In diesem Beispiel verwendet der Brightcove Player-Code ein style Attribut mit dem width und height Eigenschaften, die auf eingestellt sind 100%.
Anderes HTML
Um den Einbettungscode des Spielers wird ein <div> Spieler-Wrapper-Element hinzugefügt, um die Größe des Players dynamisch zu steuern.
Denken Sie daran, das id Attribut dem video-js Tag im Einbettungscode des Spielers hinzuzufügen.
<video-js id="myPlayerID"
...
Ablauf der Anwendung
Die grundlegende Logik hinter dieser Anwendung lautet:
- Definiere die großen und kleinen Spielergrößen.
- Füge Funktionen hinzu, um den Spieler groß oder klein zu machen.
- Listener für hinzufügen
mouseoverUndmouseoutVeranstaltungen. - Machen Sie den Spieler beim Mouseover groß. Machen Sie den Spieler beim Mouseout klein. Halten Sie den Player groß, während das Video abgespielt wird. Wenn das Video angehalten ist oder das Video endet, machen Sie den Player klein.
Holen Sie sich DOM-Referenzen
Holen Sie sich einen Verweis auf den Brightcove Player und den Wrapper. Definiere die Größe der großen und kleinen Spieler.
Ändern Sie die Größe des Spielers
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ Change the size of the player +++
Füge Funktionen hinzu, um den Player groß und klein zu machen.
Hören Sie auf das Mouseout-Event
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ Listen for the mouseout event +++
Hören Sie auf die mouseout Veranstaltung auf der playerWrapper. Wenn das Event ausgelöst wird, mach den Spieler klein.
Steuere die Spielergröße
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ Control the player size +++
Fügen Sie Logik hinzu, um Folgendes zu tun:
- Machen Sie den Spieler zunächst klein.
- Am
mouseover, mach den Spieler groß. - Halten Sie den Spieler bei einem
playEvent groß. - Bei
pauseoderendedEvents, mach den Spieler klein. - An
mouseout, mach den Spieler klein.
Styling der Anwendung
Das CSS legt zunächst das fest playerWrapper und definiert den Übergang zwischen dem kleinen und dem großen Spieler.
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: enlarge-player.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.
Hinweise zur Implementierung
-
Wenn Sie in der Lage sein möchten, die kleinen und großen Größen des Players für jede Instanz anzugeben, können Sie diese als Optionen an das Plugin übergeben und dann den Plugin-Code ändern, um die Werte aus dem Options-Objekt zu lesen. Sehen Sie sich Schritt für Schritt an: Plugin Development für weitere Einzelheiten darüber, wie das geht.
-
Wenn Sie den Iframe-Player anstelle des Inpage-Players verwenden möchten. Das Player-Wrapper-Div würde das iframe-Tag umgeben, und das Javascript zur Verwaltung der Größe des Players wäre dem, was Sie hier sehen, sehr ähnlich. Es müsste jedoch auf der HTML-Seite sein, anstatt auf einem Player-Plugin.