Beispiel für Brightcove Spieler: Zeit-Tor

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.

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.

Werfen wir einen genaueren Blick darauf, wie wir CSS verwendet haben, um den großen Play-Button und die Steuerleiste auszublenden. Eine Einführung zum Ändern des Aussehens des Brightcove-Players finden Sie unter Anpassen des Aussehens des Spielers Führung.

Lassen Sie uns zunächst den Stil ändern, um den großen Play-Button des Spielers auszublenden.

1. Öffnen Sie im Chrome-Browser die Developer Tools.
2. Klicken Sie mit der rechten Maustaste auf den Player und wählen Sie Element inspizieren aus.
3. Wählen Sie in den Entwicklertools im Abschnitt Elemente den HTML-Code aus, der der großen Play-Schaltfläche zugeordnet ist.
4. Im Stile Abschnitt, können Sie sehen, dass das Original display Eigentum mit einem Wert von block ist auf eingestellt <div> Element.

   

5. Beim Überschreiben von CSS-Werten gewinnen spezifischere Stile weniger spezifische Stile. Da Elemente den niedrigsten Spezifitätswert haben, können wir die Anzeigeeigenschaft überschreiben, indem wir einfach die vjs-big-play-button Klasse angeben.

6. Schau dir unser CSS an, um den großen Play-Button unten zu finden. In diesem Beispiel sagen wir, dass Sie alle Elemente mit einem Klassennamen auswählen vjs-big-play-button, von denen es sich um Dezendenten des Elements mit Klassennamen handelt video-agelist. Denken Sie daran, dass wir im JavaScript-Code die video-agelist Klasse dem Spieler hinzugefügt haben.

                 video-agelist.video-js .vjs-control-bar,
                 .video-agelist .vjs-big-play-button {
                     display: none;
                 }

Als Nächstes ändern wir den Stil, um die Steuerleiste des Spielers auszublenden.

1. Wählen Sie in den Entwicklertools im Abschnitt Elemente den HTML-Code aus, der der Player-Steuerleiste zugeordnet ist.
2. Im Stile Abschnitt, können Sie sehen, dass das Original display Eigentum mit einem Wert von flex wird mit drei Klassenattributen im Selektor festgelegt.

   

3. Um den Stil für die Steuerleiste außer Kraft zu setzen, benötigen wir mindestens drei Klassenattribute in unserem Selektor, einschließlich der vjs-control-bar Klasse.
4. Schauen Sie sich unser CSS an, um die Steuerleiste unten zu finden. In diesem Beispiel sagen wir, dass Sie alle Elemente auswählen, vjs-control-bar deren Klassennamen Dezendenten des Elements mit einem Klassennamen video-agelist und einem Klassennamen sind ein Klassenname von video-js.

               .video-agelist.video-js .vjs-control-bar,
               .video-agelist .vjs-big-play-button {
                   display: none;
               }

   Weitere Informationen zur Berechnung des Spezifitätswerts finden Sie unter Einzelheiten zur CSS-Spezifität Buchseite.