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 defaultautoplayPolicy
. 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);