Brightcove Player Sample: Outstream (Ad-Only) Player

Overview

This Outstream Ad Player sample shows you how to dynamically load the Brightcove Player in a web page that has other non-video elements. The video ad is the only content played by the player. The player typically expands within the page layout, as is shown in this sample, but can also appear in a special area of the page or as an overlay. The player disappears when it is done playing the ad.

Player example

This sample provides helper JavaScript functions that demonstrate how to dynamically adjust the size of a <div> element in the page DOM, inject the Brightcove Player there, load and play an ad, and then remove the player. The ad that plays is configured either from an ad tag. The player is set to autoplay and muted by default, which is the only way it will work in some browsers. You can change these settings if you choose.

This sample can be used as-is or can be copied and modified to work with your custom page design.

See the Pen 18065-ad-only-plugin by Brightcove Learning Services (bcls1969) on CodePen.

Source code

View the complete solution on GitHub.

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.

Application flow

The basic logic behind this application is:

This sample shows a text-article-style web page with a hidden <div> element placed within the article. After a timer goes off, this hidden div is expanded and the player appears within it.

You could modify this example to react to other conditions rather than a timer, for example user scrolling that brings a certain section of the page into view.
The player uses a VAST ad tag response to play an ad.
When the ads are finished playing, the player is unloaded and removed from the DOM.

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

In your HTML file, you will include the following:

A <div> element with an id attribute assigned to a value of your choice. The JavaScript code will create your Brightcove Player within this <div> element.
```
<div id="adPlayerDiv"></div>
```

The JavaScript file associated with your Brightcove Player. It should look similar to this:

<script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

The JavaScript and CSS files for the IMA3 plugin. This is for ad integration with Google's IMA3 HTML5 SDK.
```
<link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet"/>
<script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>
```
You can get a little faster load time if you include these files in your player configuration. For details, see the Load-time optimization section.
The helper library named adonly.js. You can use this file unmodified since it is hosted from Brightcove's player origin and served over CDN. If you choose, you can use this JavaScript code as a guide to create your own loader script and host it on your own server. This file can also be included in your player configuration.
```
<script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>
```
A minified, CDN-hosted version is also available if you choose to include it directly within your page.
```
<script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>
```

Public functions

The adonly.js library has two public functions that it exposes:

expandAndInjectAdOnlyPlayer() : Expands a <div> and injects an ad-only player in it.
injectAdOnlyPlayer() : Injects an ad-only player into a given <div> (without animation).

Options

The expandAndInjectAdOnlyPlayer() function takes the following parameters:

muted
- Optional. Values: true, false. Default: true
autoplay
- Optional. Values: true, false. Default: true
adTag
- The ad tag
div
- The div where you want the ad player to be injected
height
- The height in pixels you want to expand the div
animationDuration
- How long in ms to take to animate the expansion of the div height

The injectAdOnlyPlayer() function takes the same parameters except for height and animation duration.

Application styling

This sample uses the CSS styling provided by the IMA3 plugin.

Plugin code

This sample uses JavaScript code that is already built as a plugin. You can see this code in this document's corresponding GitHub repo: adonly.js.

Load-time optimization

This sample uses a Brightcove Player and includes the IMA plugin during runtime. You can use this sample as-is, but changing the player code for your account.

To optimize load time slightly, you should include the IMA plugin in the player configuration. To do this, see the following documents: