Player example
When the video ends you will see the custom endscreen plugin use data associated with this particular video (screenshot of where data is entered in Studio shown below) to display a hyperlink.

See the Pen Dynamic Custom Endscreens by Brightcove Learning Services (@rcrooks1969) on CodePen.
View the source code.
Using the CodePen
Development sequence
API/Plugin resources used
API Methods | API Events | API Properties | Brightcove Player Plugins |
---|---|---|---|
on() | loadstart | myPlayer.mediainfo | Custom Endscreen Plugin |
Player/HTML configuration
This section details any special configuration needed during player creation. In addition, other HTML elements that must be added to the page, beyond the in-page embed player implementation code, are described.
Player configuration
No special configuration is required for the Brightcove Player you create for this sample.
Other HTML
No other HTML elements are added to the page.
Application flow
The basic logic behind this application is:
- Wait for the
loadstart
event so themediainfo
property is populated before you read data from it. - Assign variables appropriate values from
mediainfo
object. - Build the link string that will be displayed in the custom endscreen.
- Call the custom endscreen plugin passing the
content
property.
Wait for loadstart
event
Find the code which is labeled:
// ### Wait for loadstart to read mediainfo data ###
Since the values you wish to use for the endscreen content are in the mediainfo
object you must wait for the loadstart
event as that is when you can be sure the mediainfo
values are accessible.
Assign variables values used in custom endscreen content
Find the code which is labeled:
// ### Retrieve info from mediainfo object ###
In the custom endscreen you will provide an anchor, so here you assign variables the text and link needed for the anchor.
Build string used as endscreen content
Find the code which is labeled:
// ### Build link string for the endscreen content ###
Using the variables just created, build the anchor you will use.
Call custom endscreen plugin passing dynamically created content
Find the code which is labeled:
// ### Call endscreen method ###
Here you call the custom endscreen plugin, passing the dynamically created anchor as a value for the content
property.
Application styling
No special CSS is needed.
Plugin code
Normally when converting the JavaScript into a Brightcove Player plugin nominal changes are needed. One required change is to replace the standard use of the ready()
method with the code that defines a plugin.
Here is the very commonly used start to JavaScript code that will work with the player:
var myPlayer = videojs.getPlayer('myPlayerID');
myPlayer.ready(function(){
...
});
You will change the first line to use the standard syntax to start a Brightcove Player plugin:
videojs.registerPlugin('pluginName', function(options) {
var myPlayer = this;
...
});
As mentioned earlier, you can see the plugin's JavaScript code in this document's corresponding GitHub repo: dynamic-endscreen.js.
Using the plugin with a player
Once you have the plugin's CSS and JavaScript files stored in an Internet accessible location, you can use the plugin with a player. In Studio's PLAYERS module you can choose a player, then in the PLUGINS section add the URLs to the CSS and JavaScript files, and also add the Name and Options, if options are needed.