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, via Faceboook and Twitter, and by offering embed code to be used in external sites.

Features and benefits

  • Sharing of video links using email
  • Embed code for spreading the video into external sites and blog
  • Posting video links to Facebook and Twitter

Configuration

Here is an example that shows how the plugin configuration looks. You can see all the available configuration categories of this plugin present here. Look further down for a full listing of configuration options.

Note that all the configuration options shown below are optional. In most cases you don't need to specify any of these because the options have sensible default values.

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf",
{
'plugins': {
'sharing': {
'url': 'flowplayer.sharing-3.2.15.swf',
 
'buttons': {
'overColor': '#ff0000'
},
'email': {
'subject': 'A cool video'
},
'embed': {
'fallbackUrls': [ 'Extremists.mov' ]
},
 
'facebook': {
'shareWindow': '_blank'
},
 
'twitter': false
},
 
'dock': {
'right': 15,
'horizontal': false,
'width': '10%',
'autoHide': false
}
},
'clip': {
'url': 'http://stream.flowplayer.org/Extremists.flv',
'pageUrl': 'http://flash.flowplayer.org/demos/plugins/flash/sharing-custom.html',
'autoPlay': false
}
});

JavaScript

Email

The following properties affect the content of the email message. These properties go into an email node in the plugin configuration, for example:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
sharing: {
url: "flowplayer.sharing-3.2.15.swf",
 
email: {
subject: 'A cool video'
}
}
}
});

JavaScript

PropertyDefault ValueDescription

message

null

A message to be inserted into the email template. See the template property below.

subject

Video you might be interested in

The subject to be used in the email.

template



{0}

Video Link: <a href="{1}">{2}</a>

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)

Embed

The following properties control what kind of embed code is offered by the plugin. These properties go into an embed node in the plugin configuration, for example:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
sharing: {
url: "flowplayer.sharing-3.2.15.swf",
 
// configure the embed properties
embed: {
// embedded clips should have autoPlay: false
autoPlay: false
}
}
}
});

JavaScript

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

Facebook and Twitter

These are the configuration options for sharing via Facebook and Twitter. These go into facebook and twitter nodes in the configuration:

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
plugins: {
sharing: {
url: "flowplayer.sharing-3.2.15.swf",
 
facebook: {
// facebook sharing is opened to the current browser window
shareWindow: '_self'
},
twitter: {
// tweeting also happens in the current browser window
shareWindow: '_self'
}
}
}
});

JavaScript

PropertyDefault ValueDescription

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

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:

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.

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 Sharing plugin.

flowplayer.sharing-3.2.15.swf

just the working flash file to get you going

flowplayer.sharing-3.2.15.zip

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

flowplayer.sharing-3.2.15-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.