Schritt für Schritt: Brightcove-Player

Überblick

Dieses Dokument bietet eine praktische Einführung in das Erstellen eines Brightcove-Players. Anschließend werden zwei verschiedene Code-Implementierungen verwendet, um ein Video mit dem neu erstellten Player zu veröffentlichen. Sie starten das Abspielen des Videos auch programmgesteuert und fügen dem Player dann ein Plugin hinzu.

In diesem Schnellstart führen Sie folgende Aufgaben aus:

Erstellen Sie einen Player mit Studio
Veröffentlichen Sie ein Video im Player mit Studio
Verwenden Sie die Iframe-Player-Implementierung
Verwenden Sie die In-Page-Einbettungsimplementierung
Spielen Sie das Video programmgesteuert ab
Fügen Sie dem Player das Overlay-Plugin hinzu

Spieler erstellen

Führen Sie die folgenden Schritte aus, um einen neuen Player zu erstellen.

Melden Sie sich bei Studio unter an https://studio.brightcove.com/ .
Der aktuelle Kontoname wird in der oberen linken Ecke der Seite unter dem Produktnamen (in diesem Fall Video Cloud) angezeigt. Wenn Sie auf Ihr Profil klicken, sehen Sie Ihr aktuelles Konto und alle anderen Konten (falls vorhanden). Klicken Sie einfach auf das Konto, an dem Sie arbeiten möchten.
Klicken Sie in der Hauptnavigation auf den Link Spieler .
Klicken Sie auf die Schaltfläche Player hinzufügen .
Geben Sie ein Name und kurze Beschreibung für den Spieler. Für diesen Schnellstart wird der Name des Players Sample Player sein.
Klicken Sie auf Speichern.
Bestätigen Sie, dass der neu erstellte Spieler in der Liste der Spieler angezeigt wird.

Video im Player veröffentlichen

Als Nächstes veröffentlichen Sie ein Video in dem neu erstellten Player im Medienmodul. Sobald Sie das Video mit Ihrem Player verknüpft haben, veröffentlichen Sie das Video und haben dann Zugriff auf drei Implementierungen, in denen Sie das Video in Ihrem Player ansehen können.

Gehen Sie folgendermaßen vor, um ein Video in Ihrem Player zu veröffentlichen:

Navigieren Sie in Studio zum Modul Medien, indem Sie in der Hauptnavigation auf das Symbol Medien klicken.
Klicken Sie in die Zeile des Videos, das Sie in Ihrem Player veröffentlichen möchten, und klicken Sie dann auf Veröffentlichen und einbetten > Im Web veröffentlichen.
Hinweis: Wenn das Video eine Tonspur hat, werden Sie den Ton später nicht hören, wenn Sie das Video im Player veröffentlichen. Der Grund dafür ist, dass das Video automatisch abgespielt wird, und Audio ist in solchen Fällen nicht erlaubt. Siehe das Dokument Überlegungen zur automatischen Wiedergabe Weitere Informationen zu Videos, die ohne Benutzerinteraktion abgespielt werden.
Wählen Sie aus dem Dropdown-Menü Player auswählen Ihren neu erstellten Player aus.
Sie haben jetzt Zugriff auf die drei Implementierungen des Players: Standard (iframe), Fortgeschrittene (In-Page) und a Vorschau im Browser URL. Schließen Sie dieses Fenster nicht, da Sie später in diesem Schnellstart mehrmals Code daraus kopieren werden.

Sie verwenden den JSON-Editor, um dem Player ein Video hinzuzufügen. Führen Sie die folgenden Schritte aus, um den Videoinhalt zu konfigurieren.

Klicken Sie auf den Link für die Beispiel-Player um die Player-Eigenschaftenseite zu öffnen.
Klicken JSON-Editor im linken Navigationsmenü.
Setzen Sie ein Komma nach der zweiten bis letzten Klammer in den JSON.

Fügen Sie direkt über der letzten schließenden Klammer Folgendes hinzu, um dem Player ein Video und ein Poster zuzuweisen. Natürlich können Sie Ihr eigenes Video und Poster ersetzen.

 "media": { "sources": [{
 "src": "//solutions.brightcove.com/bcls/assets/videos/BirdsOfAFeather.mp4", "type": "video/mp4"
 }],
 "poster": {
 "highres": "//solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather.jpg"
 }
 }

Ihr JSON sollte wie folgt aussehen (der hinzugefügte Text wird gelb hervorgehoben):
Klicken Sie auf Speichern.

Klicken Veröffentlichen & Einbetten und dann Änderungen veröffentlichen um deinen Player zu veröffentlichen.
In demselben Dialogfeld, in dem Sie Ihre Änderungen veröffentlicht haben, können Sie auch den Standard-Implementierungscode (iframe) oder den erweiterten (in die Seite eingebetteten) Player-Implementierungscode kopieren. Beachten Sie, dass der Implementierungscode das widerspiegelt Dimensionierung (( Reaktionsschnell oder Fest ), Seitenverhältnis und Maße Entscheidungen getroffen und gespeichert in der Spielerinformationen Optionen.
Kopieren Sie beide Code-Implementierungstypen zur späteren Verwendung in eine Textdatei.

Verwenden Sie den Standardcode

Erstellen Sie eine HTML-Seite und fügen Sie die ein Standard (iframe) Code aus dem vorherigen Schritt in den Körper.
Wenn Sie diese Seite durchsuchen, sehen Sie, dass das Video das widerspiegelt Dimensionierung (( Reaktionsschnell oder Fest ), Seitenverhältnis und Maße Entscheidungen getroffen.

Verwenden Sie die erweiterte Einbettung Code

In diesem Abschnitt verwenden Sie die erweiterte Codeimplementierung (In-Page-Einbettung).

Kehren Sie zum Veröffentlichungsdialogfeld in Video Cloud Studio zurück.
Sieh den Fortschrittlich Code und klicke auf Fest Optionsfeld für Größenbestimmung.
Die Responsiv Die Größenanpassung enthält HTML, um den Player reaktionsfähig zu machen. In dieser Aktivität liegt der Fokus auf dem Spielercode, daher wird der einfachere verwendet Fest Dimensionierung.
Erstellen Sie eine HTML-Seite und fügen Sie die ein Fortgeschrittene (In-Page-Embed) Code von oben in den Körper.
Sehen Sie sich den Code an, der in etwa wie folgt aussieht (fügen Sie zur besseren Lesbarkeit des Player-Codes Zeilenumbrüche ein), und beachten Sie die Attribute:
```
 <video-js data-account="1507807800001"
  data-player="EUYJo0AOB"
  data-embed="default"
  controls=""
  data-video-id="6071787405001"
  data-playlist-id=""
  data-application-id=""
  width="640" height="360"></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
```
- data-account: Die Kontonummer
- data-player: Die ID des Brightcove Players
- data-embed: Entweder default wenn der Spieler eine übergeordnete Einbettung ist oder die ID des übergeordneten Spielers; weitere Informationen zu Einbettungen (Eltern-/Kind-Spieler) finden Sie im Leitfaden für Einbetten (Eltern-/Kind-Spieler)
- controls: Wirkt als boolescher Wert, wenn die Spieler-Steuerelemente vorhanden sein sollen ( controls Attribut im Tag enthalten) oder nicht angezeigt ( controls Attribut ist nicht im Schlagwort)
- data-video-id: Die ID des Video Cloud-Videos (nicht verwenden, wenn eine Wiedergabelisten-ID angegeben wird)
- data-playlist-id: Die ID der Video Cloud-Wiedergabeliste (nicht verwenden, wenn eine Video-ID angegeben wird)
- data-application-id: Ermöglicht die Wiederverwendung eines einzelnen Players, wobei die Analyse jedoch nach Standort oder Anwendung differenziert werden kann. sehen Hinzufügen einer Anwendungs-ID zum Player Embed Code für mehr Informationen
- width & height: Legt die Abmessungen des Spielers fest.
- <script> tag: Jedes Mal, wenn Sie In-Page-Code verwenden, wird ein Begleitcode angezeigt script Etikett; Die referenzierte JavaScript-Datei enthält alle JavaScript- und CSS-Dateien, die dem jeweiligen Player zugeordnet sind
Untersuchen Sie den Code, der dem folgenden ähnlich erscheint, und notieren Sie sich die Attribute:
```
 <video data-account="1507807800001"
 data-player="H15p1gTkg"
 data-embed="default"
 data-application-id
 controls=""></video>
 <script src="https://players.brightcove.net/1507807800001/H15p1gTkg_default/index.min.js"></script>
```
- data-account: Die Kontonummer
- data-player: Die ID des Brightcove Players
- data-embed: Entweder default wenn der Spieler eine übergeordnete Einbettung ist oder die ID des übergeordneten Spielers; weitere Informationen zu Einbettungen (Eltern-/Kind-Spieler) finden Sie im Leitfaden für Einbetten (Eltern-/Kind-Spieler)
- class: Die Standard-Brightcove-Player-CSS-Klasse, die dem In-Page-Einbettungscode zugeordnet ist
- controls: Wirkt als boolescher Wert, wenn die Spieler-Steuerelemente vorhanden sein sollen ( controls Attribut im Tag enthalten) oder nicht angezeigt ( controls Attribut ist nicht im Schlagwort)
- <script> tag: Alle zugehörigen JavaScript- und CSS-Elemente, die dem jeweiligen Player zugeordnet sind
Wenn Sie auf dieser Seite blättern, sehen Sie, dass das Video die gewählte Größe ( fest ), das Seitenverhältnis und die Abmessungen widerspiegelt.

Programmgesteuert Video abspielen

Es gibt eine umfangreiche API, die mit Brightcove Player verwendet werden kann. In diesem Abschnitt verwenden Sie die play() Methode zum programmgesteuerten Starten der Videowiedergabe.

Fügen Sie eine hinzu id Attribut auf die video Tag mit einem Wert von myPlayerID .
```
 <video id="myPlayerID" 
```
Gleich über dem Abschluss body Tag, fügen Sie ein script Block.
```
 <script> </script>
 </body>
```
Verwenden Sie im Skriptblock die on() Methode, um auf die zu hören loadedmetadata Veranstaltung. Wenn das Ereignis ausgelöst wird, wird eine anonyme Ereignishandlerfunktion aufgerufen.
```
videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
   
});
```
Hinweis: Weitere Informationen zu den Startereignissen von Brightcove Player finden Sie unter Startereignisse Abschnitt der Grundlegendes zu Spielerereignissen Dokument.
Erstellen Sie in der Funktion eine Variable namens myPlayer, die dieser Variablen die Player-Instanz, auf die verwiesen wird this, zuweist.
```
 var myPlayer = this;
```
Da die meisten Browser die automatische Wiedergabe von Videos mit einer Audiospur nicht mehr zulassen, ist es am besten, die zu verwenden muted() Methode, um das Video stummzuschalten und sicherzustellen, dass das Video automatisch wiedergegeben wird.
```
 myPlayer.muted(true);
```
Siehe die Überlegungen zur automatischen Wiedergabe Dokument, um weitere Informationen zum Autoplay-Problem zu erhalten.
Verwenden Sie die des Spielers play() Methode zum Starten des Videos.
```
 myPlayer.play();
```

Bestätigen Sie, dass Ihr Skriptblock wie folgt angezeigt wird.

 <script> 
   videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
     var myPlayer = this;
     myPlayer.muted(true);
     myPlayer.play();
   });
 </script>

Speichern Sie Ihre Änderungen und aktualisieren Sie Ihre Seite im Browser, um zu sehen, dass das Video automatisch abgespielt wird. Wenn Sie ein Video mit einer Audiospur auswählen, hören Sie diese nicht, da Videos mit automatischer Wiedergabe die Audiospur nicht abspielen (Browserregeln, nicht Brightcove).

Plugin hinzufügen

Brightcove Player verfügt über viele Plugins, mit denen Sie den Player verbessern können. Ein solches Plugin ist das Overlay Plugin. In diesem Abschnitt fügen Sie dieses Plugin dem erweiterten Code hinzu, den Sie im letzten Abschnitt fertiggestellt haben. Details zum Plugin finden Sie im Overlay-Plugin anzeigen Dokument.

Wenn Sie ein Plugin verwenden, müssen Sie den Pfad zum JavaScript angeben, das die Plugin-Implementierung ist. Möglicherweise müssen Sie auch den Link zu einem CSS bereitstellen, wenn dies vom Plugin benötigt wird.

Gleich über dem Abschluss head Fügen Sie die folgende Link-Anweisung ein, die auf die Position des CSS für das Overlay-Plugin verweist.
```
 <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
```
Fügen Sie direkt über dem zuvor hinzugefügten Skriptblock Folgendes hinzu script Tag, das der eigentliche JavaScript-Code ist, der die Overlay-Plugin-Funktionalität implementiert.
```
 <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script> <script>
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
```
Kurz danach wo die play() Methode verwendet wird, rufen Sie den Spieler overlay() Methode und fügen Sie geschweifte Klammern als Parameter hinzu, um die Übergabe eines JSON-Konfigurationsobjekts vorzubereiten.
```
 myPlayer.overlay({ });
```
Mehrere Overlay-Objekte können als Array an das Plugin übergeben werden, um unterschiedliche Inhalte zu verschiedenen Zeiten und an verschiedenen Orten anzuzeigen. In diesem Fall wird nur ein Überlagerungsobjekt übergeben, um Text anzuzeigen, und dieser wird nur angezeigt, wenn das Video abgespielt wird. Wenn das Video angehalten wird, wird das Overlay nicht angezeigt. Sie möchten auch, dass das Overlay in der rechten Mitte des Players erscheint. Fügen Sie dazu das folgende Overlay-Objekt als Konfigurationsparameter hinzu.
```
 overlays: [{ 
  content: 'This event-triggered overlay message appears when the video is playing', 
  start: 'play',
  end: 'pause',
  align: 'right'
}]
```

Vergewissern Sie sich, dass Ihr Skriptblock wie folgt angezeigt wird und dass das Overlay-Plugin korrekt aufgerufen und konfiguriert wurde.

 <script> 
  videojs.getPlayer('myPlayerID').on('loadedmetadata', function() {
    var myPlayer = this;
    myPlayer.muted(true);
    myPlayer.play();
    myPlayer.overlay({
      overlays: [{
        content: 'This event-triggered overlay message appears when the video is playing', 
        start: 'play',
        end: 'pause',
        align: 'right'
      }]
    });
  });
</script>

Speichern Sie Ihre Änderungen und aktualisieren Sie Ihre Seite im Browser, um zu sehen, dass das Video automatisch abgespielt wird. Sie sehen die Überlagerung, wenn das Video gestartet wird. Halten Sie das Video an, um zu sehen, wie das Overlay entfernt wurde.
Hinweis: Die Implementierung der hier gezeigten Overlay Plugin Show wird nur mit dem Player auf der spezifischen HTML-Seite verwendet. Sie können ein Plugin hinzufügen, um Teil eines Players zu sein, unabhängig davon, wo oder wie oft der Player verwendet wird, ohne wiederholt Code kopieren und einfügen zu müssen. Sehen Sie sich Schritt für Schritt an: Plugin-Entwicklung einen entwicklerorientierten Ansatz bei der Umsetzung zu sehen, bzw Konfigurieren von Player-Plugins Dokument, um zu sehen, wie das Plug-in mit Studio am einfachsten im Player implementiert werden kann.

Für Ihre Überprüfung kann der HTML-Code der gesamten Seite hier angezeigt werden:

<!doctype html> 
<html>
<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'> </head>
<body>
  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="UEoNyhSA6"
    data-embed="default"
    controls=""
    data-video-id="4607357817001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video>
  <script src="https://players.brightcove.net/1752604059001/UEoNyhSA6_default/index.min.js"></script> 
  
  <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script> 
  <script>
    videojs.getPlayer('myPlayerID').on('loadedmetadata', function() { 
      var myPlayer = this;
      myPlayer.muted(true);
      myPlayer.play();
      myPlayer.overlay({
        overlays: [{
          content: 'This event-triggered overlay message appears when the video is playing', 
          start: 'play',
          end: 'pause',
          align: 'right'
        }]
      });
    });
  </script>
</body>
</html>

 <!doctype html> <html>
 <head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
 <style>
 .video-js {
 height: 344px;
 width: 610px;
 }
 </style>
 <link href="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.css" rel='stylesheet'> </head>
 <body>
 <video id="myPlayerID"
 data-account="3676484087001"
 data-player="78ef7d78-18d9-4459-a6da-d94e46163076"
 data-embed="default"
 controls></video>
 <script src="https://players.brightcove.net/3676484087001/78ef7d78-18d9-4459-a6da-d94e46163076_default/index.min.js"></script> <script src="https://players.brightcove.net/videojs-overlay/lib/videojs-overlay.js"></script> <script>
 videojs.getPlayer('myPlayerID').on('loadedmetadata', function () { var myPlayer = this;
 myPlayer.play();
 myPlayer.overlay({
 overlays: [{
 content: 'This event-triggered overlay message appears when the video is playing', start: 'play',
 end: 'pause'
 }]
 });
 });
 </script>
 </body>
 </html>