This is a message.

Help your audience share your video with ease

Add overlay controls to your player that enables users to spread videos virally via email, social networking sites, and by offering embed code to be used in external sites.

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.18.swf",
{
'plugins': {
'viral': {
// load the viral videos plugin
'url': 'flowplayer.viralvideos-3.2.14.swf',
 
// define a video title used in sharing
'share': {
'description': 'Extreme surfers riding big waves'
}
}
},
'clip': {
'url': 'http://edge.flowplayer.org/Extremists.flv',
'pageUrl': 'http://flash.flowplayer.org/demos/plugins/flash/viralvideos.html',
'autoPlay': false
}
});

JavaScript

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.18.swf", {
plugins: {
viral: {
// load the viral videos plugin
url: "flowplayer.viralvideos-3.2.14.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
}
}
});

JavaScript

Email

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.18.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.14.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'
}
}
}
});

JavaScript

Here are the configuration options used with the email script.

PropertyDefault ValueDescription

script

null

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.

tokenUrl

null

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 {"token": "3435952382509853908250925"}

token

null

A token value used for spam protection. Can be used as an alternative to tokenUrl.

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:

PropertyDefault ValueDescription

required

["to"]

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: ["name", "email", "to", "message", "subject"].

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.18.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.14.swf",
 
// configure server side emailing
email: {
labels: {
// change the main title shown in the plugin's email tab
title: 'Share this video with email'
}
}
}
}
});

JavaScript

PropertyDefault ValueDescription

title

Email this video

The main title in the email tab.

to

Type in an email address

Label text shown in front of the email to-address.

toSmall

multiple addresses with commas)

The small text shown next to the to-label.

message

Personal message

The label text shown in top of the large message field.

optional

(optional)

The small text used to mark optional fields.

subject

Video you might be interested in

The email message's subject text.

template

{0}\n\nVideo Link: <a href=\"{1}\">{1}</a>

Email body text template. The tokens in this template are replaced by values like so: {0}: message as entered by the user, {1}: the URL of the video page.

from

Your name

Label text used for the sender's name field.

fromAddress

Your email address

Label text used for the sender's email address field.

Send

Send email

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.18.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.14.swf",
 
// configure the embed functions
embed: {
labels: {
// change the main title shown in the UI
title: 'Copy and paste following code to your page'
}
}
}
}
});

JavaScript

Properties to change texts shown in the plugins's user interface:

PropertyDefault ValueDescription

title

Copy and paste this code to your web page

The main title shown in the embed tab.

options

Customize size and colors

Label text shown on top of the player colors and size customization options.

backgroundColor

Background color

Label text used for the background color selection.

buttonColor

Button color

Label text used for the buttons' color selection.

size

Size (pixels)

Label text used for the player width and height fields.

copy

Copy

Label for the copy button.

Properties affecting the offered embed code:

PropertyDefault ValueDescription

autoBuffering

Clip's value

Overrides clip's autoBuffering. Useful when the clip on your website is configured with a splash image.

autoPlay

Clip's value

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.

linkUrl

None

Overrides clip's linkUrl. Useful to take back users to your site when they click on the video.

wmode

transparent

Sets the wmode Flash property for the embedded object. You might want to set this to the Flash default 'window' for reasons discussed in this demo.

configUrl

None

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.

fallbackUrls

None

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.

fallbackPoster

None

Specifies a value for the HTML5 video tag's poster attribute. Used together with fallbackUrls (see above).

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.18.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.14.swf",
 
// configure sharing
share: {
// description used when sharing to the social sites
description: 'Boys and girls in the playground'
}
}
}
});

JavaScript

PropertyDefault ValueDescription

title

Click on an icon to share this video

The main title shown in the share tab.

description

A cool video

The video description used when the video is posted to the social sites.

body

None

The body text used when sharing to digg.com (optional)

category

None

The category used when sharing to digg.com (optional)

shareWindow

_popup

Specifies how the sharing window is opened.

  • _self: in the current frame of the current window
  • _blank: a new window
  • _parent: the parent of the current frame
  • _top: the top level frame of the current window
  • _popup: a new popup browser window
  • facebook
  • twitter
  • myspace
  • livespaces
  • digg
  • orkut
  • stumbleupon
  • bebo

true

Can be used to hide specific icons from the share tab. To disable sharing to livespaces.com, for example, use livespaces: false

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.18.swf", {
clip: {
// the URL to be shared on facebook, twitter etc.
pageUrl: 'http://mycoolvideos.org/video1.html'
},
plugins: {
//... the rest of the configuration here...
}
}

JavaScript

Clip PropertyDefault ValueDescription

pageUrl

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.18.swf", {
 

'plugins': {
'viral': {
'url': 'flowplayer.viralvideos-3.2.14.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://edge.flowplayer.org/Extremists.flv',
'pageUrl': 'http://flash.flowplayer.org/demos/plugins/flash/viralvideos-colored.html',
'autoPlay': false
}
 
// show the plugin right away
,onLoad: function() {
this.getPlugin("viral").fadeIn();
}
});

JavaScript

Plugin canvas

The following options affect the looks of the plugin canvas.

PropertyDefault ValueDescription

backgroundColor

rgba(0,0,0,0.8)

Canvas background color.

backgroundGradient

medium

Gradient for the background. See the controlbar coloring documentation for more information about how to specify gradients.

border

none

Border line width.

borderRadius

15

The border radius (corner rounding) used for the canvas.

Buttons

The following options can be used in the buttons and closeButton configuration objects.

PropertyDefault ValueDescription

color

rgba(140,142,140,1)

Color of the buttons in normal state.

overColor

rgba(140,142,140,1)

Color of the buttons in mouse over state.

fontColor

rgb(255,255,255)

Color used for the button label text.

lineColor

rgb(255,255,255)

Color of the button border lines and for the close button X-symbol.

Icons

The 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.

PropertyDefault ValueDescription

color

rgba(20,20,20,0.5)

The background color of the button.

overColor

rgba(0,0,0,1)

The background color of the button on mouse over.

Text styling options

Text styling is defined in the canvas configuration object. The following CSS style names are available.

Style NameDefault ValueDescription

.title

{
    fontSize: 12,
    fontWeight: 'bold'
}

Style for texts used in all titles.

.label

{
    fontSize: 12
}

Style for all label texts.

.input

{
    fontSize: 12,
    color: '#000000',
    backgroundColor: '#ffffff'
}

Style for all input fields.

.small

{
    fontSize: 8
}

Style for all small texts used, for example the (optional) text used to mark optional fields.

.error

{
    color: '#ff3333',
    fontSize: 10,
    fontWeight: 'normal',
    fontFamily: 'Arial'
}

Style for error messages.

.success

{
    color: '#000000',
    fontSize: 10,
    fontWeight: 'normal',
    fontFamily: 'Arial'
}

Style for success status messages.

.embed

{
    color: '#000000',
    fontSize: 6,
    fontWeight: 'normal',
    fontFamily: 'Arial',
    textAlign: 'left'
}

Style for the embed code text field.

Dock

The buttons of this plugin are placed in the 'dock'. The dock is configured like a plugin and provides the following options:

PropertyDefault ValueDescription

gap

5

the spacing between buttons in the dock

horizontal

false

Display the dock buttons aligned horizontally?

The dock also supports all the standard plugin display properties. However, changing these properties at runtime using the css() API plugin method is not supported. The remaining plugin methods work only if automatic hiding of the dock is completely disabled, see below.

Automatic hiding of the dock

The automatic hiding of the dock can be controlled using the following properties:

PropertyDefault ValueDescription

enabled

true

Set this to false if you do not want the plugin to autohide at all. See also the autohide shorthand syntax.

fullscreenOnly

false

Set this to true if you want the plugin to autohide only in fullscreen mode. See also the 'fullscreen' autohide shorthand syntax.

hideDelay

4000

The delay in milliseconds before the plugin 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 plugin to hide immediately. The default is 4000 (4 seconds).

hideDuration

800

The duration it takes for the plugin to go completely hidden. This controls the speed of the hiding animation.

mouseOutDelay

500

The plugin 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, Sharing and Bitrate Selection plugins.

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
viral: {
url: "flowplayer.viralvideos-3.2.14.swf"
},
dock: {
gap: 5,
autoHide: {
// enable in fullscreen mode only
fullscreenOnly: true,
 
// make it hide faster
hideDelay: 2000
}
}
}
});

JavaScript

autoHide shorthands

There is some convenience syntax as well. For example you can supply a boolean value:

// disable autohiding completely
autoHide: false

JavaScript

You can also supply a string value, one of 'always', 'fullscreen', 'never':

// enable autohiding in fullscreen
autoHide: 'fullscreen'

JavaScript

Download

Get the latest version of the Flowplayer Viral Videos plugin. It is compatible with all 3.2+ releases.

flowplayer.viralvideos-3.2.14.swf

just the working flash file to get you going

flowplayer.viralvideos-3.2.14.zip

working flash file (swf) + README.txt and LICENSE.txt

flowplayer.viralvideos-3.2.14-src.zip

source code

Please right-click and choose "Save link as..." (or similar)

Note: For XSS security reasons Flash plugins must be located at and loaded from the same domain as the core player flowplayer-3.2.18.swf.

This is a Flash plugin, and its features are therefore not available on iOS. For iOS please consult the ipad plugin.

See the version history for this tool.

Found a bug?

If you encounter problems with this script, please turn to the Flowplayer Flash plugin forum with a link to a minimal sample page (no extra html, css, javascript) demonstrating the issue.