Brightcove Player Sample: Navigate on Video End

In this topic, you will learn how to display an overlay on video end, which when clicked navigates the page to a new URL.

Player example

Upon completion of the very short video you will see an overlay appear with a link to the Brightcove Home Page. The Brightcove supplied Overlay Plugin is used, so no JavaScript is needed. CSS is used to style the overlay.

See the Pen Navigate on Video End by Brightcove Learning Services (@rcrooks1969) 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.
  • Later in this document the logic, flow and styling used in the application will be discussed in the Player/HTML configuration, Application flow and Application styling sections. The best way to follow along with the information in those sections is to:
    1. Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    2. In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
    3. View the Player/HTML configuration, Application flow and/or Application styling sections in another browser/browser tab. You will now be able to follow the code explanations and at the same time view the code.

API/Plugin resources used

Brightcove Player Plugins
Display Overlay Plugin

Application styling

The CSS is used to change the look of the overlay. In this sample the CSS used is:

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

You need to alter the CSS to define your desired look, then save the CSS in an Internet accessible location. You will point to this CSS in the plugin configuration.

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

In this case you will add the Display Overlay Plugin using Studio.

  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 Plugins in the left navigation menu.
  4. Next, click Add a Plugin.
  5. For the Plugin Name enter overlay.
  6. For the JavaScript URL, enter: 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
  7. For the CSS URL, enter: 
    https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
  8. Enter the configuration options in the Options(JSON) text box. 
    {
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}
  9. Click Save.
  10. To publish the player, click Publish & Embed > Publish Changes.
  11. To close the open dialog, click Close.

Other HTML

No other HTML elements are added to the page.