Beispiel eines Spielers
Im HTML verwendet dieses Beispiel Inline-Stile in den div Tags um den Einbettungscode des Players, um ein vertikales Video im Brightcove Player anzuzeigen.
Zusätzlicher CSS- und JavaScript-Code ist verfügbar, wenn Sie die hinzugefügte Funktionalität hinzufügen möchten, bei der sich die Breite der Videoansicht bei der Anzeige auf einem Mobilgerät auf volle Breite erweitert.
Sehen Sie sich das vertikale Pen Video von Brightcove Learning Services (@rcrooks1969) auf CodePen an.
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 aktuelle Anzeige des Players um, indem Sie auf klicken Ergebnis Taste.
- Drücke den HTML/CSS/JS Tasten, um EINEN der Codetypen anzuzeigen.
- 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 AUF CODEPEN BEARBEITEN im CodePen und haben Sie den Code in einem Browser/Browser-Tab verfügbar.
- 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.
Verwendete API/Plugin-Ressourcen
| API-Methoden | API-Ereignisse |
|---|---|
| addClass () | spielen |
| addChild () | endete |
| schließen () | |
| currentTime () |
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.
Videokonfiguration
In diesem Beispiel wird ein Video-Asset verwendet, das im Hochformat auf einem mobilen Gerät erstellt wurde. Dieses vertikale Video wurde unter Verwendung eines Standard-Aufgangprofils aufgenommen.
HTML-Inline-Styling
Der <video> Stichworte style Das Attribut legt die Größe des Players fest, um das übergeordnete Element zu füllen <div> Element.
Die beiden <div> Elemente um das <video> Tag herum werden verwendet, um einen responsiven Player mit einer maximalen Breite von 286px.
Ablauf der Anwendung
Wenn Sie mit der Größe des Players mit den HTML-Stilen zufrieden sind, können Sie Ihren Player ohne den folgenden CSS- und JavaScript-Code implementieren.
Optional: Zusätzlicher Code ist erforderlich, wenn der Player beim Start der Wiedergabe auf die volle Breite der Geräteansicht erweitert und dann auf die ursprüngliche 286px Breite zurückkehrt, wenn das Video beendet ist. Die grundlegende Logik lautet:
- Initialisieren Sie Variablen und suchen Sie nach Mobilgerät
- Definieren Sie eine modale Schließschaltfläche
- Wenn die Wiedergabe beginnt, wechseln Sie in den Modus mit voller Breite
- Wenn die Wiedergabe beendet ist, beenden Sie den Modus mit voller Breite
Initialisieren Sie Variablen und suchen Sie nach Mobilgerät
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ Initialize variables and check for mobile device +++
Prüfen Sie, ob die Wiedergabe auf einem Mobilgerät stattfindet.
Definieren Sie eine modale Schließschaltfläche
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ Define a modal close button +++
Wenn sich der Benutzer auf einem mobilen Gerät befindet, definieren Sie eine Schaltfläche zum Schließen, um den Modus mit voller Breite zu verlassen. Der Player verlässt den Modus mit voller Breite am Ende der Videowiedergabe oder wenn der Benutzer auf die Schaltfläche „Modal schließen“ tippt.
Wenn die Wiedergabe beginnt, wechseln Sie in den Modus mit voller Breite
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ When playback begins, enter full width mode +++
Wenn die Videowiedergabe beginnt, stellen Sie den Player auf die volle Breite der Geräteansicht ein.
Wenn die Wiedergabe beendet ist, beenden Sie den Modus mit voller Breite
Finden Sie den Code, der mit der Bezeichnung versehen ist:
// +++ When playback ends, exit full width mode +++
Wenn die Videowiedergabe beendet ist, stellen Sie den Player auf die ursprüngliche Breite ein.
Styling der Anwendung
Das CSS stylt die Schließen-Schaltfläche und den großen Play-Button.
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: vertical-video.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.