Viral Videos plugin with external configuration files Flash plugins - Demo 14 / 14
Introduction
Flowplayer supports external configuration files. 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 plugon.
JavaScript coding
The configuration in the HTML page has only a reference to an external config file called config.js.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
// load the configuration from an external config file
url: 'config.js'
});External configuration file
Here is 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': "http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv",
'plugins': {
'viral': {
/* load the viral videos plugin */
'url': 'flowplayer.viralvideos-3.2.2-dev2.swf',
'share': {
'description': 'Extreme surfers riding big waves',
/* use a custom URL when sharing (by default the embedding page's URL is used) */
'shareUrl': "htpp://flowplayer.org/download/index.html"
},
'embed': {
/* the configuration for embedded players is loaded from an external config file.
* specify the URL to this file here */
'configUrl': "http://dev.flowplayer.org/demos/plugins/flash/config-embed.js"
}
}
}
}The embed code
With this configuration the plugin offers 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=/demos/plugins/flash/config-embed.js. Note that we are using a different configuration file here for all virally embedded players, see it's contents below.
<object id="null" width="640" height="384" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param value="true" name="allowfullscreen"/>
<param value="always" name="allowscriptaccess"/>
<param value="high" name="quality"/>
<param value="true" name="cachebusting"/>
<param value="#000000" name="bgcolor"/>
<param name="movie" value="http://localhost:8082/swf/flowplayer-3.2.3-dev.swf?0.8956042444333434" />
<param value="config=config-embed.js" name="flashvars"/>
<embed src="http://localhost:8082/swf/flowplayer-3.2.3-dev.swf?0.8956042444333434"
type="application/x-shockwave-flash" width="640" height="384" allowfullscreen="true"
allowscriptaccess="always" cachebusting="true"
flashvars="config=http://flowplayer.org/demos/plugins/flash/config-embed.js"
bgcolor="#000000" quality="true"/>
</object>Configuration for the virally embedded players
The configuration used in external players can be different to what you use in the main site. Here we force the user to see a flowplayer promo video. The contents of config-embed.js is as follows.
{
'playlist': [
/* virally embedded players will show a flowplayer preroll with all controls disabled! */
{ 'url': 'http://video.flowplayer.org/flowplayer.flv', 'enabled': { 'all': false } },
'http://video.flowplayer.org/Extremists.flv'
],
/*
* Everything after this is the same configuration as in the origin site.
*/
'plugins': {
'viral': {
/* load the viral videos plugin */
'url': 'flowplayer.viralvideos-3.2.2-dev2.swf',
'share': {
'description': 'Extreme surfers riding big waves',
/* use a custom URL when sharing (by default the embedding page's URL is used) */
'shareUrl': "htpp://flowplayer.org/download/index.html"
},
'embed': {
/* the configuration for embedded players is loaded from an external config file.
* specify the URL to this file here */
'configUrl': "http://dev.flowplayer.org/demos/plugins/flash/config-embed.js"
}
}
}
}