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
- 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
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
}
}
});
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:
- 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)
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:
|
| 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.