AMP Player Integration Guide
To embed AMP on a webpage, begin by loading the AMP JavaScript file. This can be done in two ways:
-
Self-hosted model: Provide the URL to your
amp.jsfile. -
Hosted model: Provide your API Key and desired version.
| If you need an API Key, please contact your Akamai representative or email amp-impl@akamai.com. |
1. Load the AMP player library
1.1 Load the AMP JavaScript
Hosted Model (CDN)
If using the AMP’s hosted version (CDN), 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.1.32"></script>
</head>
<body>
</body>
</html>Self-provisioned
The example below uses the self-hosted version, Player distribution package is composed of a parent folder which contains the list of plugins available for the given version.
In order to embed AMP in a web application page you will have to add the script tag pointing out to the amp.js file included in /akamai/amp/core/ folder, as follows.
<html>
<head>
<script src="akamai/amp/core/amp.js"></script>
</head>
<body>
</body>
</html>1.2 Set Up 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.32"></script>
</head>
<body>
<script>
var config = {
autoplay: true,
media: {
src: "https://amplibrary.akamaized.net/hls/BLENDER-BUNNY/master.m3u8"
}
};
</script>
</body>
</html>1.3 Instantiate the AMP Player
Instantiate the AMP object and embed it in a <div> on the page by passing an ID or handle as the first argument. The player will adapt to the size of the <div> responsively. This requires using the create() method; see the following documentation for more information.
<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: "https://amplibrary.akamaized.net/hls/BLENDER-BUNNY/master.m3u8"
}
};
akamai.amp.AMP.create("amp", config);
</script>
</body>
</html>2. Inline AMP Embed (HTML-Based)
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.32" data-config='{"media":{"src":"https://amplibrary.akamaized.net/hls/BLENDER-BUNNY/master.m3u8"}}'></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.32" data-defaults='"hls":{ "resources": [ {"type":"text/javascript","src":"${paths.libs}hls.min.js","defer": false} ] } }'/></script>
<div class="amp-inline"
data-width="318"
data-autoplay="false"
data-height="178"
data-src="https://amplibrary.akamaized.net/hls/BLENDER-ELEPHANT-DREAM/master.m3u8"></div>
<div
class="amp-inline"
id="player2"
data-autoplay="muted"
data-src="https://amplibrary.akamaized.net/hls/BLENDER-BUNNY/master.m3u8"
data-poster="my poster URL.jpg"
data-time="10"
data-width="318"
data-height="178">
</div>
</body>
</html>3. NPM Package
AMP can also be installed via npm for faster, modern development environments. Using the adaptive-media-player package simplifies the player configuration and embedding process.
Instructions
Install player package via npm
npm install adaptive-media-player --save-devA valid API key is required to create a player instance. This can be provided via the AMP.create method, along with the HTML element and player settings.
import React, { useEffect } from 'react';
import AMP from 'adaptive-media-player'
function PlayerExample() {
useEffect(() => {
const config = {
autoplay: true,
media: { src: "https://amplibrary.akamaized.net/hls/BLENDER-BUNNY/master.m3u8" }
}
AMP.create("MY_API_KEY", "#player", config)
});
return (
<div id="player"></div>
);
}Additionally, a ready callback can be provided to execute further actions once the player is initialized.
import React, { useEffect } from 'react';
import AMP from 'adaptive-media-player'
function PlayerExample() {
useEffect(() => {
const config = {
autoplay: true,
media: { src: "https://amplibrary.akamaized.net/hls/BLENDER-BUNNY/master.m3u8" }
}
AMP.create("MY_API_KEY", "#player", config, (event) => {
const player = event.player
})
});
return (
<div id="player"></div>
);
}Finally, this model also supports creating multiple player instances, allowing for flexible integration of several players on the same page or across different components.
useEffect(() => {
const config = {
autoplay: true,
hls: {
resources: [
{
type: 'text/javascript',
src: '${paths.libs}hls.min.js',
defer: false,
},
],
},
media: {
src: 'https://amplibrary.akamaized.net/hls/10SEC/master.m3u8',
type: 'application/x-mpegURL',
},
};
Promise.all([
AMP.create('MY_API_KEY', 'player-1', config),
AMP.create('MY_API_KEY', 'player-2', config),
AMP.create('MY_API_KEY', 'player-3', config)
]).then((players) => {
console.log(players); // An array of the player object created
});
});
When using HTTP Live Streaming (HLS), it’s important to disable defer on the AMP resources script to prevent multiple HLS resources library from loading, which can lead to redundant resource consumption and potential playback issues.
|