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 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 in the AMP documentation.

Supported Player Capabilities

The following Player V4 capabilities are supported in this release:
  • 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 V4 capabilities are currently not supported:
  • Page-level parameters
  • Ads plugins
  • Other video plugins (only main_html5 is supported)
  • Discovery
  • Playlist
  • Ooyala Player Token
  • Autoplay

Supported Layouts

AMP provides the layout attribute, a common attribute that can be used in any element on an AMP HTML page. This optional attribute expands the capabilities of CSS so you can more easily create a responsive page design. The AMP Ooyala Player supports the following layout types:

  • fill
  • fixed
  • flex-item
  • responsive

For more information, see Layout & media queries in the AMP documentation.

Integration Steps

To add Ooyala Player V4 to an AMP-optimized HTML page, use a special AMP HTML tag to load the AMP version of Ooyala Player that is hosted on the Google CDN.

  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, which is deprecated.
  • The URL to a skin.json config file (data-config) is optional for Player V4. It does not apply to Player V3.

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
      layout="responsive"
      data-embedcode="Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ"
      data-pcode="5zb2wxOlZcNCe_HVT3a6cawW298X"
      data-playerid="26e2e3c1049c4e70ae08a242638b5c40"
      data-playerversion="v4">
    </amp-ooyala-player>
  </body>
</html>

해당 내용이 도움 되었습니까?