Embedding AMP
This tutorial shows the simplest way to embed AMP. To see a working demo please check our demo page.
To Embed AMP in a HTML page is needed to:
1. Include the AMP JS script
If you are using the zip
version provide the url to your amp.js
file. If you are using the hosted version of AMP, you will need to provide your API Key
and the desired version
. 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.0.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.0.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.0.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>