Wiedergabelisten implementieren

Überblick

Wenn Sie Wiedergabelisten verwenden, sollten Sie zunächst entscheiden, wo die Wiedergabeliste in Bezug auf den Player angezeigt werden soll. Normalerweise sehen Sie bei Verwendung von Brightcove Player Wiedergabelisten rechts vom Player vertikal oder horizontal unterhalb des Players. (As you will see later in this document, you have flexibility to locate the playlist in other places.) Es folgen Implementierungen einer vertikal und horizontal platzierten Wiedergabeliste.

Beispiel für eine vertikale Wiedergabeliste

Das Folgende zeigt eine vertikale Wiedergabeliste:

Beispiel für eine horizontale Wiedergabeliste

Das Folgende zeigt eine horizontale Wiedergabeliste:

Neben der Richtung der Wiedergabeliste müssen Sie auch den HTML-Code festlegen, den Sie für die Implementierung verwenden möchten. Standard oder Fortgeschrittene. Das Folgende zeigt die vier resultierenden Optionen, die Sie haben:

Überblick über die Implementierung

Führen Sie die folgenden Aufgaben aus, um Wiedergabelisten zu verwenden:

1. Erstellen Sie eine Wiedergabeliste entweder in Studio oder manuell mit JavaScript.
2. Aktivieren Sie Ihren Player um Wiedergabelisten mit den Player-Eigenschaften von Studio zu verwenden Styling Möglichkeit.
3. Implementieren Sie die Wiedergabeliste entweder mit Standard (Iframe) Spieler oder die Erweitert (In-Page-Einbettung) Implementierung.
4. Wenn Sie die Wiedergabeliste programmgesteuert steuern möchten, verwenden Sie die Playlist API.

Spieler aktivieren

Sie können Studio verwenden, um Ihrem Player die Verwendung von Wiedergabelisten zu ermöglichen. Befolgen Sie dazu die folgenden Schritte:

1. Öffne das SPIELER Modul und erstellen Sie entweder einen neuen Player oder suchen Sie den Player, den Sie für Wiedergabelisten aktivieren möchten.
2. Klicken Sie auf den Link für den Spieler, um die Eigenschaften des Spielers zu öffnen.
3. Im Spielerinformationen für die Spielertyp drücke den Wiedergabeliste Radio knopf.
4. Klicken Sie auf Speichern.
5. Klicken Styling im linken Navigationsmenü.
6. Wählen Sie Ihren Wunsch Typ der Wiedergabeliste::

   

7. Klicken Wiedergabe im linken Navigationsmenü.
8. Aktivieren Sie die Optionsfelder für die Wiedergabelistenoptionen, die Sie aktivieren möchten:

   

9. Um den Player zu veröffentlichen, klicken Sie auf Veröffentlichen & Einbetten > Änderungen veröffentlichen.
10. Um das Dialogfeld „Öffnen“ zu schließen, klicken Sie auf Schließen.

Standard (iframe) Spieler

Sobald Sie eine Wiedergabeliste zur Verwendung haben und Ihrem Player die Verwendung einer Wiedergabeliste ermöglicht haben, können Sie die Wiedergabeliste tatsächlich mit einem Spieler verwenden. Wie üblich stehen Ihnen die Standard- und Advanced-Player-Implementierungen zur Verfügung. In diesem Abschnitt werden Anweisungen zur Verwendung der Wiedergabeliste mit der Standardimplementierung angezeigt. Bei Verwendung der Implementierung der Standard- / vertikalen Wiedergabeliste wird die Wiedergabeliste auf der rechten Seite des Players angezeigt, wie Sie im Beispiel oben in diesem Dokument gesehen haben.

Sie veröffentlichen eine Wiedergabeliste sehr ähnlich wie Sie ein Video veröffentlichen. In Studios MEDIEN Modul, wählen Sie Ihre Wiedergabeliste und klicken Sie auf Playlist veröffentlichen Taste. Stellen Sie sicher, dass Sie den richtigen Spieler auswählen.

Sobald Sie veröffentlicht haben, wählen Sie Ihren Code. In diesem Abschnitt wird die Standard (Iframe) Code wird demonstriert. Sie können Optionen für den Code (hervorgehoben) auswählen, die sich auf die Größe des Spielers beziehen.

Wenn Sie einen reaktionsschnellen Spieler haben möchten, was eine hervorragende Option ist, wird der Spielercode wie folgt angezeigt:

<div style="position: relative; display: block; max-width: 960px;">
  <div style="padding-top: 56.25%;">
    <iframe src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.html?playlistId=1653281884164948705"
     allowfullscreen="" 
     allow="encrypted-media" 
     style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
  </div>
</div>

Die Zwei div Elemente und zugehörige Attribute machen den Spieler reaktionsschnell.

Einstellen padding-top für eine horizontale Wiedergabeliste

Der gerade angezeigte Code ist NUR für den Spieler. Wenn Sie eine verwenden horizontal Wiedergabeliste, Sie müssen den Code manuell ein wenig anpassen, um Platz für die Wiedergabeliste zu schaffen. Verwenden Sie die folgende Tabelle, um die korrekt zu ändern <div style="padding-top: 56.25%;"> Wert.

Dies bedeutet, wenn Sie ein Video mit einem 16: 9-Seitenverhältnis verwenden, das padding-top Der Wert sollte wie folgt aussehen:

  <div style="padding-top: 70.31%;">

Manuelles Ändern der Wiedergabeliste

Wenn Sie die mit der iframe-Implementierung verwendete Wiedergabeliste ändern möchten, müssen Sie lediglich die ändern src Attribut des Iframes. Bei Verwendung einer ID:

  <iframe src="https://players.brightcove.net/.../index.html?playlistId=1754200320001"

oder wenn Sie eine Referenz-ID verwenden:

  <iframe src="https://players.brightcove.net/.../index.html?playlistId=ref:myrefid001"

Erweiterter Player (Einbetten in die Seite)

Nachdem Sie eine Wiedergabeliste in Studio erstellt haben MEDIEN Modul und haben einen Wiedergabelisten-Player in Studios aktiviert SPIELER Modul sind Sie bereit, die Wiedergabeliste mit einem Player zu implementieren. Mit dem Standard-Einbettungscode Das Plugin erstellt den Playlist-Container und passt ihn an die Größe des Plugins an iframe Element. Mit dem erweiterten In-Page-Einbettungscode müssen Sie den Wiedergabelistencontainer bereitstellen und CSS verwenden, um die Größe des Players und der Wiedergabeliste entsprechend zu bestimmen.

Vertikale Wiedergabeliste

Brightcove hat eine Playlist Player Container für den erweiterten Einbettungscode auf der Seite.

Um den Playlist Player Container zu verwenden, wickeln Sie den Advanced Einbettungscode mit folgendem ein:

<div class="vjs-playlist-player-container">

Feste vertikale Wiedergabeliste

Führen Sie die folgenden Schritte aus, um eine feste vertikale Wiedergabeliste zu erstellen:

1. Holen Sie sich den Advanced Einbettungscode. Nachdem Sie die Wiedergabeliste mit Ihrem konfigurierten Player veröffentlicht haben (wie im obigen Abschnitt beschrieben), wählen Sie den erweiterten Code aus. Es sollte ähnlich sein:

   <video-js data-account="1507807800001" 
     data-player="P0hzAkylr" 
     data-embed="default" 
     controls="" 
     data-video-id="" 
     data-playlist-id="1653281884164948705" 
     data-application-id="" 
     width="960" height="540"></video-js>
   <script src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.min.js"></script>

   Wenn du den Spieler mit dem obigen Code angesehen hast, siehst du KEINE Wiedergabeliste. Wenn Sie die Advanced Implementierung des Players verwenden, MÜSSEN Sie den Player in den Playlist Player Container wickeln.

2. Wickeln Sie den erweiterten Einbettungscode mit dem Playlist Player Container ein und fügen Sie Folgendes hinzu:

   • Ein statisches CSS width, das der Spielergröße entspricht

   <div class="vjs-playlist-player-container" style="width: 960px;">
     <video-js data-account="1507807800001"
     data-player="P0hzAkylr"
     data-embed="default"
     controls=""
     data-video-id=""
     data-playlist-id="1653281884164948705"
     data-application-id=""
     width="960" height="540"></video-js>
   </div>
   <script src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.min.js"></script>

Reaktionsschnelle vertikale Wiedergabeliste

Führen Sie die folgenden Schritte aus, um eine reaktionsschnelle vertikale Wiedergabeliste zu erstellen:

1. Holen Sie sich den Advanced Einbettungscode. Nachdem Sie die Wiedergabeliste mit Ihrem konfigurierten Player veröffentlicht haben (wie im obigen Abschnitt beschrieben), wählen Sie den erweiterten Code aus. Es sollte ähnlich sein:

   <div style="max-width: 960px;">
   	<video-js
   		data-account="1752604059001"
   		data-player="5dBwlwbNk"
   		data-embed="default"
   		controls=""
   		data-video-id=""
   		data-playlist-id="5686354139001"
   		data-application-id=""
   		class="vjs-fluid">
   	</video-js>
   </div>
   <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>

   Wenn du den Spieler mit dem obigen Code angesehen hast, siehst du KEINE Wiedergabeliste. Wenn Sie die Advanced Implementierung des Players verwenden, MÜSSEN Sie den Player in den Playlist Player Container wickeln.

   Beachten Sie, dass der responsive Spieler den max-width Stil und die vjs-fluid Klasse verwendet.

2. Zum <div> Wrapper um die video-js Element, fügen Sie die vjs-playlist-player-container Klasse.

   <div class="vjs-playlist-player-container" style="max-width: 960px;">
   	<video-js
   		data-account="1752604059001"
   		data-player="5dBwlwbNk"
   		data-embed="default"
   		controls=""
   		data-video-id=""
   		data-playlist-id="5686354139001"
   		data-application-id=""
   		class="vjs-fluid">
   	</video-js>
   </div>
   <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>

Horizontale Wiedergabeliste

Brightcove hat eine entwickelt, um eine iframe-ähnliche Erfahrung mit einer horizontalen Wiedergabeliste zu ermöglichen Playlist Player Container für den erweiterten Einbettungscode auf der Seite.

Um den Playlist Player Container zu verwenden, wickeln Sie den Advanced Einbettungscode mit folgendem ein:

<div class="vjs-playlist-player-container">

Feste horizontale Wiedergabeliste

Führen Sie die folgenden Schritte aus, um eine feste horizontale Wiedergabeliste zu erstellen:

1. Holen Sie sich den Advanced Einbettungscode. Nachdem Sie die Wiedergabeliste mit Ihrem konfigurierten Player veröffentlicht haben (wie im obigen Abschnitt beschrieben), wählen Sie den erweiterten Code aus. Es sollte ähnlich sein:

   <video-js
     data-account="1752604059001"
     data-player="5dBwlwbNk"
     data-embed="default"
     controls=""
     data-video-id=""
     data-playlist-id="5686354139001"
     data-application-id=""
     width="960" height="540">
   </video-js>
   <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>

   Wenn du den Spieler mit dem obigen Code angesehen hast, siehst du KEINE Wiedergabeliste. Wenn Sie die Advanced Implementierung des Players verwenden, MÜSSEN Sie den Player in den Playlist Player Container wickeln.

2. Wickeln Sie den erweiterten Einbettungscode mit dem Playlist Player Container ein und fügen Sie Folgendes hinzu:

   • Ein statisches CSS width, das der Spielergröße entspricht

   • Ein statisches CSS height gleich der Größe des Spielers geteilt durch 0,8. Da die horizontale Wiedergabeliste 20% des verfügbaren Speicherplatzes einnimmt, müssen Sie die Player-Höhe so einstellen, dass sie 80% des verfügbaren Speicherplatzes einnimmt. (zB 540px / .8 = 675px)

   <div class="vjs-playlist-player-container" style="width: 960px; height: 675px;">
     <video-js
       data-account="1752604059001"
       data-player="5dBwlwbNk"
       data-embed="default"
       controls=""
       data-video-id=""
       data-playlist-id="5686354139001"
       data-application-id=""
       width="960" height="540">
     </video-js>
   </div>
   <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>

Reaktionsschnelle horizontale Wiedergabeliste

Dies ist die komplexeste Anpassung, da sowohl der Player als auch die Wiedergabeliste in Bezug auf Breite und Höhe reagieren müssen.

1. Holen Sie sich den Advanced Einbettungscode. Nachdem Sie die Wiedergabeliste mit Ihrem konfigurierten Player veröffentlicht haben (wie im obigen Abschnitt beschrieben), wählen Sie den erweiterten Code aus. Es sollte ähnlich sein:

   <div style="max-width: 960px;">
   	<video-js
   	  data-account="1752604059001"
   	  data-player="5dBwlwbNk"
   	  data-embed="default"
   	  controls=""
   	  data-video-id=""
   	  data-playlist-id="5686354139001"
   	  data-application-id=""
   	  class="vjs-fluid">
   	</video-js>
   </div>
   <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>

   Wenn du den Spieler mit dem obigen Code angesehen hast, siehst du KEINE Wiedergabeliste. Wenn Sie die Advanced Implementierung des Players verwenden, MÜSSEN Sie den Player in den Playlist Player Container wickeln.

   Beachten Sie, dass der responsive Spieler den max-width Stil und die vjs-fluid Klasse verwendet.

2. In dem video-js Element, entfernen Sie die vjs-fluid Klasse und ersetzen Sie es durch vjs-fill.

   class="vjs-fill"

3. Wickeln Sie die video-js Element mit a div Element wie folgt:

   <div class="vjs-playlist-player-container" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">

4. Wickeln Sie den vorherigen Behälter in a div Element mit CSS padding-top gleicht: aspectRatioHeight / aspectRatioWidth / 0.8 * 100.

   <div style="padding-top: 70.3125%;">

    

   Da die horizontale Wiedergabeliste 20% des verfügbaren Speicherplatzes einnimmt, muss die Höhe des Players 80% des verfügbaren Speicherplatzes einnehmen. So haben wir uns die Mathematik ausgedacht:

   • aspectRatioHeight / aspectRatioWidth gibt Ihnen das Seitenverhältnis in Prozent (zB 9 / 16 = 0,5625)
   • Dieser Prozentsatz geteilt durch 0,8 ergibt einen angepassten Prozentsatz.

   • Das Multiplizieren mit 100 ergibt eine Zahl von 0 bis 100, die als padding-top Wert.

   Hier sind gängige Seitenverhältnisse und ihre vorberechneten Prozentsätze:

   • 16:9 yields 70.3125%
   • 16:10 yields 78.125%
   • 4:3 yields 93.75%

5. Wickeln Sie den vorherigen Behälter mit einem div Element wie folgt:

   <div style="position: relative; display: block; max-width: 960px;">

6. Der vollständige Code sollte ungefähr so aussehen:

   <div style="position: relative; display: block; max-width: 960px;">
           <div style="padding-top: 70.3125%;">
           <div class="vjs-playlist-player-container" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
   			<video-js
   			  data-account="1752604059001"
   			  data-player="5dBwlwbNk"
   			  data-embed="default"
   			  controls=""
   			  data-video-id=""
   			  data-playlist-id="5686354139001"
   			  data-application-id=""
   			  class="vjs-fill">
   			</video-js>
   		</div>
   	</div>
   </div>
   <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>

Stellen Sie das erste Video ein

Standardmäßig wird das erste Video in der Wiedergabeliste zunächst in den Player geladen. Wenn Sie zuerst ein anderes Video in die Wiedergabeliste laden möchten, gibt es vier Möglichkeiten:

1. Wenn Sie die verwenden Erweitert (In-Page-Einbettung) Spieler können Sie die hinzufügen data-playlist-video-id als Attribut zum Festlegen des anfänglichen Videos für die Wiedergabe aus der Wiedergabeliste, wie hier gezeigt:

     <video-js data-playlist-id="5455901760001"
       data-playlist-video-id="5357926703001"
       data-account="1507807800001"
       data-player="BJQXwfiuG"
       data-embed="default"
       data-application-id
       controls=""></video-js>
     <script src="https://players.brightcove.net/1507807800001/BJQXwfiuG_default/index.min.js"></script>

   Dies ist in der Brightcove Player-Funktionalität integriert.

2. Wenn Sie die verwenden Erweitert (In-Page-Einbettung) Spieler auf einer Seite. Sie können dem folgenden URL-Parameter hinzufügen Seite Anfrage:

     ?playlistVideoId=5510487311001

   Der Player spielt automatisch das gewünschte Video aus der Wiedergabeliste ab. Dies ist in der Brightcove Player-Funktionalität integriert.
3. Wenn Sie eine verwenden Standard (Iframe) Spieler auf einer Seite. Sie können dem Iframe einen URL-Parameter hinzufügen src Attribut:

     <iframe src=".../index.html?playlistId=5531423971001&playlistVideoId=5510487311001" ...

   Der Player spielt automatisch das gewünschte Video aus der Wiedergabeliste ab. Dies ist in der Brightcove Player-Funktionalität integriert. Ein Beispiel für diese Technik wird hier gezeigt (Sie müssen den Code weit nach rechts scrollen, um die Verwendung des Parameters zu sehen):

   <div style="position: relative; display: block; max-width: 640px;">
     <div style="padding-top: 56.25%;">
       <iframe src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.html?playlistId=1653281884164948705"
         allowfullscreen=""
         allow="encrypted-media"
         style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
     </div>
    </div>

4. Sie verwenden einen Iframe-Player und möchten die ID des gewünschten Videos an das übergeben URL-Seitenanforderung. Dies unterscheidet sich von # 3, da Sie den Iframe-Code auf der eigentlichen Seite nicht bearbeiten müssen, sondern die URL aus der Seitenanforderung verwenden möchten. Dies ist NICHT in die Brightcove Player-Funktionalität integriert, kann jedoch mit benutzerdefiniertem Code auf der HTML-Seite erfolgen. Ein Beispiel dieser Technik wird als nächstes gezeigt.

Stichprobe: Senden der Video-ID für den Iframe auf dem Seitenanforderung

Auf der höchsten Ebene ist die Logik hinter dem folgenden Code, dass ein Abfrageparameter gelesen wird, der die Video-ID für das Video enthält, das zuerst abgespielt werden soll. Anschließend wird der Iframe-Player mithilfe dieser ID dynamisch generiert. Im Einzelnen lautet die Logik hinter dieser Anwendung:

• Eine Einfügemarke wird durch Erstellen eines HTML-Codes festgelegt div Element.
• Der Abfrageparameter mit dem Namen playlistVideoId wird mithilfe einer Hilfsfunktion von der Seitenanforderungs-URL gelesen.
• Ein iframe Das Element wird dynamisch erstellt und enthält a src Attribut, das den Abfrageparameter enthält.
• Der dynamisch erstellte Iframe wird in die Seite eingefügt.

    <!doctype html>
    <html>

    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
    </head>

    <body>

      <div id="place_player_here"></div>

      <script type="text/javascript">
        var theParamValue,
          iframe = document.createElement('iframe'),
          insertionPoint = document.getElementById("place_player_here");

        // Use the helper function below to get the value of the parameter
        theParamVideoID = getURLparam("playlistVideoId");

        // Dynamically build the iframe
        iframe.setAttribute('allowfullscreen', 'allowfullscreen');
        iframe.setAttribute('allow', 'encrypted-media');
        iframe.setAttribute('style', "width: 610px;height: 344px");
        iframe.src = 'https://players.brightcove.net/1752604059001/H1HpIEcCb_default/index.html?playlistId=4450721964001&playlistVideoId=' + theParamVideoID;
        // Insert the iframe into the page
        insertionPoint.appendChild(iframe);

        // Helper function to get value for a specific URL parameter
        function getURLparam(name) {
          var regex, results;
          name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
          regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
          results = regex.exec(location.search);
          return results === null ?
            "" :
            decodeURIComponent(results[1].replace(/\+/g, " "));
        }
      </script>

    </body>

    </html>

Unten finden Sie ein Arbeitsbeispiel, bei dem das in den Player geladene Video nicht das erste in der Wiedergabeliste ist, sondern das zweite.

Playlist-API

Mit der Playlist-API können Sie beispielsweise die Verwendung von Wiedergabelisten programmgesteuert steuern next() , previous() und autoadvance() Methoden. Das Leiten: Playlist API Dokument enthält alle Details.

Implementieren mit Code

Wenn Sie möchten, können Sie Wiedergabelisten vollständig in Code implementieren und Studio vermeiden. Die grundlegenden Schritte sind:

• Laden Sie das CSS und JavaScript für die Playlist UI Plugin.
• Konfigurieren Sie eine options Objekt, um Ihr Playlist-Setup widerzuspiegeln.
• Ruf den bcPlaylistUi() Methode, die das Konfigurationsobjekt als Parameter übergibt.

Es folgt eine Beispielimplementierung:

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
      .vjs-playlist {
        width: 625px;
      }
    </style>
    <link href="https://players.brightcove.net/videojs-bc-playlist-ui/3/videojs-bc-playlist-ui.css" rel="stylesheet">
  </head>

  <body>

    <video-js id="myPlayerID"
      data-playlist-id="4450721964001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      data-application-id
      controls=""
      autoplay
      width="960" height="540"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

    <!-- Location of the playlist -->
    <div class="vjs-playlist"></div>

    <script src="https://players.brightcove.net/videojs-bc-playlist-ui/3/videojs-bc-playlist-ui.min.js"></script>

    <script type="text/javascript">
      videojs.getPlayer('myPlayerID').ready(function() {
        // Get a reference to the player
        var myPlayer = this,
          // Create an object in which you will place options
          options = {};
        // Set options
        options.horizontal = true;
        options.autoadvance = 3;
        // Call plugins method passing in options object
        myPlayer.bcPlaylistUi(options);
      });
    </script>

  </body>

  </html>