Mise en œuvre des playlists

Aperçu

Lorsque vous utilisez des listes de lecture, la première décision à prendre est de savoir où voulez-vous la liste de lecture par rapport au lecteur. Normalement, lorsque vous utilisez Brightcove Player, vous voyez des listes de lecture à droite du lecteur verticalement ou en dessous du lecteur horizontalement. (Comme vous le verrez plus loin dans ce document, vous avez la possibilité de localiser la liste de lecture à d'autres endroits.) Les implémentations d'une playlist placée verticalement et horizontalement suivent.

Exemple de playlist verticale

Ce qui suit montre une liste de lecture verticale:

Exemple de playlist horizontale

Ce qui suit montre une liste de lecture horizontale:

En plus de la direction de la playlist, vous devrez également déterminer le code HTML que vous souhaitez utiliser pour l'implémentation, la norme ou Avancée. Voici les quatre options qui en résultent:

Présentation de la mise

Pour utiliser des listes de lecture, effectuez les tâches suivantes:

1. Créer une playlist soit dans Studio, soit manuellement à l'aide de JavaScript.
2. Activez votre lecteur pour utiliser des listes de lecture à l'aide des propriétés du lecteur de Studio Coiffant option.
3. Implémentez la playlist en utilisant soit le Standard (iframe) joueur ou le Avancé (intégration dans la page) la mise en oeuvre.
4. Si vous souhaitez contrôler la playlist par programmation, utilisez le API de playlist.

Activer le lecteur

Vous pouvez utiliser Studio pour permettre à votre lecteur d'utiliser des listes de lecture. Suivez ces étapes pour ce faire:

1. Ouvrez le JOUEURS module et créez un nouveau lecteur ou recherchez le lecteur sur lequel vous souhaitez activer les listes de lecture.
2. Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
3. Dans Informations sur le joueur , pour le Type de joueur clique le Playlist bouton radio.
4. Cliquez sur Save.
5. Cliquez sur Styling dans le menu de navigation de gauche.
6. Choisissez votre désir Type de liste de lecture:

   

7. Cliquez sur Lecture dans le menu de navigation de gauche.
8. Cochez les cases d'option des options de playlist que vous souhaitez activer:

   

9. Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
10. Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

Lecteur standard (iframe)

Une fois que vous avez une liste de lecture à utiliser et que vous avez activé votre lecteur pour utiliser une liste de lecture, vous êtes prêt à utiliser réellement la liste de lecture avec un lecteur. Comme d'habitude, vous disposez des implémentations de lecteur Standard et Advanced. Dans cette section, les instructions d'utilisation de la liste de lecture avec l'implémentation Standard sont affichées. Lors de l'utilisation de l'implémentation de liste de lecture standard / verticale, la liste de lecture apparaîtra sur le côté droit du lecteur, comme vous l'avez vu dans l'exemple en haut de ce document.

Vous publiez une playlist de la même manière que vous publiez une vidéo. Dans les studios MÉDIAS module, sélectionnez votre playlist puis cliquez sur le Publier la playlist bouton. Assurez-vous de sélectionner le bon lecteur.

Une fois que vous avez publié, vous choisissez votre code. Dans cette section, le Standard (iframe) le code est démontré. Vous pouvez sélectionner des options pour le code (en surbrillance) qui traitent de la taille du lecteur.

Si vous souhaitez avoir un lecteur réactif, ce qui est une excellente option, le code du lecteur apparaît comme indiqué ici:

<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>

Les deux div les éléments et les attributs associés sont ce qui rend le joueur réactif.

Régler padding-top pour une playlist horizontale

Le code qui vient d'être affiché est UNIQUEMENT pour le joueur. Si vous utilisez un horizontal playlist, vous devez ajuster manuellement le code un peu pour faire de la place pour la playlist. Utilisez le tableau suivant pour modifier correctement le <div style="padding-top: 56.25%;"> valeur.

Cela signifie que si vous utilisez une vidéo au format 16: 9, le padding-top La valeur doit apparaître comme suit:

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

Changer manuellement la playlist

Si vous souhaitez changer la playlist utilisée avec l'implémentation iframe, il vous suffit de changer le src attribut de l'iframe. Si vous utilisez un identifiant:

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

ou si vous utilisez un ID de référence:

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

Lecteur avancé (intégré dans la page)

Après avoir créé une playlist dans Studio MÉDIAS module, et ont activé un lecteur de playlist dans Studio JOUEURS module, vous êtes prêt à implémenter la playlist avec un lecteur. Avec le Code d'intégration standard , le plugin crée le conteneur de playlist et le dimensionne pour l'adapter au iframe élément. Avec le code d'intégration Advanced In-Page, vous devez fournir le conteneur de playlist et utiliser CSS pour dimensionner le lecteur et la playlist de manière appropriée.

Liste de lecture verticale

Pour offrir une expérience de type iframe avec un plateau vertical pliable, Brightcove a développé un Conteneur du lecteur de liste de lecture pour le code d'intégration avancé sur la page.

Pour utiliser le conteneur Playlist Player, enveloppez le code intégré avancé avec les éléments suivants :

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

Liste de lecture verticale fixe

Suivez ces étapes pour créer une liste de lecture verticale fixe:

1. Obtenez le code intégré Advanced. Après avoir publié la liste de lecture à l'aide de votre lecteur configuré (comme indiqué dans la section ci-dessus), choisissez le code Avancé . Il devrait être similaire à ceci :

   <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>

   Si vous avez consulté le lecteur avec le code ci-dessus, vous ne verrez PAS de liste de lecture. Lorsque vous utilisez l'implémentation avancée du lecteur, vous DEVEZ le placer dans le conteneur Playlist Player.

2. Enveloppez le code intégré avancé avec le conteneur Playlist Player et ajoutez ce qui suit :

   • Un CSS statique width qui correspond à la taille du lecteur

   <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>

Playlist verticale et réactive

Suivez ces étapes pour créer une liste de lecture verticale réactive:

1. Obtenez le code intégré Advanced. Après avoir publié la liste de lecture à l'aide de votre lecteur configuré (comme indiqué dans la section ci-dessus), choisissez le code Avancé . Il devrait être similaire à ceci :

   <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>

   Si vous avez consulté le lecteur avec le code ci-dessus, vous ne verrez PAS de liste de lecture. Lorsque vous utilisez l'implémentation avancée du lecteur, vous DEVEZ le placer dans le conteneur Playlist Player.

   Notez que le joueur réactif utilise le max-width style et la vjs-fluid classe.

2. À la <div> enveloppe autour du video-js élément, ajoutez le vjs-playlist-player-container classe.

   <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>

Liste de lecture horizontale

Pour offrir une expérience de type iframe avec une liste de lecture horizontale, Brightcove a développé un Conteneur du lecteur de liste de lecture pour le code d'intégration avancé sur la page.

Pour utiliser le conteneur Playlist Player, enveloppez le code intégré avancé avec les éléments suivants :

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

Liste de lecture fixe et horizontale

Suivez ces étapes pour créer une liste de lecture horizontale fixe:

1. Obtenez le code intégré Advanced. Après avoir publié la liste de lecture à l'aide de votre lecteur configuré (comme indiqué dans la section ci-dessus), choisissez le code Avancé . Il devrait être similaire à ceci :

   <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>

   Si vous avez consulté le lecteur avec le code ci-dessus, vous ne verrez PAS de liste de lecture. Lorsque vous utilisez l'implémentation avancée du lecteur, vous DEVEZ le placer dans le conteneur Playlist Player.

2. Enveloppez le code intégré avancé avec le conteneur Playlist Player et ajoutez ce qui suit :

   • Un CSS statique width qui correspond à la taille du lecteur

   • Un CSS statique height égale à la taille du joueur divisée par 0,8. Étant donné que la liste de lecture horizontale occupe 20% de l'espace disponible, vous devez régler la hauteur du lecteur pour qu'elle occupe 80% de l'espace disponible. (par exemple, 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>

Playlist horizontale et réactive

Il s'agit de la personnalisation la plus complexe car le lecteur et la liste de lecture doivent être réactifs en ce qui concerne la largeur et la hauteur.

1. Obtenez le code intégré Advanced. Après avoir publié la liste de lecture à l'aide de votre lecteur configuré (comme indiqué dans la section ci-dessus), choisissez le code Avancé . Il devrait être similaire à ceci :

   <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>

   Si vous avez consulté le lecteur avec le code ci-dessus, vous ne verrez PAS de liste de lecture. Lorsque vous utilisez l'implémentation avancée du lecteur, vous DEVEZ le placer dans le conteneur Playlist Player.

   Notez que le joueur réactif utilise le max-width style et la vjs-fluid classe.

2. dans le video-js élément, supprimez le vjs-fluid classe et remplacez-le par vjs-fill.

   class="vjs-fill"

3. Enveloppez le video-js élément avec un div élément comme suit:

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

4. Enveloppez le conteneur précédent dans un div élément avec CSS padding-top égal à: aspectRatioHeight / aspectRatioWidth / 0.8 * 100.

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

    

   La playlist horizontale occupant 20% de l'espace disponible, nous avons besoin que la hauteur du lecteur occupe 80% de l'espace disponible. Voici comment nous avons calculé le calcul:

   • aspectRatioHeight / aspectRatioWidth vous donne le rapport hauteur / largeur en pourcentage (par exemple 9/16 = 0,5625)
   • Ce pourcentage divisé par 0,8 nous donne un pourcentage ajusté.

   • Multiplier par 100 nous donne un nombre de 0 à 100 qui fonctionnera comme un padding-top valeur.

   Voici les rapports hauteur / largeur courants et leurs pourcentages pré-calculés:

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

5. Enveloppez le contenant précédent avec un div élément comme suit:

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

6. Le code complet devrait ressembler à ceci:

   <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>

Définir la vidéo initiale

Par défaut, la première vidéo de la liste de lecture est initialement chargée dans le lecteur. Si vous souhaitez d'abord charger une autre vidéo dans la playlist, il y a quatre possibilités:

1. Si vous utilisez le Avancé (intégration dans la page) joueur, vous pouvez ajouter le data-playlist-video-id comme attribut pour définir la vidéo initiale à lire à partir de la playlist, comme illustré ici:

     <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>

   Il s'agit de la fonctionnalité Brightcove Player intégrée.

2. Si vous utilisez le Avancé (intégration dans la page) joueur sur une page. Vous pouvez ajouter le paramètre URL suivant au page demande:

     ?playlistVideoId=5510487311001

   Le lecteur lira automatiquement la vidéo souhaitée à partir de la liste de lecture. Il s'agit de la fonctionnalité Brightcove Player intégrée.
3. Si vous utilisez un Standard (iframe) joueur sur une page. Vous pouvez ajouter un paramètre URL à l'iframe src attribut:

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

   Le lecteur lira automatiquement la vidéo souhaitée à partir de la liste de lecture. Il s'agit de la fonctionnalité Brightcove Player intégrée. Un exemple de cette technique est montré ici (vous devrez faire défiler le code loin vers la droite pour voir l'utilisation du paramètre):

   <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. Vous utilisez un lecteur iFrame et souhaitez transmettre l'identifiant de la vidéo souhaitée sur le Demande de page URL. Cela diffère du n ° 3 car vous ne souhaitez pas avoir à modifier le code de l'iframe sur la page réelle, mais utilisez l'URL de la demande de page. Ceci n'est PAS intégré à la fonctionnalité Brightcove Player, mais peut être fait avec du code personnalisé sur la page HTML. Un exemple de cette technique est présenté ci-après.

Exemple : Envoi de l'ID vidéo de l'iframe sur le demande de page

Au niveau le plus élevé, la logique derrière le code suivant est qu'un paramètre de requête est lu qui contient l'ID vidéo de la vidéo à lire en premier, puis le lecteur iframe est généré dynamiquement à l'aide de cet ID. Plus en détail, la logique derrière cette application est:

• Un point d'insertion est désigné en créant un HTML div élément.
• Le paramètre de requête nommé playlistVideoId est lu à partir de l'URL de demande de page avec l'aide d'une fonction d'assistance.
• Un iframe L'élément est construit dynamiquement et comprend un src attribut qui contient le paramètre de requête.
• L'iframe créé dynamiquement est inséré dans la page.

    <!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>

Vous trouverez ci-dessous un exemple de travail dans lequel la vidéo chargée dans le lecteur n'est pas la première de la liste de lecture, mais la seconde.

API Playlist

L'API Playlist vous donne un contrôle programmatique sur l'utilisation des playlists, par exemple next() , previous() et autoadvance() méthodes. le Guider: API de playlist le document fournit tous les détails.

Implémenter à l'aide

Si vous le souhaitez, vous pouvez implémenter des listes de lecture entièrement dans le code et éviter Studio. Les étapes de base sont:

• Chargez le CSS et JavaScript pour le Plugin d'interface utilisateur de liste de lecture.
• Configurer un options objet pour refléter la configuration de votre playlist.
• Appeler le bcPlaylistUi() méthode, en passant l'objet de configuration en tant que paramètre.

Un exemple d'implémentation suit:

  <!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>