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", "../dist/flowplayer-3.1.5.swf", {
plugins: {
rtmp: {
url: "../dist/flowplayer.rtmp-3.1.3.swf"
},
rtmpInstream: {
url: "../dist/flowplayer.rtmp-3.1.3.swf"
},
controls: {
autoHide: "always"
},
openAdStreamer: {
url: '../dist/OpenAdStreamer.swf',
"shows": {
"baseURL": "rtmp://ne7c0nwbit.rtmphost.com/videoplayer",
"streams": [ { "file":"mp4:the-black-hole.mp4", "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-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": {
"servers": [
{
"type": "OpenX",
"apiAddress": "http://openx.openvideoads.org/openx/www/delivery/fc.php",
"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": "fatal"
}
}
}
});