Embedding AMP
To Embed AMP in a HTML page is needed to:
1. Include the AMP JS script
If you are using the self-hosted model (distribution package), provide the URL to your amp.js file. If you are using the AMP’s hosted model, you will need to provide your API Key and the desired version. Note: If you don’t know your API Key yet please email your Akamai executive or amp-impl@akamai.com in order to provide one to you.
The example below uses the hosted version.
<html>
<head>
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14"></script>
</head>
<body>
</body>
</html>2. Prepare a configuration object
Please refer to akamai.amp.PlayerConfig for more information on the configuration object. In the next example, we’re providing a akamai.amp.Media object that should play automatically when the player has finished loading content.
<html>
<head>
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.1.14"></script>
</head>
<body>
<script>
var config = {
autoplay: true,
media: {
src: "my video URL.mp4",
type: "video/mp4"
}
};
</script>
</body>
</html>3. Create the AMP object
Instantiate the AMP object and embed it in a div on the page by passing an id or handle as first argument. The player will take on the size of the div in a responsive manner.
<html>
<head>
<script src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.0.14"></script>
</head>
<body>
<div id="amp"></div>
<script>
var config = {
autoplay: true,
media: {
src: "my video URL.mp4",
type: "video/mp4"
}
};
akamai.amp.AMP.create("amp", config);
</script>
</body>
</html>Adding AMP as an inline HTML object
The player can be embedded by adding the class="amp-inline" to the script tag and providing a configuration object using the attribute data-config.
<html>
<head></head>
<body>
<script class="amp-inline" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.1.14" data-config='{"media":{"src":"my video URL.mp4"}}'></script>
</body>
</html>Multiple players can also be embedded on the same page by adding class="amp-inline" to any DOM element, along with data- attributes to configure each player instance. Take note that the attribute data-config is replaced by data-defaults, in the first script element.
<html>
<head></head>
<body>
<script class="amp-inline" src="https://amp.akamaized.net/hosted/1.1/player.esi?apikey=MY_API_KEY&version=9.1.14" data-defaults='{"media":{"src":"VfE.mp4"}}'></script>
<div class="amp-inline" data-src="my video URL.mp4"></div>
<div
class="amp-inline"
id="player2"
data-autoplay="muted"
data-src="my video URL.mp4"
data-poster="my poster URL.jpg"
data-time="10"
data-width="318"
data-height="178">
</div>
</body>
</html>