Custom Endscreen Plugin

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Endscreens
Plugins

In this topic, you will learn the use of the Custom Endscreen plugin and how it can be implemented using Studio and through custom coding.

Overview

The Custom Endscreen plugin allows display of customer supplied HTML at the conclusion of video playback.

The sample video below demonstrates the use of the Custom Endscreen plugin. At the end of this short video you will see text displayed from the following HTML:

<strong>Content</strong> for <em>custom</em> end screen

Implement using Players module

Custom endscreens can be implemented by editing the endscreen properties or by using the custom endscreen plugin. To implement the custom endscreen plugin using the Players module, follow these steps:

  1. Open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
  2. Click the link for the player to open the player's properties.
  3. Click End Screens in the left navigation menu.
  4. Next, for the Player End Screen type, click the down arrow and select Custom.
  5. Enter the configuration options in the Custom HTML text box.
    {
      "content": "<strong>Content</strong> for <em>custom</em> end screen"
    }
  6. Click Save.
  7. To publish the player, click Publish & Embed > Publish Changes.
  8. To close the open dialog, click Close.

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:

https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js
https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css

The name of the plugin is customEndscreen, and an example set of options is:

{
  "content": "Content for custom end screen"
}

The following shows using the In-Page Embed implementation of the player to associate the Custom Endscreen plugin with a single instance of a player.

  • Line 12: Uses a link tag to include the plugin's CSS in the head of the HTML page.
  • Line 14: Gives the video tag an id attribute, with some value, in this case myPlayerID.
  • Line 23: Uses a script tag to include the plugin's JavaScript in the body of the HTML page.
  • Line 27: Creates a reference to the player.
  • Lines 28-30: Initializes the plugin and passes in custom options.
  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
    data-embed="default"
    data-video-id="4077874637001"
    class="video-js" controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>

  <script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.customEndscreen({
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      })
    });
  </script>

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:

  • https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js
  • https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css

The name of the plugin is customEndscreen, and an example set of options is:

{
  "content": "Content for custom end screen"
}

The following shows using the In-Page Embed implementation of the player to associate the Custom Endscreen plugin with a single instance of a player.

  • Line 1: Uses a link tag to include the plugin's CSS in the head of the HTML page.
  • Line 3: Gives the video tag an id attribute, with some value, in this case myPlayerID.
  • Line 12: Uses a script tag to include the plugin's JavaScript in the body of the HTML page.
  • Line 16: Creates a reference to the player.
  • Lines 17-19: Initializes the plugin and passes in custom options.
  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
    data-embed="default"
    class="video-js"
    controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>

  <script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.customEndscreen({
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      })
    });
  </script>

Property

The following plugin property is used to control the Custom Endscreen plugin:

  • content:
    • Type: string
    • Any string literal or HTML that is rendered on the custom endscreen.

Customize the endscreen

You can use CSS to customize the appearance of your endscreen. Below are a few examples of what you can do. Make sure to test your implementations to ensure they work with your page content.

This is how the endscreen appears with the restart video button and a social sharing button.

default custom endscreen

Change button size

Let's say you want to change the size of the endscreen buttons. These button images are Scalable Vector Graphics (SVG) format so that they load quickly on all platforms. Because of this, you can't change their size by using the width and height CSS properties.

Instead, since these buttons are XML text files, you can change their size by using the font-size CSS property.

Use the code below to make both buttons smaller:

.vjs-overlay-buttons {
  font-size: .5em;
}

Using a percentage value should have the same effect:

.vjs-overlay-buttons {
  font-size: 50%;
}

The result should look like this:

small endscreen buttons

Or you can control the size of each button independently:

.vjs-restart-control {
  font-size: .5em;
}
.vjs-trigger-social-control {
  font-size: .5em;
}

Move content below buttons

Earlier in this document, you learned how to add content to the endscreen. To review, you can add any HTML to the plugin. The code below adds a link to our homepage to the endscreen:

{
  "content": "<a href='https://www.brightcove.com'>Visit our home page</a>"
}

By default, your added content displays above the endscreen buttons:

content above endscreen buttons

Use the following CSS to position your HTML content below the endscreen buttons:

  • Lines 190-193: Position the buttons from the top. These elements are already centered on the page for you.
  • Lines 194-196: Remove the default padding for the entire overlay to help center your custom text.
  • Lines 197-202: Position your custom text from the bottom and center it horizontally.
.vjs-overlay-buttons {
  position: absolute;
  top: 5em;
}
.vjs-custom-overlay {
  padding: 0;
}
.vjs-endscreen-overlay-content {
  position: absolute;
  bottom: 5em;
  text-align: center;
  width: 100%;
}

The result should look like this:

content below endscreen buttons

Display vertical content and buttons

You can also change the layout of your HTML content and the endscreen buttons. By default, they are displayed horizontally, with your content above the buttons. The code below floats your content to the left of the buttons and displays the buttons vertically:

  • Lines 205-210: Position the buttons from the top and left. The small width caused the buttons to align vertically.
  • Lines 211-213: Remove the default padding for the entire overlay.
  • Lines 214-223: Positions you custom text to the left of the buttons, centered horizontally and vertically in half of the overlay.

.vjs-overlay-buttons {
  position: absolute;
  width: 10%;
  top: 20%;
  left: 50%;
}
.vjs-custom-overlay {
  padding: 0;
}
.vjs-endscreen-overlay-content {
  position: absolute;
  float: left;
  width: 50%;
  text-align: center;
  top: 45%;
  transform: translate(0, -50%)
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
}

The result should look like this:

vertical content and endscreen buttons

You can be creative with how your endscreen will look by overriding the default CSS properties. In your browser, inspect the elements to find the element class names and values. For a quick review of how to do this, see the Customize Player Appearance document.

Use mailto with video name

You may wish to allow the viewer of the video to email you a question or comment. You can do this by using an HTML mailto link in the custom endscreen, as shown here:

mailto customer endscreen

Clicking the link will open the customers default email client. The code below shows how to use the video's metatdata, in this case the video name, to automatically be the subject of the email.

The following section explains how to do that particular task, but moreover, once you have data from the mediainfo property, any video metatdata could be used in the mailto link.

  • Line 235: Include the CSS for the customEndscreen plugin.
  • Lines 236-241: CSS to change the size of the player.
  • Lines 245-251: Standard in-page embed code used. Note an id is added.
  • Line 253: Specify the source for the JavaScript code for the endscreen plugin.
  • Lines 256,257,270: Standard setup for using code with the player.
  • Line 262: Listens for the loadstart event. This is when the video has started loading and its metadata, found in myPlayer.mediainfo, is available.
  • Line 263: URL encode the name of the video and assign to a variable. For the value to be used as a subject in a mailto link it is required by HTML standards the string be URL encoded.
  • Lines 264-265: Build the <a href="mailto"> link.
  • Lines 266-268: Call the customEndscreen() method, and use the created mailto link for the endscreen's content.
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>End screen with title as subject</title>

  <link href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css" rel='stylesheet'>
  <style type="text/css">
    .video-js {
      width: 600px;
      height: 338px;
    }
  </style>
</head>
<body>

  <video-js id="myPlayerID"
    data-video-id="1507781667001"
    data-account="1507807800001"
    data-player="default"
    data-embed="default"
    class="video-js" controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

  <script src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this,
        subjectEncoded,
        theMailto,
        theLink;

      myPlayer.on('loadstart',function(){
        subjectEncoded = encodeURI(myPlayer.mediainfo.name);
        theMailto = 'mailto:nowhere@mozilla.org?subject=' + subjectEncoded;
        theLink = '<a href="' + theMailto + '">Email a Comment</a><br /><br/>';
        myPlayer.customEndscreen({
          "content": theLink
        })
      })
    });
  </script>

</body>
</html>

Changelog

5 Dec 2017

v2.0.15

  • Fixed an issue where the endscreen would incorrectly wait for a post-roll to complete when there was no post-roll

17 Nov 2017

v2.0.14

  • Fixed an issue where custom endscreen was not showing at end of non-repeating playlist

15 Nov 2017

v2.0.13

  • Fixed an issue where endscreens might not appear for some players without playlists

9 Nov 2017

v2.0.11

  • Better playlist support via closing the dialog on the loadstart event
  • Avoid possible issues with playlists with autoadvance of zero

4 Oct 2017

v2.0.10

  • Removed unnecessary media query so that social share button will display in endscreens on mobile devices

10 Feb 2017

v2.0.9

  • Video.js 5 and 6 cross-compatibility

18 Oct 2016

v2.0.8

  • Fixed an issue with tapping on mobile devices

29 Jan 2016

v2.0.7

  • Fixed an issue with clickability of the endscreen buttons
  • Fixed an issue where the social button incorrectly appeared on small screens
  • Fixed some issues with the endscreen opening at the wrong time after social had been closed

29 Jan 2016

v2.0.6

  • Fixed an issue where closing the social modal would not re-open the custom-endscreen modal.
  • IE9 CSS fixes and other minor CSS improvements

29 Jan 2016

v2.0.5

  • Fix an issue where social/replay buttons in the modal were not appearing

14 Jan 2016

v2.0.4

  • Include videojs-endscreen via NPM
  • Fixed an issue where modal content was not being displayed

11 Jan 2016

v2.0.3

  • Fixed NPM publish-ability

11 Jan 2016

v2.0.2

  • Applied generator-videojs-plugin conventions
  • Prepared for publishing as a private NPM package

15 Dec 2015

v2.0.1

  • videojs-social is no longer bundled with the output in dist/ (plugin behavior/API unchanged).
  • Updated style changes to use HTML classes instead of modifying the style directly
  • Fixed an issue where events were bound, but never unbound
  • Fixed an issue where options.content was not being localized

23 Nov 2015

v2.0.0

  • video.js 5.0 compatibility, videojs-social 3.0.0

17 Feb 2015

v1.0.0

  • Add videojs-social and videojs-endscreen to dist files

14 Feb 2015

v0.1.0

  • Initial release