Bumper Videos

Introduction

A bumper is typically a very short video (10 secs or less) automatically inserted before any pre-roll ads and your content. A bumper is not used for monetization but instead relays information such as your company logo or branding. The poster is displayed for the content video, but when the player starts to play the bumper is shown first followed by the content video. In the following example a company intro bumper is shown followed by the content video.

The content video's poster, title and short description are displayed, but when play initiates the bumper is played then the content video.

Functionality

Here are some details about Bumper videos:

• Bumpers are compatible with both Client-Side Advertising (CSAI) and Server-Side Advertising (SSAI)
• Bumpers play before any pre-roll ads and your content
• The player is configurable during bumper video playback:
  • Show/hide the player controls
  • Prevent seeking during playback
  • Change the seekbar color to indicate a bumper
• Analytics data will be tracked the same as for any content video

Implementation

There are three ways to implement a video bumper, they are:

• Using an attribute in the advanced (embed) code
• Using a query string in the standard (iframe) code
• Adding to the player's JSON configuration

Details follow.

Advanced (embed) code

To enable the player using the advanced player code, add the data-bumper-id="your_bumper_id" attribute to your player code, as highlighted in the following HTML.

<div style="width: 960px; height: 540px;">
  <video-js data-account="1752604059001"
    data-player="Wj0445Avw"
    data-embed="default"
    controls=""
    data-video-id="5755775186001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"
    class="vjs-fill"
    data-bumper-id="4446983094001"></video-js>
  <script src="https://players.brightcove.net/1752604059001/Wj0445Avw_default/index.min.js"></script>
</div>

Of course, the order of the attributes in HTML doesn't matter, so the data-bumper-id="your_bumper_id" could have been placed anywhere in the <video> tag.

Standard (iframe) code

To enable the player using the standard (iframe) code, add the query parameter &bumperId=your_bumper_id to your query string, as highlighted in the following HTML.

<iframe src="https://players.brightcove.net/1752604059001/
  Wj0445Avw_default/index.html?videoId=5715315990001
  &bumperId=4446983094001" allowfullscreen="" 
  allow="encrypted-media" width="960" height="540">

JSON configuration

You can enable the bumper video on all instance of a specific player by changing that player's configuration. This means you do not have to add anything to the player code on the page, as shown in the two instances above.

To change the player's configuration in Studio, go to Players module, then click on the player you are altering. In the player's properties click JSON Editor. Add to the video_cloud section bumper video information, as highlighted.

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001"
    }
   },
   "player": {
    "template": {
    "name": "single-video-template",
    "version": "6.66.2"
   }
  },
  ...

Options

When using the JSON configuration, you can also use the following options:

• show_controls - Removes controls during bumper playback when false (true by default)
• progress_bar_color - Changes the progress bar color when specified (undefined by default - inherits the normal player progress bar color)
• prevent_seeking - Prevents seeking when specified (false by default)

The options can be added to the player's JSON configuration:

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001",
      "show_controls": true,
      "progress_bar_color": "#654321",
      "prevent_seeking": true
    }
  },
  ...