You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Flash plugin: Viral Videos Viral embedding and sharing

Introduction

The Video Share plugin is used to spread videos virally via email, social networking sites, and by offering embed code to be used in external sites.

(Version 3.2.5)

Demo

Here you can see the viral videos plugin in it's default configuration.

The only configuration option we have added here is a description text that will be used when the user shares the page link to social sites.

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
	plugins: {
		viral: {
			// load the viral videos plugin
			url: 'flowplayer.viralvideos-3.2.5.swf',
			
			// define a video title used in sharing
			share: {
				description: 'Extreme surfers riding big waves' 
			}
		}
	}
});

Features and benefits


Configuration

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

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.7.swf", {
	plugins: {
		viral: {
			url: 'flowplayer.viralvideos-3.0.0.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
script 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 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 A token value used for spam protection. Can be used as an alternative to tokenUrl.

The email script receives following POST variables:

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
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/texts, for example:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
	plugins: {
		viral: {
			url: 'flowplayer.viralvideos-3.0.0.swf',
			
			// configure server side emailing
			email: {
				texts: {
					// change the main title shown in the plugin's email tab
					title: 'Share this video with email'
				}
			}
		}
	}
});
property default value description
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\n Video Link: {2}" Email body text template. The tokens in this template are replaced by values like so: {0}: message as filled by the user, {1}: the URL of the video page, {2}: the URL of the video page (2nd instance)
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 node in the plugin configuration, for example:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
	plugins: {
		viral: {
			url: 'flowplayer.viralvideos-3.0.0.swf',
			
			// configure the embed functions
			embed: {
				// change the main title shown in the UI
				title: 'Copy and paste following code to your page'
			}
		}
	}
});
property default value description
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.

Following properties are used to change the embed code offered by the plugin.

property default value description
autoBuffering Clip's value Overrides clip's autoBuffering. Useful when the clip on your website is configured when a splash image.
autoBuffering Clip's value Overrides clip's autoBuffering. Useful when the clip on your website is configured when 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 Overrides clip's linkUrl. Useful to take back users to your site when they click on the video.
configUrl 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 here about using external configuration files for virally embedded players.
fallbackUrls 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 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.7.swf", {
	plugins: {
		viral: {
			url: 'flowplayer.viralvideos-3.0.0.swf',
			
			// configure sharing
			share: {
				// description used when sharing to the social sites
				description: 'Boys and girls in the playground'
			}
		}
	}
});
property default value description
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 The body text used when sharing to digg.com (optional)
category The category used when sharing to digg.com (optional)
shareWindow _popup

Defines where the Twitter or Facebook sharing page is opened. Available options are:

  • _self the current frame in the current window.
  • _blank a new window.
  • _parent the parent of the current frame.
  • _top the top-level frame in the current window.
  • _popup a popup browser window.
facebook,
twitter,
myspace,
livespaces,
digg,
orkut,
stubmbleupon,
bebo
true Can be used to hide specific icons from the share tab. To disable sharing to livespaces.com, for example, use livespaces: false

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.

$f("viral-colored", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
	clip: {
		autoPlay: false
	},
	plugins: {			
		// position and placement of the dock. The dock contains the buttons that
		// are used to open the tabbed panes.
		dock: {
			// make it sit in the top/left corner
			left: 15,
			top: 15,

			// make it horizontal
			horizontal: true,

			// make the width appropriate for vertical orientation
			height: '20%'
		},
		viral: {
			// load the viral videos plugin
			url: 'flowplayer.viralvideos-3.2.5.swf',

			// the Email, Embed and Share icons that are shown in the dock
			icons: {
				overColor: 'rgba(255,10,10,0.5)'
			},

			// Copy and Send email buttons
			buttons: {
				color: "rgba(47,69,45,1)",
				overColor: "#96b096",
				fontColor: '#122c10',
				lineColor: '#2f452d'
			},
			// the overall colors and text field styling is defined for the canvas
			canvas: {
				backgroundColor: 'rgba(31,114,35,0.8)',
				'.label': {
					color: '#122c10',
					fontWeight: 'bold'
				},
				// title texts
				'.title': {
					color: '#122c10',
					fontWeight: 'bold'
				},
				// input text fields
				'.input': {
					color: '#bee0be',
					backgroundColor: '#2f452d'
				},
				// the embed code text field
				'.embed': {
					color: '#bee0be',
					backgroundColor: '#2f452d',
					fontSize: 6,
					fontWeight: 'normal'
				}
			},
			// the close button used to close the plugin
			closeButton: {
				color: "rgba(47,69,45,1)",
				overColor: 'rgba(255,0,0,0.5)'
			}
		}
	},
	// 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
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

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

property default value description
color 'rgba(140,142,140,1)' Color of the buttons in normal state.
overColor 'rgba(140,142,140,1)' Color of the buttons in normal state.
fontColor 'rgb(255,255,255)' Color used for the button label text. Not applicable for closeButton.
lineColor 'rgb(255,255,255)' 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
color 'rgba(20,20,20,0.5)'
overColor 'rgba(0,0,0,1)'

Text styling options

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

style name default value description
.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.

Download

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

flowplayer.viralvideos-3.2.5.swf just the working Flash file to get you going
flowplayer.viralvideos-3.2.5.zip working Flash file (swf) + README.txt and LICENCE.txt
flowplayer.viralvideos-3.2.5-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.