Embedding Player V4 in Accelerated Mobile Pages (AMP)

You can optimize playback performance on mobile devices by embedding Ooyala Player V4 on a web page using Accelerated Mobile Pages (AMP), an open source initiative. AMP is a JavaScript framework for mobile web browsers that provide fast rendering of static content and video using lazy-loading resources that are not currently on screen, pausing media when it is not in focus, and keeping external libraries to a minimum.

Supported Player Capabilities

The following Player capabilities are supported in this release:
  • When added to an AMP-optimized HTML page, a special AMP TAG loads a player version available on the Google CDN. It uses the HTML amp_iframe page, which is very similar to an iframe.
  • Configure the embedCode, pcode, playerID, and skin.json file.
  • Playback experience targeted for mobile devices
  • Requires the main_html5 video plugin.

Unsupported Player Capabilities

The following Player capabilities are currently not supported:
  • page-level parameters
  • ads plugins
  • other video plugins (only main_html5 is supported)
  • discovery
  • playlist

Supported Layouts

  • FILL
  • FIXED
  • FLEX_ITEM
  • RESPONSIVE

Integration Steps

  1. Create an AMP HTML page, as described at https://www.ampproject.org/docs/get_started/create.
  2. In the <head> section, insert the following line to load the Ooyala Player V4 AMP plugin:
    <script async custom-element="amp-ooyala-player" data-amp-report-test="amp-ooyala-player" src="https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js"></script>
  3. In the <body> section, embed the player, as shown in the following example:
    <amp-ooyala-player
      height=200
      width=400
      data-embedcode="Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ"
      data-pcode="5zb2wxOlZcNCe_HVT3a6cawW298X"
      data-playerid="26e2e3c1049c4e70ae08a242638b5c40"
      data-playerversion="v4">
    </amp-ooyala-player>
    The amp-ooyala-player element handles loading the Ooyala player in an iframe (amp_iframe.html). For a list of parameters for the amp-ooyala-player element, see https://www.ampproject.org/docs/reference/components/amp-ooyala-player. You can also use Common Attributes.
Note:
  • For Player V4, you must specify the player version (data-playerversion="v4"). If omitted, the default is Player V3.
  • The URL to a skin.json config file (data-config) is optional for Player V4. It does not apply to Player V3.
  • Autoplay is not yet supported.

Code Example

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="amps.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async custom-element="amp-ooyala-player" data-amp-report-test="amp-ooyala-player" src="https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js"></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <amp-ooyala-player
      height=200
      width=400
      data-embedcode="Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ"
      data-pcode="5zb2wxOlZcNCe_HVT3a6cawW298X"
      data-playerid="26e2e3c1049c4e70ae08a242638b5c40"
      data-playerversion="v4">
    </amp-ooyala-player>
  </body>
</html>

Was this article helpful?