Help your audience share your video with ease
Features and benefits
- Embed code for embedding the video.
- Video link for emailing to friends.
- Video link sharing to Facebook, Myspace, Twitter, Bebo, Orkut, Digg, Stumbleupon and Livespaces
- Email feature is spam-protected.
Configuration
The only configuration option we have added to the demo above is a description text that will be used when the user shares the page link to social sites.
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf",
{
'plugins': {
'viral': {
// load the viral videos plugin
'url': 'http://releases.flowplayer.org/swf/flowplayer.viralvideos-3.2.10.swf',
// define a video title used in sharing
'share': {
'description': 'Extreme surfers riding big waves'
}
}
},
'clip': {
'url': 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv',
'pageUrl': 'http://flowplayer.org/demos/plugins/flash/viralvideos.html',
'autoPlay': false
}
});
Here is an example how the plugin configuration looks. All player tabs (email, embed, share) have their own nodes in the plugin configuration object.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
viral: {
// load the viral videos plugin
url: "flowplayer.viralvideos-3.2.10.swf",
email: {
// use server-side email sending script
script: '/email/send'
},
share: {
// define a video title used in sharing
description: 'Extreme surfers riding big waves',
// disable livespaces (it's from Microsoft)
livespaces: false
},
// disable embedding completely, the same syntax can
// be used to disable also email and share
embed: false
}
}
});
User's email client
By default the plugin uses the user's email client in sending the email. With this option no special server-side email sending scripts or servers need to be installed. As this is the default behavior no special configuration is needed to use it.
Server-side email script
The plugin can send email by communicating with a server-side emailer script.
Inside the source zip package you can find a sample PHP script for sending email.
There is also a Zend framework example (in PHP) for protecting the server-side
script from spammers. Here are the configuration options for server-side emailing.
These all go inside an email node in the plugin configuration like in the example
below.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.10.swf",
// configure server side emailing
email: {
// the server side script that handles
// the emailing requests from this plugin
script: '/email/send',
// the server side script that returns
// a token value used for spam protection
tokenUrl: '/email/getToken'
}
}
}
});
Here are the configuration options used with the email script.
| Property | Default Value | Description |
|---|---|---|
|
|
|
The server side script that handles the emailing requests from this
plugin. See below for the POST variables that the plugin sends when
requesting this URL. The email script should return a JSON object with a success or error message like
|
|
|
|
The server side script that returns a token value used for spam
protection. The token script should return the token value in a JSON
object that is formatted like this
|
|
|
|
A token value used for spam protection. Can be used as an alternative
to |
The email script receives following POST variables:
name- The sender's name (required)email- The sender's email (required)subject- The email subject (required)message- The email message (required)to- A comma delimitered list of emails to send to (required)token- The token to authenticate before allowing to email (optional)
NOTE: It is advisable to filter the post variables for email headers, as well as run spam checks. The emailing system supplied in the source provides an example for filtering and validating input and running spam checks against the akismet and typepad spam services.
Required fields
The configuration option required is used to specify required fields:
| Property | Default Value | Description |
|---|---|---|
|
|
|
Specifies required fields in the plugin's email tab. By default only
the to-address is required. To make all fields required, use following
value: |
Texts used with email (internationalization)
You can change the texts that are used in the user interface as well as all the
texts that are used in the emails that the plugin sends. Texts used by the email
function go inside email/labels, for example:
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.10.swf",
// configure server side emailing
email: {
labels: {
// change the main title shown in the plugin's email tab
title: 'Share this video with email'
}
}
}
}
});
| Property | Default Value | Description |
|---|---|---|
|
|
|
The main title in the email tab. |
|
|
|
Label text shown in front of the email to-address. |
|
|
|
The small text shown next to the to-label. |
|
|
|
The label text shown in top of the large message field. |
|
|
|
The small text used to mark optional fields. |
|
|
|
The email message's subject text. |
|
|
|
Email body text template. The tokens in this template are replaced by
values like so: |
|
|
|
Label text used for the sender's name field. |
|
|
|
Label text used for the sender's email address field. |
|
|
|
Label for the email sending button. |
Embed
You can change the texts that are used in the user interface. Texts used by the
embed tab go inside embed/labels node in the plugin configuration, for example:
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.10.swf",
// configure the embed functions
embed: {
labels: {
// change the main title shown in the UI
title: 'Copy and paste following code to your page'
}
}
}
}
});
Properties to change texts shown in the plugins's user interface:
| Property | Default Value | Description |
|---|---|---|
|
|
|
The main title shown in the embed tab. |
|
|
|
Label text shown on top of the player colors and size customization options. |
|
|
|
Label text used for the background color selection. |
|
|
|
Label text used for the buttons' color selection. |
|
|
|
Label text used for the player width and height fields. |
|
|
|
Label for the copy button. |
Properties affecting the offered embed code:
| Property | Default Value | Description |
|---|---|---|
|
|
|
Overrides clip's autoBuffering. Useful when the clip on your website is configured when a splash image. |
|
|
|
Overrides clip's autoPlay. Useful when the clip on your website is starting automatically and that you don't want the clip to play on the embed site. |
|
|
|
Overrides clip's linkUrl. Useful to take back users to your site when they click on the video. |
|
|
|
Sets the |
|
|
|
Instead of getting the current player's configuration, you can provide an external JSON configuration file. If this property is not null, the external configuration will be used and will override all other values, providing you the full flexibility to change the behavior of embedded players. See the demo about using external configuration files for virally embedded players. |
|
|
|
Specifies video URLs to be used when the client browser does not support Flash. These URLs are added to a HTML5 video tag that will be part of the offered embed code. This way the provided embed code also works for example with Apple's iPad and iPhone. |
|
|
|
Specifies a value for the HTML5 video tag's |
Share
These are the configuration options for the share function. These go into the
share node in the configuration:
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.10.swf",
// configure sharing
share: {
// description used when sharing to the social sites
description: 'Boys and girls in the playground'
}
}
}
});
| Property | Default Value | Description |
|---|---|---|
|
|
|
The main title shown in the share tab. |
|
|
|
The video description used when the video is posted to the social sites. |
|
|
|
The body text used when sharing to digg.com (optional) |
|
|
|
The category used when sharing to digg.com (optional) |
|
|
|
Specifies how the sharing window is opened.
|
|
|
Can be used to hide specific icons from the share tab. To disable
sharing to livespaces.com, for example, use |
pageUrl
The plugin provides an additional clip property: pageUrl.
By default the plugin shares the URL of the page where the player is
originally embedded. The URL can be changed by explicitly setting a
clip's pageUrl.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
clip: {
// the URL to be shared on facebook, twitter etc.
pageUrl: 'http://mycoolvideos.org/video1.html'
},
plugins: {
//... the rest of the configuration here...
}
}
| Clip Property | Default Value | Description |
|---|---|---|
|
|
URL of the originating page |
URL of the page which is shared |
pageUrl makes sure that the propagation of your content via sharing
always refers back to its origin.
You can share several videos from one page by configuring the pageUrl
to point to a different location dedicated to one video each. Or you can
share different pages for each clip of a playlist.
HTML meta tags to share the player
Always bear in mind that the actually shared 'object' is nothing but a
reference, an URL. The link is spread onto social networking sites, and
these decide how they present the link based on the meta information
which is provided in the originating page's head section.
Important: Viral spreading of your media and the player cannot be achieved
by the plugin alone. It depends fundamentally on the meta tags on the page
designated by pageUrl. By reverse logic you could even share Flowplayer from a
page which does not feature a player or video except in its meta tags -
here's a demo. Also do not script the values of the meta tags or
generate them on the fly. These tags must be static, as they are parsed by the
social networks' robots independently of the sharing action.
The respective pageUrl properties of the two players included here point to
the demo pages which carry the meta tags for sharing them:
Styling
Here is a demo that shows the plugin with customized colors. The plugin canvas
colors, button colors and text colors have been changed. We use scripting to set
the plugin visible in the onLoad event listener function.
The configuration to achieve this is shown below.
flowplayer("vvplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
'plugins': {
'viral': {
'url': 'http://releases.flowplayer.org/swf/flowplayer.viralvideos-3.2.10.swf',
'share': {
'description': 'Extreme surfers riding big waves'
},
'icons': {
'overColor': 'rgba(255,10,10,0.5)'
},
'buttons': {
'color': 'rgba(47,69,45,1)',
'overColor': '#96b096',
'fontColor': '#122c10',
'lineColor': '#2f452d'
},
'canvas': {
'backgroundColor': 'rgba(31,114,35,0.8)',
'.label': {
'color': '#122c10',
'fontWeight': 'bold'
},
'.title': {
'color': '#122c10',
'fontWeight': 'bold'
},
'.input': {
'color': '#bee0be',
'backgroundColor': '#2f452d'
},
'.embed': {
'color': '#bee0be',
'backgroundColor': '#2f452d',
'fontSize': 6,
'fontWeight': 'normal'
}
},
'closeButton': {
'color': 'rgba(47,69,45,1)',
'overColor': 'rgba(255,0,0,0.5)'
}
}
},
'clip': {
'url': 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv',
'pageUrl': 'http://flowplayer.org/demos/plugins/flash/viralvideos-colored.html',
'autoPlay': false
}
// show the plugin right away
,onLoad: function() {
this.getPlugin("viral").fadeIn();
}
});
Plugin canvas
Following options affect the looks of the plugin canvas.
| Property | Default Value | Description |
|---|---|---|
|
|
|
Canvas background color. |
|
|
|
Gradient for the background. See the controlbar coloring documentation for more information about how to specify gradients. |
|
|
|
Border line width. |
|
|
|
The border radius (corner rounding) used for the canvas. |
Buttons
Following options can be used in the buttons and closeButton configuration
objects.
| Property | Default Value | Description |
|---|---|---|
|
|
|
Color of the buttons in normal state. |
|
|
|
Color of the buttons in mouse over state. |
|
|
|
Color used for the button label text. |
|
|
|
Color of the button border lines and for the close button X-symbol. |
Icons
Following options are used in the icons configuration object. They change the
colors of the Email, Share and Embed buttons that are shown initially and are used
to open the tabbed panes.
| Property | Default Value | Description |
|---|---|---|
|
|
|
The background color of the button. |
|
|
|
The background color of the button on mouse over. |
Text styling options
Text styling is defined in the canvas configuration object. Following CSS style
names are available.
| Style Name | Default Value | Description |
|---|---|---|
|
|
|
Style for texts used in all titles. |
|
|
|
Style for all label texts. |
|
|
|
Style for all input fields. |
|
|
|
Style for all small texts used, for example the (optional) text used to mark optional fields. |
|
|
|
Style for error messages. |
|
|
|
Style for success status messages. |
|
|
|
Style for the embed code text field. |
Dock
The buttons of this plugin are placed into a 'dock'. The dock has following options.
| Property | Default Value | Description |
|---|---|---|
|
|
|
the spacing between buttons in the dock |
|
|
|
Display the dock buttons lined horizontally? |
The dock also supports all the standard plugin display properties.
The automatic hiding of the dock can be controller using following properties.
| Property | Default Value | Description |
|---|---|---|
|
|
|
Use autohiding only in fullscreen mode? Set this to |
|
|
|
The delay in milliseconds before the controlbar is automatically hidden. The timer starts over again when the user stops moving the mouse or moves the mouse out of the player. Specifying 0 here causes the controlbar to hide immediately. The default is 4000 (4 seconds). |
|
|
|
The duration it takes for the controlbar to go completely hidden. This controls the speed of the hiding animation. |
|
|
|
The controlbar hides after mouse has been moved out of the player area. This property specifies the delay between the time mouse is moved out of the player area and the time when hiding starts. |
Here is an example configuration to change some of these properties. This example is for the Viral Videos plugin, but it also applies to the Controlbar plugin and the Sharing plugin.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.10.swf"
},
dock: {
gap: 5,
autoHide: {
// always enable
fullscreenOnly: false,
// make it hide faster
hideDelay: 2000
}
}
}
});
There is some convenience syntax also. For example you can supply a boolean value:
// disable autohiding completely
autoHide: false
You can also supply a string value, one of 'always', 'fullscreen', 'never':
// enable autohiding in fullscreen
autoHide: 'fullscreen'
Download
Get the latest version of the Flowplayer Viral Videos plugin. It is compatible with all 3.2+ releases.
| flowplayer.viralvideos-3.2.10.swf | just the working flash file to get you going |
| flowplayer.viralvideos-3.2.10.zip | working flash file (swf) + README.txt and LICENSE.txt |
| flowplayer.viralvideos-3.2.10-src.zip | source code |
Please right-click and choose "Save link as..." (or similar)
See the version history for this tool.
Found a bug?
If you encounter problems in this script, please send a bug report to the bug reporting forum. If you have a problematic page, including a direct URL to that page is by far the most effective way of helping us to find a bug.