AMP HTML5 and the Ooyala Player V3

Important: Ooyala Player V3 is deprecated and is scheduled to be disabled on 2018-01-31. After that date, Player V3 will no longer play your video or audio content. Customers still using Player V3 need to migrate to Player V4 (see Migrating from Player V3 and Player Migration FAQ).

Google's accelerated mobile page (AMP) HTML is a stripped down format that lets you quickly render static content on mobile web. For more details on what AMP is and how it works, go to https://github.com/ampproject/amphtml. The Ooyala Player V3 is now embeddable in AMP HTML.

Example Implementation

The following page shows an example of calling the Ooyala Player using an AMP iframe. For details on how the amp-iframe works, go to https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md#iframe-click-to-play.

Note:
  • This example not production-ready and should only be used as a starting point.
  • This example does not use a custom AMP element.
  • This implementation does not lead to any performance gains, as this is the standard Ooyala iframe solution.

Example URL: http://xd-team.ooyala.com.s3.amazonaws.com/misc/AMP_demo.html

Implementation Notes
<!doctype html>
 
<html amp lang="en">
 
  <head>
 
    <meta charset="utf-8">
 
    <title>Ooyala AMP Demo</title>
 
    <link rel="canonical" href="https://xd-team.ooyala.com.s3.amazonaws.com/misc/AMP_demo.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>
 
    <style amp-custom>
 
      #movie_container {
 
        padding-top: 100px;
 
        margin: auto auto;
 
        height: 272px;
 
        width: 640px;
 
      }
 
    </style>
 
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
 
    <script async src="https://cdn.ampproject.org/v0.js"></script>
 
  </head>
 
  <body>
 
    Ooyala AMP Demo
 
    <div id="movie_container">
 
      <amp-iframe
 
        height=272
 
        width=640
 
        sandbox="allow-scripts allow-popups allow-same-origin"
 
        allowfullscreen
 
        frameborder="0"
 
        layout="responsive"
 
        src="https://player.ooyala.com/iframe.html?ec=Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ&pbid=6440813504804d76ba35c8c787a4b33c&platform=html5">
 
        <amp-img layout="fill" src="https://cf.c.ooyala.com/Vxc2k0MDE6Y_C7J5podo3UDxlFxGaZrQ/ASqSTwfBDudlPt2X4xMDoxOjBrO-I4W8" placeholder></amp-img>
 
      </amp-iframe>
 
    </div>
 
  </body>
 
</html>
            

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