Using Ooyala Player V4 with 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 JavaScript framework for mobile web browsers. AMP renders web pages faster by managing how resources are loaded and providing other performance-enhancing features, such as:

  • Download most important resources first, and fetch lazy-loaded resources ahead of time
  • Optimize font downloads and use of styles
  • Pre-calculate layout of all page elements before loading external resources, avoiding time-consuming page layout calculations at load time
  • Pause media when it is not in focus
  • Keep external libraries to a minimum

For more information, see How AMP Works and Create your AMP HTML page in the AMP documentation.

Options for using the Ooyala Web Player with AMP websites

With the Ooyala Player V4, we currently have two options to make the the Ooyala video player AMP-compliant:
  • Embed the Ooyala Player in an AMP iFrame (generally recommended)
  • Embed the AMP-Ooyala Player

Use the AMP iFrame approach to allow full capabilities of the Ooyala player. It does have some inherent limitations that are common to using an iFrame (passing variables between the page to the player within the iFrame, for example). Alternatively, the Ooyala-AMP player only supports a subset of the overall Ooyala V4 player’s capabilities. For that reason, the AMP iFrame is the better approach for most situations.

Getting Started with the AMP IFrame

First, the the AMP iframe must be hosted within an AMP-compliant page overall. See here for how to create a basic AMP boilerplate that meets the minimum requirements of an AMP website.

In addition to the basic AMP setup, you must add the following script to the head tag of the page in order to add support for the amp-iframe itself:

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

The full details on how to set up an amp-iframe can be found in the following links:

https://www.ampproject.org/docs/reference/components/amp-iframe

https://ampbyexample.com/components/amp-iframe/#introduction

Below, we’ll discuss which setup options need to be considered when embedding the Ooyala player inside an amp-iframe. The following sample page shows how a typical AMP Iframe setup with the Ooyala Web Player looks:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <title>Ooyala AMP Iframe Sample</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
    <div style="margin: 10vh auto; width: 360px">
      <amp-iframe
        title="Ooyala Video Player"
        width="360"
        height="203"
        sandbox="allow-scripts allow-same-origin allow-popups"
        layout="responsive"
        frameborder="0"
        allowfullscreen
        allow="encrypted-media"
        src="https://player.ooyala.com/static/v4/production/latest/skin-plugin/iframe.html?ec=I3dXhnazoidu1V58G8iOorCCdDZwqlaZ&pbid=dcb79e2098c94889a1b9f2af6280b45d&pcode=Z5Mm06XeZlcDlfU_1R9v_L2KwYG6">
        <!-- Optional placeholder that removes constraint that Iframes must be either 600px
        away from the top or not within the first 75% of the viewport when scrolled to the top  -->
        <amp-img
          layout="fill"
          src="https://secure-cf-c.ooyala.com/I3dXhnazoidu1V58G8iOorCCdDZwqlaZ/PE3O6Z9ojHeNSk7H4yMDoxOjBzMTtyGk"
          placeholder>
        </amp-img>
      </amp-iframe>
    </div>
  </body>
</html>

Setting up the amp-iframe element

To set up the player, first you must add an amp-iframe tag and configure its attributes. The table below shows the purpose of all of the attributes shown in the sample page:
Attribute Description
src The URL of an HTML page that contains the Ooyala player embed. This can be either the Ooyala-hosted template, or a custom, self-hosted page. The url must use https and a different origin than the one where the AMP page is being hosted.
title Name or title of the content to be displayed
width Initial width of the iframe, in pixels
height Initial height of the iframe, in pixels
sandbox AMP iframes are “maximum sandboxed” by default, which means that the parent page must explicitly grant them certain permissions in order to enable features like running JavaScript, etc. The Ooyala player requires the following values in order to function properly:
allow-scripts allow-same-origin allow-popups
Please see here for details.
layout Type of layout to use for the iframe container. For details and possible values, please see here.
frameborder (Optional) Set this to 0 to remove the border around the iframe container
allowfullscreen Required in order to allow videos to enter fullscreen mode
allow Set to encrypted-media in order to allow DRM content on Chrome, otherwise can be omitted

Restrictions

The AMP Project reference lists the following restrictions that apply to amp-iframe components:
  • An amp-iframe may not appear close to the top of the document (except for iframes that use a placeholder, as described below). The iframe must be either 600 px away from the top or not within the first 75% of the viewport when scrolled to the top, whichever is smaller.
  • By default, an amp-iframe is sandboxed (see details of sandbox attribute above).
  • An amp-iframe must only request resources via HTTPS, from a data-URI, or via the srcdoc attribute.
  • An amp-iframe must not be in the same origin as the container unless they do not allow allow-same-origin in the sandbox attribute.

iFrame Placement Workaround (optional)

The restriction that an amp-iframe may not appear close to the top of the document can be bypassed by setting a placeholder image for the component. A placeholder can be set by including an amp-img tag inside the amp-iframe element and setting an image URL, such as:

<amp-iframe title="AMP with Placeholder">
  <amp-img
    layout="fill"
    src="https://secure-cf-c.ooyala.com/I3dXhnazoidu1V58G8iOorCCdDZwqlaZ/PE3O6Z9ojHeNSk7H4yMDoxOjBzMTtyGk"
    placeholder>
  </amp-img>
</amp-iframe>

DRM

Although the Ooyala AMP player doesn’t currently support DRM playback on mobile devices, an AMP page loaded on a desktop browser might run into issues if attempting to play DRM content on Chrome. This is because Encrypted Media Extension permissions have been deprecated in Cross-origin iframes when using Chrome.

This restriction can be bypassed by setting the allow attribute on the amp-iframe to a value of encrypted-media. Please see here for details.

Responsiveness

AMP iframes support automatic resizing, however, this feature requires that a certain code be added to the iframe template. Our current Ooyala iframe template doesn’t currently have this code, and also has some issues with responsiveness in general. Although playlists should work properly inside AMP iframes, the current CSS in our player causes the thumbnails to be rendered outside of view when inside an iframe.

Known Issues and Limitations of the AMP iFrame Approach

Any limitations that apply to regular iframes will also be present when using amp-iframes. In addition to the limitations described here, it’s worth mentioning that Flash-related features such as the Bitmovin Flash fallback for Windows 7, OSMF Flash plugin, etc., will not be available when using AMP iframes.

Getting Started with the AMP-Ooyala Player

The following is necessary to display an Ooyala video:

Required Script

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

Example:

<amp-ooyala-player
    data-embedcode="Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ"
    data-pcode="5zb2wxOlZcNCe_HVT3a6cawW298X"
    data-playerid="6440813504804d76ba35c8c787a4b33c"
    width="640" height="360"></amp-ooyala-player>
Attributes Description Required?
data-embedcode

The video embed code from Backlot

Yes
data-playerid

The ID of the player to load from Backlot

Yes
data-pcode

The provider code for the account owning the embed code and player

Yes
data-playerversion

Which version of the Ooyala player to use, V3 or V4. Defaults to V3.

No
data-config

Specifies a skin.json config file URL for player V4.

No
common attributes

This element includes common attributes extended to AMP components.

 

Validation

See amp-ooyala-player rules in the AMP validator specification.

https://help.ooyala.com/sites/all/libraries/dita/en/video-platform/concepts/pbv4_amp.html

Was this article helpful?