To start, you need to create an initial template like the following and save it in a file with an .HTML extension
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<% canonical %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></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>
<h1>Mediastream Player AMP</h1>
</body>
</html>
As you can be see, the content of the body is normal to any HTML, however there are not very well known tags, which are mandatory for the structure of an AMP document.
Required AMP codes
An AMP document must have:
Rule | Description |
Start with document type <!DOCTYPE html> | HTML standard |
Include <html amp> tag | Identifies the page as AMP content |
Incluir <head> and <body> tags | Optional in HTML but not in AMP |
Include <meta charset="utf-8"> tag as the first secondary tag after <head> | Identifies the page encoding |
Include <script async src="https://cdn.ampproject.org/v0.js"></script> tag as a second child tag of the <head> tag. | Loads the AMP JS library. |
Include <link rel="canonical" href="$SOME_URL %>"> tag inside <head> | It directs to the normal HTML version of the AMP HTML document or to itself if no such version exists. |
Include <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> tag | Specifies the adaptive display window. |
Include AMP <style amp-boilerplate> template code in the <head> tag | This is a CSS template that lets you hide the content until the AMP JS library is loaded. |
Inserting the Player
To make use of the Mediastream player it is necessary to load the amp-video-iframe.js library in our <head> section, we will do it as follows:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<% canonical %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></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>
<h1>Mediastream Player AMP</h1>
</body>
</html>
Finally we will add our <amp-video-iframe> component in the body and our page would be as follows:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<% canonical %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></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>
<h1>Mediastream Player AMP</h1>
<div class="row">
<amp-video-iframe layout="responsive"width="640" height="360" src="https://mdstrm.com/embed/5e59f9e1bf600a71bdaffd94" poster="https://mdstrm.com/thumbs/51125d365e5630ca73000a6a/thumb_5e59f9e1bf600a71bdaffd94_5e59f9e1bf600a71bdaffd9f_6s.jpg"></amp-video-iframe>
</div>
</body>
</html>
Remember to write the Media ID and Poster URL that you can get by API in each Media.
That's it, in this way it is possible to use our player in an AMP page. Always remember to help yourself with validation tools, here we give you one. You should always see this screen if everything is correct.
You can see the validation in this link:
If you have any additional questions about this module and its functions, feel free to contact us via chat.
Att: Mediastream team