Playlist Endscreen Plugin

Overview

The Playlist Endscreen plugin allows you to display a playlist when a video ends. This playlist can be related videos, using a smart playlist, or it can be videos unrelated to the main video.

The user can also click on the end screen button in the UI to display the playlist end screen. The button tooltip uses the plugin title. In this case, the default, Related videos, is being used.

Example

This example shows a playlist of related videos when the main video ends.

See the Pen Playlist Endscreen Plugin by Brightcove Learning Services (@bcls1969) on CodePen.

Requirements

The following requirements are needed to use the Playlist Endscreen plugin:

• Brightcove Player v6.51.3 and newer

Implement using Players module

Playlist end screens can be implemented using Video Cloud Studio's Players module. For details, see the Configuring a Playlist Endscreen Using the playlist-endscreen Plugin document.

Implement using code

To implement a plugin the player needs to know the location of the plugin code, a stylesheet if needed, the plugin name and plugin configuration options. The location of the plugin code and stylesheet are as follows:

1. Include the plugin code:

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

2. Include the plugin styles:

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

3. Use the plugin name to load it into the player: playlistEndscreen

4. An example set of options is:

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

5. Here is an example using the Advanced Embed implementation to associate the Playlist Endscreen plugin with a single instance of a player.

   <link href="https://players.brightcove.net/videojs-playlist-endscreen/2/videojs-playlist-endscreen.js" 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/2/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",
         title: "your title"
       });
     });
   </script>

Options

You may pass in an options object to the plugin upon initialization. This object may contain any of the following options:

playlistId

• The string representing the playlist ID to be displayed in the end screen.
• Type: string
• Default: ""
• Value: "related" - As of version 1.1.0, the playlist endscreen plugin can display related videos instead of a specific playlist. Since this uses the playback api’s /related endpoint, the player must have a search enabled policy key.

title

• The string to customize the end screen title, this will also modify the button tooltip.
• Type: string
• Default: "Related videos"

publishTime

• Determines if the published date is shown. Depending on thresholds may appear as a date or like 5 days ago.
• Type: boolean
• Default: false

The two possible publish time formats are shown in the following example:

Setting playlist ID

This plugin requires an ID for a playlist. The playlist will be fetched from the Playback API and the results will be used to populate the end screen. The playlist ID should come from one of the following sources:

• Attribute on in-page embeds: data-endscreen-playlist-id="123456789"

• Query string for iframes: &endscreenPlaylistId=123456789

• Plugin option: player.playlistEndscreen({"playlistId": "123456789"})

  This can be added to the player configuration, or used at runtime, as in the example above.

• Programmatic post-plugin-init: player.playlistEndscreen().setPlaylistId("123456789")

Event

A playlist-endscreen-select event is triggered when a video is selected from the playlist. The following example shows the syntax:

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

Changelog

See the Playlist Endscreen Plugin Release Notes.