This is a message.

External Configuration for viral videos

Use external configuration to reuse common settings across your website.

standalone demo

Using these keeps the embedding HTML simpler and cleaner as the configuration is kept in a separate file. The video has been embedded here by copying the embed code offered by the plugin

Configuration

The configuration in the HTML page has only a reference to an external config file called config.js. 

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
    url: "/demos/standalone/plugins/flash/config.js"
});

JavaScript

External Configuration File

Here are the contents of the external config file used in the main site, the 'home site' for the videos, and users are offered the possibility to embed videos on their blogs and other sites. Embedding happens via the embed code that can be copied from the Viral Videos plugin's embed tab. The contents of config.js is as follows:

{
    'clip' : {
        'url': 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv',
        'pageUrl': 'http://flowplayer.org/demos/plugins/flash/viralvideos-extconfig.html'
    },
    'plugins': {
        'viral': {
            'url': 'http://releases.flowplayer.org/swf/flowplayer.viralvideos-3.2.10.swf',
            'share': {
                'description': 'Extreme surfers riding big waves'
            },
            'embed': {
                'configUrl': 'http://flowplayer.org/demos/standalone/plugins/flash/config-embed.js'
            }
        }
    }
}

JavaScript

The embed code

With this configuration the plugin offers the following embed code, in the embed tab of the plugin. Note that the code is quite clean as the only configuration option for flowplayer is config=http://flowplayer.org/demos/standalone/plugins/flash/config-embed.js. 

<object name="player" id="_fp_random-number" width="425" height="300"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf"
        type="application/x-shockwave-flash">
    <param value="true" name="allowfullscreen" />
    <param value="always" name="allowscriptaccess" />
    <param value="high" name="quality" />
    <param value="transparent" name="wmode" />
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf" />
    <param value="config=http://flowplayer.org/demos/standalone/plugins/flash/config-embed.js"
           name="flashvars" />
</object>

HTML

Note that the configuration file config-embed.js - documented below - differs from config.js. config.js is used for the player visible on this page, the player's 'home', whereas config-embed.js specifies the configuration for all virally embedded players.

Configuration for the virally embedded players

The configuration offered for external embedding can be different to the one you use in the main site or for sharing. Here our embedding and sharing configuration adds a flowplayer promo video like a preroll.

As we also propagate the sharing capability, we ensure that embedded players share the player's 'home' by making the pageUrl in the common clip object of both videos point to this page. We have to do this explicitly, as pageUrl would default to the page in which the player is embedded, whereas we want to virally spread our page here. By controling the pageUrl we also ensure that each time our embedded player is shared from other pages, it will be displayed in social networks which allow actual video sharing: Our page provides the required meta attributes (see below), whereas we have no influence on the presence of meta attributes on the pages in which our player will be embedded.

The contents of config-embed.js are as follows:

{
    
    'clip': {
        'pageUrl': 'http://flowplayer.org/demos/plugins/flash/viralvideos-extconfig.html'
    },
    'playlist': [
        'http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv',
        'http://stream.flowplayer.org/Extremists.flv'
    ],
 
    'plugins': {
        'viral': {
            'url': 'http://releases.flowplayer.org/swf/flowplayer.viralvideos-3.2.10.swf',
            'share': {
                'description': 'Extreme surfers riding big waves'
            },
            'embed': {
                'configUrl': 'http://flowplayer.org/demos/standalone/plugins/flash/config-embed.js'
            }
        }
    }
}

JavaScript

We enforce the above configuration for shared players with these meta attributes in the head section of this page:

<link rel="video_src"
    href="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf?config=http%3A%2F%2Fflowplayer.org%2Fdemos%2Fstandalone%2Fplugins%2Fflash%2Fconfig-embed.js" />
<meta property="og:video"
    content="http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf?config=http%3A%2F%2Fflowplayer.org%2Fdemos%2Fstandalone%2Fplugins%2Fflash%2Fconfig-embed.js" />
<meta property="og:video:secure_url"
    content="https://d12zt1n3pd4xhr.cloudfront.net/fp/swf/flowplayer-3.2.11.swf?config=https%3A%2F%2Fd12zt1n3pd4xhr.cloudfront.net%2Ffp%2Fjs%2Fsecure_config-embed.js" />

HTML

For more details on meta tags refer to the Viral videos default configuration demo.