Contact Support | System Status
Page Contents

    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.

    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/1.0.4/videojs-playlist-endscreen.js
    2. Include the plugin styles:

      https://players.brightcove.net/videojs-playlist-endscreen/1.0.4/videojs-playlist-endscreen.css
    3. Use the plugin name to load it into the player: playlistEndscreen
    4. An example set of options is:

      {
        "playlistId": "4602525726001",
        "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/1.0.4/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.0.4/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

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

    title

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

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

    Changelog

    See the Playlist Endscreen Plugin Release Notes.


    Page last updated on 24 May 2021