Player example
For this sample you see the text associated with the video displayed below the player. You use Studio's MEDIA > VIDEO INFORMATION section to supply the text and associated link. The video need not be playing to see the sample's functionality.
See the Pen Display Related Links by Brightcove Learning Services (@bcls1969) on CodePen.
View the source code.
Using the CodePen
Development sequence
API/Plugin resources used
API Methods | API Properties |
---|---|
on() | myPlayer.mediainfo |
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
An HTML <p>
element is used as a target for the text extracted from the video's metatdata:
<p id="linkHere" style='color:red; font-weight: bold; font-size: 20px'></p>
Associate data with the video
For every video with which you want use the related link you will need to enter the Related Link URL and Related Link Text in Studio. You do this in the MEDIA > VIDEO INFORMATION section, as shown here:

Application flow
The basic logic behind this application is:
- Populate the
mediainfo
property in Studio. - Dynamically build an HTML anchor tag with a link.
- Inject the dynamically built HMTL in the HTML page.
Wait for loadstart to read video information
Find the code which is labeled:
// ### // +++ Wait for loadstart to read video information +++ ###
Often you see the player's ready()
method used to start JavaScript processing. This does not work in this instance as you have to wait for the video to be loaded in the player and have the metadata ready to read. The event to listen for is loadstart
.
Read data and build anchor tag
Find the code which is labeled:
// +++ Read test and link from video info and build anchor tag +++
Once the loadstart
event is dispatched, you can read properties from the mediainfo
object. In this case the properties link.text
and link.url
are read. An anchor tag is then dynamically built using the extracted data.
Inject anchor tag into HTML page
Find the code which is labeled:
// ### Inject anchor tag into HTML ###
A reference to the location for the anchor is obtained using the getElementById()
method, and the anchor tag is placed in the HTML page.
Application styling
The only CSS is used to size the player, which can be done in various ways.
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:
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
...
});
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: display-related-link.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.