Playlist Endscreen Plugin

In this topic, you will learn how to display a playlist at the end of a video. You can add this to a player either by using Video Cloud Studio or by using code with Brightcove Player.

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.

End screen WILL appear End screen will NOT appear
  • A playlist ID is available AND
  • The plugin is enabled
  • No playlist ID is provided
  • The playlist ID is unset at runtime
  • The plugin is disabled

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.

Playlist Endscreen button
Playlist Endscreen button

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.


Using the CodePen

Here are some tips to effectively use the above CodePen:

  • Toggle the actual display of the player by clicking the Result button.
  • Click the HTML/CSS/JS buttons to display ONE of the code types.
  • Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    • In CodePen, adjust what code you want displayed. You can change the width of different code sections within 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.

Options

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

playlistId

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

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

publishTime

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:

publish time

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

For historical release notes and changelog up to v2.02, see the Playlist Endscreen Plugin Releases.

Notable changes made after version v2.02 will be included in the Brightcove Player Release Notes.