Redirect Notice

This tutorial shows the alternatives to access an AMP instance.

As it is explained in our basic tutorial. The most basic way to create an AMP instance is by invoking the function akamai.amp.AMP.create with a HTML DOM element or a valid CSS selector to a DOM element as argument and optionally also passing a configuration object as a second argument to modify the player's default settings:

var config = {
  media: {
    src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
    type: "video/mp4",
    autoplay: true
  }
};
akamai.amp.AMP.create("amp", config);

In some scenarios it might be required to use the created player instance, either for furter customization, event handling or error handling. To do so, there are three alternatives:

1. Handling it as a promise.
2. Using async/await.
3. Using an event listener.
   
   

1. Handling the AMP "Create" Promise

When invoked, the function akamai.amp.AMP.create creates a promise. This promise will be resolved when the player is fully instantiated and ready to be used. In the example below it's shown how the newly created player can be accesed by passing a function expecting a single argument to the promise then method.

var config = {
  media: {
    src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
    type: "video/mp4",
    autoplay: true
  }
};
akamai.amp.AMP.create("amp", config)
  .then( function (player) {
    console.log(player); // newly created AMP instance
    player.addEventListener("mediachange", function (event) { // Now we can interact with the player instance
      console.log(event);
    });
  });

2. Using Async/Await

As with any other promise async/await can be used in order to handle the resolution of the akamai.amp.AMP.create promise. Below there is a slightly modified version of the previous example using async/await.

async function onload() {
  var config = {
    media: {
      src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
      type: "video/mp4",
      autoplay: true
    }
  };
  var player = await akamai.amp.AMP.create("amp", config);
  console.log(player);
  player.addEventListener("mediachange", function (event) {
    console.log(event);
  });
}

3. Using an Event Listener

Event listeners are a third option to access the player instance. An event listener can be passed as the third argument to the create function. This listener will be executed when the ready event is fired. The code of our example, modified to use an event listener, can be seen below.

var config = {
  media: {
    src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
    type: "video/mp4",
    autoplay: true
  }
};
akamai.amp.AMP.create("amp", config, function (event) {
  var player = event.player;
  console.log(player);
  player.addEventListener("mediachange", function (event) { console.log(event); });
});