This example illustrates how to place overlays in different positions on the player screen. Several different regions are defined - bottom regions for center, left and right placement, a region for the center of the screen and a centered region for the top of the screen. 2 seconds into the program, an overlay will appear in each of these regions one after each other for a duration of 5 seconds.
The configuration for this example is:
"" is defined as:
<config>
<ova.title>
Illustrating overlay alignments
</ova.title>
<ova.json>
{
"overlays": {
"regions": [
{
"id": "bottom-center",
"verticalAlign": "bottom",
"horizontalAlign": "center",
"backgroundColor": "#000000",
"opacity": 0.8,
"borderRadius": 15,
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
},
{
"id": "bottom-center",
"verticalAlign": "bottom",
"horizontalAlign": "center",
"backgroundColor": "#000000",
"opacity": 0.8,
"borderRadius": 15,
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
},
{
"id": "bottom-center",
"verticalAlign": "bottom",
"horizontalAlign": "left",
"backgroundColor": "transparent",
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
},
{
"id": "bottom-left",
"verticalAlign": "bottom",
"horizontalAlign": "left",
"backgroundColor": "#000000",
"opacity": 0.8,
"borderRadius": 15,
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
},
{
"id": "bottom-right",
"verticalAlign": "bottom",
"horizontalAlign": "right",
"backgroundColor": "#000000",
"opacity": 0.8,
"borderRadius": 15,
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
},
{
"id": "screen-center",
"verticalAlign": "center",
"horizontalAlign": "center",
"backgroundColor": "#000000",
"opacity": 0.8,
"borderRadius": 15,
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
},
{
"id": "top-center",
"verticalAlign": "top",
"horizontalAlign": "center",
"backgroundColor": "#000000",
"opacity": 0.8,
"borderRadius": 15,
"padding": "-10 -10 -10 -10",
"width": 450,
"height": 50
}
]
},
"ads": {
"keepOverlayVisibleAfterClick": true,
"servers": [
{
"type": "OpenX",
"apiAddress": "OVA_OPENX_API",
"allowAdRepetition": true
}
],
"schedule": [
{ "zone": "41",
"position": "bottom-center",
"width": 450,
"height": 50,
"startTime": "00:00:02",
"duration": "5"
},
{ "zone": "41",
"position": "bottom-left",
"width": 450,
"height": 50,
"startTime": "00:00:08",
"duration": "5"
},
{ "zone": "41",
"position": "bottom-right",
"width": 450,
"height": 50,
"startTime": "00:00:14",
"duration": "5"
},
{ "zone": "41",
"position": "screen-center",
"width": 450,
"height": 50,
"startTime": "00:00:20",
"duration": "5"
},
{ "zone": "41",
"position": "top-center",
"width": 450,
"height": 50,
"startTime": "00:00:26",
"duration": "5"
}
]
},
"debug": {
"debugger": "firebug",
"levels": "OVA_DEBUG"
}
}
</ova.json>
</config>