AMP Using a Video Cloud Video

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:

In Studio, open the PLAYERS module and either create a new player or locate the player to which you wish to add the plugin.
Click the link for the player to open the player's properties.
Click Plugins in the left navigation menu.
Next click Plugins from the three options.
From the Add a Plugin select Custom Plugin.
For the Plugin Name enter ampSupport.

For the JavaScript URL, enter:

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

You do not have to enter any CSS or options for this plugin.
Click Save.
To publish the player, click Publish & Embed > Publish Changes.
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:

amp-by-example

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:

To implement this feature you need to do the following:

Include a script that contains the code for the dock feature, as shown in the following code snippet at line 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.

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.

Error suppression for bots

When a bot that does not support AMP browses a page that contains the AMP video player, a failing video error is generated. This can hurt SEO ranking. You can use the suppressNotSupportedError option in the Brightcove Player's JSON configuration to stop this from occurring. Add the following to suppress these spurious errors:

"suppress_not_supported_error": true

For this to function you must be on Brightcove Player version 6.38.4 or later.

Autoplay

A warning may appear in the browser console if you use autoplay:

This error will appear if you use any autoplay option within the Brightcove Player configuration. "autoplay" must be set to false or be absent from the player configuration for the warning not to appear. AMP rules require that players in AMP only start playback if initiated by a user action or by AMP-managed autoplay, which can be set by adding the autoplay attribute to the amp-brightcove element. Brightcove recommends using a dedicated player for AMP pages without the autoplay setting within the player configuration if autoplay is required.