Plugin Playlist Endscreen

Aperçu

Le plugin Playlist Endscreen vous permet d'afficher une liste de lecture lorsqu'une vidéo se termine. Cette liste de lecture peut être des vidéos liées, utilisant une liste de lecture intelligente, ou il peut s'agir de vidéos sans rapport avec la vidéo principale.

L'utilisateur peut également cliquer sur le bouton de l'écran de fin dans l'interface utilisateur pour afficher l'écran de fin de la liste de lecture. L'info-bulle du bouton utilise le titre du plugin. Dans ce cas, la valeur par défaut, Vidéos connexes , est en train d'être utilisé.

Exemple

Cet exemple montre une liste de lecture de vidéos similaires lorsque la vidéo principale se termine.

Voir le stylo Plugin Playlist Endscreen par Brightcove Learning Services (@bcls1969 ) au Stylo de code.

Exigences

Les conditions suivantes sont nécessaires pour utiliser le plug-in Playlist Endscreen :

• Brightcove Player v6.51.3 et plus récent

Implémenter avec le module Players

Les écrans de fin de liste de lecture peuvent être implémentés à l'aide de Video Cloud Studio Joueurs module. Pour plus de détails, consultez le Configuration d'un écran de fin de liste de lecture à l'aide du plug-in playlist-endscreen document.

Implémenter à l'aide

Pour implémenter un plugin, le lecteur doit connaître l'emplacement du code du plugin, une feuille de style si nécessaire, le nom du plugin et les options de configuration du plugin. L'emplacement du code et de la feuille de style du plugin est le suivant :

1. Inclure le code du plugin :

   https://players.brightcove.net/videojs-playlist-endscreen/1/videojs-playlist-endscreen.js

2. Incluez les styles de plugins :

   https://players.brightcove.net/videojs-playlist-endscreen/1/videojs-playlist-endscreen.css

3. Utilisez le nom du plugin pour le charger dans le lecteur : playlistEndscreen

4. Voici un exemple d'ensemble d'options :

   {
     playlistId: "4602525726001",
     title: "Watch More"
   }

5. Voici un exemple d'utilisation de l'implémentation Advanced Embed pour associer le plugin Playlist Endscreen à une seule instance d'un lecteur.

   <link href="https://players.brightcove.net/videojs-playlist-endscreen/1/videojs-playlist-endscreen.css" rel="stylesheet">
     
     <div style="max-width: 960px;">
     <video-js id="myPlayerID"
       data-account="your account ID"
       data-player="your player ID"
       data-embed="default"
       controls=""
       data-video-id="your video ID"
       data-playlist-id=""
       data-application-id=""
       class="vjs-fluid">
     </video-js>
   </div>
   <script src="https://players.brightcove.net/your account ID/your player ID_default/index.min.js"></script>
   
   <!-- script for the Playlist Endscreen plugin -->
   <script src="https://players.brightcove.net/videojs-playlist-endscreen/1/videojs-playlist-endscreen.js"></script>
   
   <!-- custom script -->
   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
   
       // initialize the Playlist Endscreen plugin
       myPlayer.playlistEndscreen({playlistId: "your playlist ID"}); 
     });
   </script>

Options

Vous pouvez transmettre un objet options au plugin lors de l'initialisation. Cet objet peut contenir l'une des options suivantes :

ID de la liste de lecture

• La chaîne représentant l'ID de la liste de lecture à afficher dans l'écran de fin.
• Type: string
• Défaut : ""
• Valeur : "related"- Depuis la version 1.1.0, le plugin Playlist Endscreen peut afficher des vidéos associées au lieu d'une playlist spécifique. Comme cela utilise le point de terminaison /related de l'API de lecture, le lecteur doit avoir une clé de politique activée pour la recherche.

titre

• La chaîne pour personnaliser le titre de l'écran de fin, cela modifiera également l'info-bulle du bouton.
• Type: string
• Défaut : "Related videos"

heure de publication

• Détermine si la date de publication est affichée. En fonction des seuils, elle peut apparaître comme une date ou comme il y a 5 jours.
• Type: boolean
• Défaut : false

Les deux formats de temps de publication possibles sont présentés dans l'exemple suivant :

Définir l'ID de la liste de lecture

Ce plugin nécessite un identifiant pour une liste de lecture. La liste de lecture sera récupérée à partir de l'API de lecture et les résultats seront utilisés pour remplir l'écran de fin. L'ID de la playlist doit provenir de l'une des sources suivantes :

• Attribut sur les intégrations dans la page : data-endscreen-playlist-id="123456789"

• Chaîne de requête pour les iframes : &endscreenPlaylistId=123456789

• Possibilité de plug-in : player.playlistEndscreen({"playlistId": "123456789"})

  Cela peut être ajouté à la configuration du lecteur, ou utilisé au moment de l'exécution, comme dans le exemple ci-dessus.

• Post-plugin-init programmatique : player.playlistEndscreen().setPlaylistId("123456789")

Événement

Un événement playlist-endscreen-select est déclenché lorsqu'une vidéo est sélectionnée dans la liste de lecture. L'exemple suivant illustre la syntaxe :

myPlayer.on('playlist-endscreen-select', (e, data) => {
  videojs.log('User chose video ${data.to} from video ${data.from}');
});

Changelog

Voir le Notes de version du plug-in Playlist Endscreen.