This tutorial shows:

1. How to load a media asset.
2. How to provide multiple media assets.
3. How to provide a poster and other playback information.
4. How to work with Scenes.
   
   

1. How to load a media asset

Media can be supplied to the player in one of two ways:

I. By setting the akamai.amp.Player#media property of the AMP instance.

amp.media = {
  src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
  type: "video/mp4"
};

II. Add a media property to the player's configuration object.

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

In both cases, the configuration object must adhere to the akamai.amp.Media interface. Check our Embeding AMP tutorial for more information.

2. How to provide multiple media assets

To ensure the best playback experience on all devices and platforms it is suggested to provide multiple stream formats per media item. This can be done by using the source property instead of the src and type properties. Each source should on itself include src and type as in the example below.

var config = {
  media: {
    source: [{
      src: "http://multiplatform-f.akamaihd.net/i/multi/april11/hdworld/hdworld_,512x288_450_b,640x360_700_b,768x432_1000_b,1024x576_1400_m,1280x720_1900_m,1280x720_2500_m,1280x720_3500_m,.mp4.csmil/master.m3u8",
      type: "application/x-mpegURL"
    }]
  }
};
akamai.amp.AMP.create("amp", config);

3. How provide a poster and other playback information

To improve the user experience it is useful to provide playback information to be displayed in the player.

In the example below we provide the next information:

• guid: an unique id for the stream.
• medium: The medium of the media. i.e. "video" or "audio".
• poster: url to an image to show before the playback starts.
• startTime: time in seconds to begin the playback.
• title: a title to be displayed in the player.

This information is optional and in most applications, it might not be necessary.

var config = {
  media: {
    title: "VOD Sample",
    poster: '../resources/images/hd_world.jpg',
    medium: video,
    guid: "vid00000000",
    startTime: 10,
    src: "http://projects.mediadev.edgesuite.net/customers/akamai/video/VfE.mp4",
    type: "video/mp4"
  }
};
akamai.amp.AMP.create("amp", config);

4. How to work with Scenes

The akamai.amp.Media interface also provides the option to store information for the diferent scenes in your media object. In order to do so you should provide an array of akamai.amp.Scene objects. Below there's a basic example.

  var config = {
      autoplay: true,
      autoplayPolicy: "muted",
      media: {
          guid: "Video 2",
          title: "Universal Template Sample",
          src: "https://mdtp-a.akamaihd.net/customers/akamai/video/VfE.mp4",
          type: "video/mp4",
          scenes: [
              {
                "title": "Scene 1",
                "description": "Scene 1 - Description",
                "start": 10,
                "end": 20
              },
              {
                "title": "Scene 2",
                "description": "Scene 2 - Description",
                "start": 20,
                "end": 30
              },
              {
                "title": "Scene 3",
                "description": "Scene 2 - Description",
                "start": 30,
                "end": 40
              }
          ]
      }
  };
  akamai.amp.AMP.create("amp", config, (event) => {
      amp = event.player;
  });