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.

Player configuration

Brightcove supplies a plugin you will want to load to enhance the use of AMP with Brightcove Player. The plugin adds support for AMP's video interface API which AMP requires to control the player within the AMP document. It also 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 may not behave as expected in an AMP document.

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

To implement the AMP Plugin you will add the function name of the plugin and the URL to the plugin's JavaScript:

  1. In Studio, 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 Plugins from the three options.
    Select Plugin
  5. From the Add a Plugin select Custom Plugin.
  6. For the Plugin Name enter ampSupport.
  7. For the JavaScript URL, enter:
    //players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js
  8. You do not have to enter any CSS or options for this plugin.
    Install plugin
  9. Click Save.
  10. To publish the player, click Publish & Embed > Publish Changes.
  11. To close the open dialog, click Close.

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:

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 20: DO NOT beautify the code. The boilerplate CSS is needed as supplied by AMP.
  • Line 35: 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>
  <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`.
  -->
  <amp-brightcove
    data-account="1752604059001"
    data-video-id="5715315990001"
    data-player-id="H1xW7NWcz"
    layout="responsive"
    width="16" height="9">
  </amp-brightcove>

</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

dock (picture-in-picture)

The dock attribute will "dock" the player when it would be scrolled out of view. The player is made smaller and moved near the top-right of the web page. Note that HTML standards refer to this feature as picture-in-picture. A screenshot of a docked player follows:

dock

To implement this feature you need to do the following:

  1. Include a script that contains the code for the dock feature, as shown in the following code snippet at line 2.
  2. Add the dock attribute to the <amp-brightcove> tag, as shown in line 13.
...
    <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
</head>
<body>

...
    <amp-brightcove
    data-account="1752604059001"
    data-video-id="5715315990001"
    data-player-id="H1xW7NWcz"
    layout="responsive"
    width="16" height="9"
    dock>
  </amp-brightcove>
  ...

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.

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.

Styling the player

If you wish to style the player you must use special syntax to do so. For instance, if you want to set the size of the player, you would create a style block as shown and surround the player with a div, as shown here:

<style amp-custom>
  .player-container {
    width: 640px;
    height: 360px;
  }
</style></code></pre>

...

<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>

You can add a single style tag, but it must include the amp-custom attribute.