Beispiel für Brightcove Spieler: Horizontale Lautstärk

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.

Wählen Sie die Implementierung

In diesem Beispiel testen Sie mit dem In-Page-Einbettungscode und fügen dann die CSS- und JavaScript-Dateien zum Player hinzu. Dann stellen Sie das Plugin bereit. Wenn das horizontale Volume-Plugin dem Player hinzugefügt wurde, können Sie die Iframe-Implementierung verwenden.

Verwendete API-Ressourcen

In den folgenden Abschnitten werden Ressourcen beschrieben, die von verschiedenen APIs verwendet werden.

Brightcove Player API-Methoden

control_bar.addChild()
control_bar.removeChild()

Der Spieler

Beachten Sie im folgenden Player, dass die horizontale Lautstärkeregelungsleiste die standardmäßige vertikale Steuerleiste ersetzt.

So funktioniert es

In den folgenden Abschnitten wird der im Beispiel verwendete Player, JavaScript und CSS-Code erläutert.

Erstelle den Spieler

Gehen Sie folgendermaßen vor, um einen Player zu erstellen und ihm ein Video zuzuweisen:

Erstellen Sie im Player-Modul einen neuen Player oder verwenden Sie einen vorhandenen Spieler.
Wählen Sie im Medienmodul ein Video aus und veröffentlichen Sie es mit diesem Player.Weisen Sie dem Player Videoinhalte zu und veröffentlichen Sie ihn.
Kopieren Sie den In-Page-Einbettungscode und fügen Sie ihn in eine neue HTML-Datei ein.

Der Spielercode

Ihr In-Page-Einbettungscode sollte folgendermaßen aussehen:

    <video-js id="video_1"
      width="640px" height="360px"
      data-video-id="4172255216001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      controls=""></video-js>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Das Stylesheet

In diesem Beispiel werden CSS-Stile für den Brightcove Player verwendet.

Zeilen 9-22: Legen Sie die Reihenfolge der Elemente in der Steuerleiste fest. In diesem Beispiel wird die Stummschaltung und die Lautstärkeregler nach dem Fortschrittsbalken platziert, jedoch vor der Vollbildtaste.

Hinweis: Die Steuerleiste verwendet einen Flex-Container, um ihre Elemente zu gestalten. Standardmäßig werden Flex-Elemente so angeordnet, wie sie im HTML-Quellcode angezeigt werden. Mit der order CSS-Eigenschaft können Sie die Position von Flexelementen steuern. Für ältere Browser müssen Sie zusätzliche Auftragseigenschaften mit Präfix angeben.

Weitere Einzelheiten zum Festlegen der Reihenfolge der Steuerleistensymbole finden Sie unter Passen Sie das Erscheinungsbild des Spielers an dokumentieren.
Zeilen 24-26: Entfernen Sie den Standardschatten um den Lautstärkeregler, um den Fortschrittsbalken besser anzupassen.
Zeilen 27-34: Stellen Sie die Höhe und Hintergrundfarbe für den Lautstärkeregler ein.
Zeilen 36-38: Fügen Sie rechts neben dem Lautstärkeregler eine Polsterung hinzu, um sicherzustellen, dass er sich nicht mit der Vollbildtaste überlappt.

    <style type="text/css">
        /* Order of controls in bar, should flow in before fullscreen button.  */
        .vjs-mute-control {
          order: 7;
          -webkit-box-ordinal-group: 7;
          -moz-box-ordinal-group: 7;
          -webkit-order: 7;
          -ms-flex-order: 7;
        }
        .vjs-volume-control {
          order: 8;
          -webkit-box-ordinal-group: 8;
          -moz-box-ordinal-group: 8;
          -webkit-order: 8;
          -ms-flex-order: 8;
        }
        /* Better match progress bar */
        .video-js.video-js .vjs-volume-bar:before {
          box-shadow:none;
        }
        .video-js.video-js .vjs-volume-bar,
        .video-js.video-js .vjs-volume-bar:before,
        .video-js.video-js .vjs-volume-level {
          height: 4px;
        }
        .video-js.video-js .vjs-volume-handle {
          background-color: initial;
        }
        /* Additional padding to reduce inadvertently covering the fullscreen button */
        .vjs-volume-control {
          padding-right: 5px;
        }
    </style>

Der JavaScript Code

Fügen Sie Ihrem Seitencode das folgende JavaScript hinzu.

Zeile 57: Ruft einen Verweis auf den Spieler ab, wenn er bereit ist.
Zeile 59: Ruft einen Verweis auf die Steuerleiste des Spielers ab.
Zeile 60: Ruft einen Verweis auf die Schaltfläche zum Lautstärkemenü ab
Zeilen 61-62: Fügen Sie der Steuerleiste die Stummschaltungstaste und die Lautstärkeregler hinzu.

Hinweis: Standardmäßig werden die Flex-Elemente in der Steuerleiste so angeordnet, wie sie im HTML-Quellcode angezeigt werden. Für ältere Browser wie IE9 ist die Reihenfolge, in der Sie diese Elemente hinzufügen, wichtig. Hier fügen wir zuletzt den Stummschaltknopf hinzu, so dass er links neben dem Lautstärkeregler erscheint.

Hinweis: Die MuteToggle und VolumeControl Clases finden Sie im Brightcove Player API Index.
Zeile 63: Entfernt die standardmäßige Lautstärkemenüschaltfläche aus der Steuerleiste.

    <script id="pageScript" type="text/javascript">
        var myPlayer;

        videojs.getPlayer('video_1').ready(function(){
            myPlayer = this;

            var control_bar = myPlayer.controlBar;
            var vmb = control_bar.volumeMenuButton;
            control_bar.addChild('VolumeControl');
            control_bar.addChild('MuteToggle');
            control_bar.removeChild(vmb);
        });
    </script>

Benutze ein Plugin

Es empfiehlt sich, ein Plugin zu verwenden, damit Sie diese Funktionalität problemlos mehreren Spielern hinzufügen können.

Erstellen Sie die CSS-Datei

Verschieben Sie die CSS-Stile in eine Datei und platzieren Sie sie in einer URL, die über das Internet zugänglich ist.

Erstellen Sie eine neue Datei für Ihre CSS-Stile. Nennen Sie es in diesem Fall horizontal-volume.css.
Fügen Sie im <head> Abschnitt Ihrer HTML-Datei den folgenden Link hinzu, um Ihre neu erstellte CSS-Datei aufzunehmen.
```
<link href="horizontal-volume.css" rel="stylesheet"> 
```
Durchsuchen Sie die HTML-Seite. Sie sollten den horizontalen Lautstärkeregler sehen, außer dass Ihre Stile jetzt von der HTML-Seite entfernt wurden.

Die JavaScript-Datei

Verschieben Sie den JavaScript-Code des Plugins in eine Datei und legen Sie ihn in eine Internet-zugängliche URL ab.

Erstellen Sie eine neue Datei für Ihr Plugin JavaScript-Code. Nennen Sie es in diesem Fall horizontal-volume.js.
Ausschneiden und fügen Sie den JavaScript-Code aus Ihrer Haupt-HTML-Datei in diese neue Datei ein.
Linien 77,85: Wickeln Sie Ihren JavaScript-Code mit der videojs.registerPlugin() Funktion Das erste Argument ist der Name des Plugins. horizontalVolume
Zeile 78: Ruft einen Verweis auf deinen Spieler ab.
Der Rest ist Ihr JavaScript-Code, der in einem vorherigen Abschnitt überprüft wurde.

/**
 * Horizontal Volume
 */
videojs.registerPlugin('horizontalVolume', function() {
    var myPlayer = this,
    control_bar = myPlayer.controlBar,
    vmb = control_bar.volumeMenuButton;

    control_bar.addChild('VolumeControl');
    control_bar.addChild('MuteToggle');
    control_bar.removeChild(vmb);
});

Fügen Sie in der HTML-Datei den folgenden Code direkt unter den vorhandenen <script> Tags hinzu. Dieser Code enthält die JavaScript-Datei und ruft dann die in diesem JavaScript definierte Methode auf.
```
<script type="text/javascript" src="horizontal-volume.js"></script>
<script>videojs.getPlayer('video_1').horizontalVolume();</script>
```
Durchsuchen Sie die HTML-Seite. Sie sollten den horizontalen Lautstärkeregler sehen, außer jetzt wurde Ihr JavaScript-Code von der HTML-Seite entfernt.

Bereitstellen von Plugin und CSS

Gehen Sie folgendermaßen vor, um den Overlay-Button Plugin mit dem Player-Modul bereitzustellen:

Öffnen Sie im neuen Video Cloud Studio das Player-Modul und suchen Sie den Player.
Klicken Sie auf den Link für den Spieler, um die Spielereigenschaften zu öffnen.
Suchen Sie die Plugins Abschnitt und klicken Sie auf Bearbeiten.
Geben Sie für die JavaScript-URL die URL ein, die den Speicherort angibt, an dem Sie das JavaScript Ihres Plugins gespeichert haben.
Geben Sie für die CSS-URL die URL ein, die den Speicherort angibt, an dem Sie das CSS Ihres Plugins gespeichert haben.
Geben Sie für den Namen HorizontalVolume ein.
Dieses Plugin hat keine Optionen, sodass Sie den Abschnitt mit den Plugin-Optionen leer lassen können.
Klicken Sie auf Speichern und dann auf Player veröffentlichen.

Benutze iframe

Es empfiehlt sich, die Iframe-Player-Implementierung zu verwenden. Wenn dies für dieses Beispiel möglich ist, ersetzen Sie die In-Page-Einbettungsimplementierung durch die iframe-Implementierung.

Wählen Sie im Medienmodul ein Video aus und veröffentlichen Sie es mit diesem Player.Kehren Sie zum Player-Modul zurück.

Kopieren Sie den iframe-Einbettungscode und fügen Sie ihn in eine neue HTML-Datei ein. Ihr Code sollte folgendermaßen aussehen:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Brightcove Player: Horizontal Volume - iframe</title>
</head>

<body>
    <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe>

</body>
</html>

Durchsuchen Sie die HTML-Seite. Sie sollten sehen, dass das Plugin ordnungsgemäß funktioniert.