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:
flowplayer("a.example", "", {
plugins: {
rtmp: {
url: ""
},
rtmpInstream: {
url: ""
},
controls: {
autoHide: "always"
},
ova: {
url: "",
"shows": {
"baseURL": "",
"streams": [ { "file":"", "duration":"00:00:34" } ]
},
"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-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": "",
"allowAdRepetition": true
}
],
"schedule": [
{
"zone": "30",
"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": "30",
"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": "30",
"position": "top-center",
"width": 450,
"height": 50,
"startTime": "00:00:26",
"duration": "5"
}
]
},
"debug": {
"debugger": "firebug",
"levels": ""
}
}
}
});