AMP Using a Video Cloud Video

Product(s)
Video Cloud
Role(s)
Player Developer
Topic(s)
Advanced HTML/CSS
Code Samples

In this topic, you will learn how Accelerated Mobile Pages (AMP) can be used with Brightcove Player.

Overview

Accelerated Mobile Pages is a Google project that aims to enable "the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms." You can use Brightcove Player with AMP because the project includes an amp-brightcove component which allows publishers to embed Brightcove Players within AMP HTML documents.

Sample

The following is a sample AMP HTML page that includes a Brightcove Player. The player functions normally, so the HTML is the interesting part of this sample. The HTML code is examined later in this document.

See the Pen AMP Example by Brightcove Learning Services (@rcrooks1969) on CodePen.

Resources from AMP

The AMP project developed a special amp-brightcove component that displays the Brightcove Player. The component is detailed in the amp-brightcove document.

AMP provides an example amp-brightcove implementation with details in the following documents:

Player configuration

Brightcove supplies a plugin to enhance the use of AMP with Brightcove Player. The plugin adds support for AMP's video interface API which enables some advanced features:

  • Integration with amp-analytics: Allows tracking of views to third party analytics against the AMP page domain.
  • Integration with amp-bind: Playback can be controlled by other elements in the AMP page.

Players without the plugin still work in AMP, but without that functionality.

Plugin installation

As with all Brightcove Player plugins, you need the plugin's name and URL to the plugin's JavaScript, which are provided here (no CSS file is necessary for this plugin's use):

Plugin name

ampSupport

JavaScript URL

//players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js

Code examination

The code from the CodePen sample above is shown below. A complete explanation of the code is provided by AMP in the documents linked to above. In the following list are a few tricks/traps to be aware of:

  • Line 14: You can add a single style tag, but it must include the amp-custom attribute.
  • Line 26: DO NOT beautify the code. The boilerplate CSS is needed as supplied by AMP.
  • Line 42: The width and height attributes determine the aspect ratio of the player embedded in responsive layouts.
<!--
  ## Introduction

  The `amp-brightcove` component allows embedding a Brightcove
  [Video Cloud](https://www.brightcove.com/en/online-video-platform) or
  [Perform](https://www.brightcove.com/en/perform) player.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>amp-brightcove</title>
  <style amp-custom>
    .player-container {
      width: 640px;
      height: 360px;
    }
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <!-- ## Setup -->
  <!-- Import the Brightcove component in the header. -->
  <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="https://ampbyexample.com/components/amp-brightcove/">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

</head>
<body>

  <!-- ## Basic Usage -->
  <!--
    A responsive brightcove video. The required data is `data-account` and `data-video-id`. Other
    supported parameters are `data-player-id`, `data-embed` and `data-playlist-id`.
  -->
  <div class="player-container">
    <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9">
    </amp-brightcove>
  </div>

</body>
</html>

Features

Although discussed in the AMP documentation, a few features are highlighted here that are of special importance:

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 that must be 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

External referrer support

Brightcove Player v6.25.0+ supports setting an arbitrary referrer on an iframe. The AMP component now supports passing through its own referrer to the player, by adding a referrer="EXTERNAL_REFERRER" attribute their amp-brightcove embed.

EXTERNAL_REFERRER is AMP's own macro - see https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer for further information.

AMP Analytics

An amp-analytics component can be used in an AMP document to track data to any arbitrary analytics. If publishers wish to include video events they can now do so.

AMP's doc on the AMP Analytics syntax (which is cumbersome) is here: https://www.ampproject.org/docs/reference/components/amp-analytics. And specifically video analytics: https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md.

An example is available, tracking to example.com so you'll see the beacons as errors in the network tab: http://solutions.brightcove.com/bclifford/ampexamples/analytics.html.

AMP Bind

AMP Bind is AMP's API for interacting between components. At a basic level, it allows you to have something external to the player to control playback. For example, the following code would play a video, where myPlayer is the id of the amp-brightcove player.

  <button on="tap:myPlayer.play">Play</button>

AMP doesn't trust video events so you can't currently do something more useful, like acting on a video end. An example of this is available here: http://solutions.brightcove.com/bclifford/ampexamples/bind.html.

Auto pause

The AMP HTML page can pause Brightcove Player playback if it deems the page to be idle. The functionality is added via a custom Brightcove Player plugin. To enable this, add this script to the player configuration in 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

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.

As mentioned earlier, AMP is very strict in what can be added to a valid AMP page. For example, you CANNOT add an id to the amp-brightcove tag then use a script block to configure, for instance, the IMA3 plugin. To reiterate what was said in the previous paragraph, advertising must be implemented in the player's configuration, either using Studio or the Player Management API.

If you wish to use ad configuration URLs that utilize an ad macro such as {pageVariable.adId}, you must alter the player's configuration. You can use a custom parameter (as described just above) like:

data-param-ad-id="preonlybumper"

This does not make the value automatically available to the ad macro {pageVariable.adId}. To make the ad-id/adId property available to the ad URL, you must use Brightcove Player's query_string_to_window configuration option. This option controls the population of the global namespace (window) variables from query string parameters. So to make the data-param-ad-id="..." available to the plugin you must add the following to the player configuration using the Player Management API (also see note below the code):

  "query_string_to_window": {
    "globals": [
      "adId"
    ]
  }

For specific instructions on updating a player see Player_Configurations - Update a Player Configuration from the Player Management API reference.