Using data bindings

The player continues to support very advanced and flexible parameterization. Substitutions in many configuration elements (usually for ads and analytics) continue to use the syntax #{variable} or ${variable}.

The following data values are accessible through player data bindings

  • Player provided

    • Media

    • Ads

    • l10n

  • Customer provided params [Deprecated]

  • Wide-open JS / DOM execution

    • DOM Variables

    • JS Functions

Player provided data

Media

This is a media object representation, it exposes the values of the current playing media or mrss feed in the video player. See the list of Media members. Example

config = {
    plugins: {
        analyticsPlugin: {
            title: "#{media.title}",
            eventName: "#{media.title}",
            isfullepisode:"#{media.duration / 3600 >= 1 ? 'Y': 'N'}",
        }
    }

Ads

Player exposes contextual ad data during ad playback, ad members can be accessed through player data bindings but keep in mind that the ad should be active prior accessing its members. Example.

config = {
    plugins: {
        analyticsPlugin: {
            adTitle: "${ads.currentAd.id}", // 123456
            adPosition: "${ads.currentAd.type}", // preroll
        }
    }

Player

Player provided data such as <video> information.

config = {
    plugins: {
        analyticsPlugin: {
            heigth: "${player.videoHeight}", // Current video Heigth
            width: "${player.videoWidth}", // Current video Width
            ratio: "${player.videoWidth / player.videoHeight}" // The aspect ratio formula is width divided by height
        }
    }

See current HTMLPlayer members

Customer provided data

Params (deprecated)

Prior to v9, the player could hold parameters in a hash table called params[]. However, if a lookup occurred and the variable did not exist in params[], the player would look into the DOM for the variable.

In v9, we have removed the params[] array, because the ability to fallback to the DOM makes this array unnecessary.

Wide-open JS / DOM execution

Anything variable with #{ } that does not meet player.variable, media,variable, or ads.variable, DOM lookup will occur.

Player allows DOM executions such as DOM variables, JS Functions and expressions. Example

getMessage = function() {
    return "Hi!"
}


config = {
    plugins: {
        analyticsPlugin: {
            date: "${Date.now()}", // JS Date helper
            message: "${window.getMessage()}", // "Hi!"
        }
    }
Last modified: Jun/2023, AMP Support.