Using the Brightcove Player in Accelerated Mobile Pages

This page is an example of an AMP HTML page containing a Brightcove Player.

AMP HTML includes an amp-brightcove component which allows publishers to embed Brightcove Players within AMP HTML documents.

First, add this scpript tag to the head of the AMP HTML document.

<script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>

Then add the amp-brightcove element to the page. It takes the same data-account, data-player and data-video-id attributes as the regular in-page (advanced) embed code.

<amp-brightcove
    data-account="1290862519001"
    data-video-id="5776603582001"
    data-player="S1Tt8cgaM"
    layout="responsive" width="16" height="9">
  </amp-brightcove>

Advertising

Advertising including prerolls works in players used in AMP.

The ad plugin and its configuration just need to be included in the player's configuration. If you need to include article-specific values in your ad server calls, you can pass custom data through to a player plugin as described below.

Custom parameters

You may want to pass additional information through to your player for your plugins to access. You can do this by adding extra attributes on the amp-brightcove element named data-param-*, where * is the name of your property.

The parameters are passed through as camel cased attribute names appended to the player URL. Keys and values are URL encoded. For example:

data-param-language="de" becomes &language=de
data-param-ad-vars="key:val;key2:val2" becomes &adVars=key%3Aval%3Bkey2%3Aval2

Note that this requires Chrome 56, which is currently beta on Android but soon to be released.

When viewed on mobile in landscape mode a typical 16:9 video would cover the page. The CSS rule above will only apply to portrait aspect ratios to avoid this.

Player setup

The AMP HTML page can pause playback if it deems the page to be idle. To enable this, add this script to the player configuration in the studio, or via the player management API. You need only add the script, no name or json are required.

http://players.brightcove.net/906043040001/plugins/postmessage_pause.js

Read the AMP Project documentation for amp-brightcove.