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!"
}
}