Settings

This tutorial shows how to handle player user’s settings.

Player stores user’s preferences in browser’s local storage. This allows AMP to remember and apply these preferences across sessions, enhancing user convenience and providing a personalized playback experience. By default player creates an initial set of preferences for captions fonts and colors, continuous playback and volume called defaults.

Setting Defaults

As explained in Embedding AMP, AMP is configured by passing a configuration object that matches the akamai.amp.PlayerConfig. As it can be seen in the akamai.amp.PlayerConfig interface page it includes the member settings. The member settings is an instance of akamai.amp.Settings. It is used by AMP to track and set up the player user settings. In order to set up defaults, the Settings class includes the static attribute defaults that can be used to set a default volume and captions object.

Default user settings are created once and can be only be overridden by depleting user’s local storage item akamai_amp

Currently AMP supports defaults for the following features:

  • Volume

  • Closed Captions

  • Autoplay (Continuous playback)

1. Volume

By setting the attribute volume to a value between 0 and 1 you can set the default volume used by the player when loaded.

var config = {
	settings: {
		defaults: {
			volume: 0.5
		}
	}
};

2. Closed Captions

By setting the attribute captions to an object matching the akamai.amp.CaptionSettings interface you can set the default way the closed caption will be displayed by the player.

var config = {
	settings: {
		defaults: {
			captions: {
				visible: true,
				fontFamily: "monospacedSerif",
				fontSize: "large",
				fontColor: "white",
				fontOpacity: "100%",
				edgeType: "rightShadow",
				edgeColor: "black",
				edgeOpacity: "50%"
				backgroundColor: "black",
				backgroundOpacity: "50%",
				windowColor: "black",
				windowOpacity: "50%",
				scroll: "popout"
			}
		}
	}
};

3. Autoplay (Continuous playback)

The autoplay flag is a setting key that dictates whether video content, should initiate playback automatically upon finishing the current video asset.

var config = {
	settings: {
		defaults: {
			autoplay: false
		}
	}
};

This value is reflected within the settings menu panel, and final user can toggle this on/off.

This setting should not be confused with autoplay player feature mentioned in Autoplay as this setting only works for subsequent playback and not the initial video loaded.

Change Settings

When required developers can use amp.settings.change method to programmatically modify settings, adjusting captions styles, or updating user preferences on runtime.

       akamai.amp.AMP.create("amp", config, event => {
            amp = event.player;
            const settings = {
                    captions: {
                        visible: true,
                        fontColor: "green",
                    }
                }

              amp.settings.change(settings)
Last modified: Nov/2023, AMP Support.