Techdocs

AMP Web SDK

AMP player

Autoplay

This tutorial shows how to:

  • Configure AMP to start playing automatically.
  • Handle the autoplayblocked event.
  • Perform Autoplay Detection.
  • Force Muted Playback.

How to configure AMP to start playing automatically

Basic autoplay functionality can be enabled via the player configuration object by adding the option autoplay: true.

var config = {
  autoplay: true
};
akamai.amp.AMP.create("amp", config);

Certain platforms, such as iOS, also require the video to be played in "inline" mode. An additional config parameter can be set to tell the player to use this mode:

var config = {
  autoplay: true,
  playsinline: true
};
akamai.amp.AMP.create("amp", config);

Handling the Autoplayblocked Event

In the previous section it is shown how to use basic autoplay configuration. However this will work only in platforms that support unmuted playback. If the player encounters a platform that cannot autoplay, but an autoplay value of true is present in the config, an autoplayblocked event is dispatched. In the next example is shown how to handle the autoplayblocked event.

amp.addEventListener("autoplayblocked", function (event) {
  var mode = event.detail.mode;
  var threshold = event.detail.threshold;
  console.log("Attemted autoplay '" + mode + "', but the browser's threshold is '" + threshold + "'")
})

The player can be configured to attempt muted playback by providing an autoplayPolicy:

var config = {
  autoplay: true,
  autoplayPolicy: "muted"
};
akamai.amp.AMP.create("amp", config);

The values for autoplayPolicy are defined in the akamai.amp.AutoplayPolicy class and their values represent the following functionality:

  • "default": The default autoplayPolicy. The player will emulate the browser's default behavior for autoplay, i.e. the player will only autoplay on platforms that support unrestricted playback.
  • "muted": Player will mute on platforms that only allow muted playback.
  • "none": The player will not attempt to detect autoplay.

Alternatively, both properties can be set at once:

var config = {
  autoplay: "muted"
};
akamai.amp.AMP.create("amp", config);

In the case of iOS:

var config = {
  autoplay: "muted",
  playsinline: true
};
akamai.amp.AMP.create("amp", config);

Performing Autoplay Detection

By default the player will run its autoplay detection routine the first time a player is created if the autoplayPolicy value is not none. In certain scenarios it may be beneficial to run the detection before creating the player. This can be achieved by explicitly calling akamai.amp.AutoplayThreshold#init and passing the policy to check as argument. In the following example the threshold for the 'default' policy is obtained.

akamai.amp.AutoplayThreshold.init( 'default' )
  .then(function (threshold) {
    // Knowing that the player is allowed to play
    // we can safely initialize the player
    console.log("The browser's autoplay threshold is", threshold);
  });

Forcing Muted Playback

Finally, the player can also be configured to force muted/inline playback without attempting to detect the browser's capabilities as shown in the next example.

var config = {
  autoplay: true,
  muted: true,
  playsinline: true
};
akamai.amp.AMP.create("amp", config);