Help your audience share your video with ease
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.11.swf",
{
'plugins': {
'sharing': {
'url': 'http://releases.flowplayer.org/swf/flowplayer.sharing-3.2.8.swf',
'buttons': {
'overColor': '#ff0000'
},
'email': {
'subject': 'A cool video'
},
'embed': {
'fallbackUrls': [ 'Extremists.mov' ]
},
'facebook': {
'shareWindow': '_self'
},
'twitter': false
},
'dock': {
'right': 15,
'horizontal': false,
'width': '10%',
'autoHide': false
}
},
'clip': {
'url': 'http://pseudo01.hddn.com/vod/demo.flowplayervod/Extremists.flv',
'pageUrl': 'http://flowplayer.org/demos/plugins/flash/sharing-custom.html',
'autoPlay': false
}
});
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.11.swf", {
plugins: {
sharing: {
url: "flowplayer.sharing-3.2.8.swf",
email: {
subject: 'A cool video'
}
}
}
});
| Property | Default Value | Description |
|---|---|---|
|
|
|
A message to be inserted into the email template. See the template property below. |
|
|
|
The subject to be used in the email. |
|
|
|
Email body text template. The tokens in this template are replaced by
values like so: |
Embed
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.11.swf", {
plugins: {
sharing: {
url: "flowplayer.sharing-3.2.8.swf",
// configure the embed properties
embed: {
// embedded clips should have autoPlay: false
autoPlay: false
}
}
}
});
| 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 |
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.11.swf", {
plugins: {
sharing: {
url: "flowplayer.sharing-3.2.8.swf",
facebook: {
// facebook sharing is opened to the current browser window
shareWindow: '_self'
},
twitter: {
// tweeting also happens in the current browser window
shareWindow: '_self'
}
}
}
});
| Property | Default Value | Description |
|---|---|---|
|
|
|
Specifies how the sharing window is opened.
|
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:
Buttons
The 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. |
Dock
The buttons of this plugin are paced in the '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 Sharing plugin.
| flowplayer.sharing-3.2.8.swf | just the working flash file to get you going |
| flowplayer.sharing-3.2.8.zip | working flash file (swf) + README.txt and LICENSE.txt |
| flowplayer.sharing-3.2.8-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.