Example 1 - Illustrating overlay alignments

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" } ]
            },

            "regions": {
                "declarations": [
                    {
                      "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": ""
            }
        }
    }
});