This is a message.

Advanced playback Controls in Flowplayer

Adobe Flash Media server and Wowza Media Server both support slow motion and fast play. The Slow Motion plugin provides these features for Flowplayer.


Use the buttons below the player to control playback. The default controlbar also has buttons to control fast play and slow motion.

Features

  • Fast forward in any speed
  • Fast rewind in any speed
  • Slow motion forward and backward with any speed
  • Normal speed

The plugin also offers a JavaScript API that can be used to control the speeds.

Note: Wowza offers this feature only for FLV-encoded videos.

Flowplayer configuration

flowplayer("trickplay", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
log: { level: 'debug', filter: 'org.flowplayer.slowmotion.*' },
 
// configure the required plugins
plugins: {
 
slowmotion: {
url: "flowplayer.slowmotion-3.2.10.swf",
serverType: "fms"
},
 
rtmp: {
url: "flowplayer.rtmp-3.2.13.swf",
netConnectionUrl: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st"
},
 
// add a content plugin to show speed information (this is optional)
speedIndicator: {
url: "flowplayer.content-3.2.9.swf",
bottom: 50,
right: 15,
width: 135,
height: 30,
border: 'none',
style: {
body: {
fontSize: 12,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
},
 
backgroundColor: 'rgba(20, 20, 20, 0.5)',
 
// we don't want the plugin to be displayed by default,
// only when a speed change occur.
display: 'none'
},
 
controls: {
// enable tooltips for the buttons
tooltips: { buttons: true }
}
 
},
clip: {
// use the RTMP plugin
provider: 'rtmp',
scaling: 'orig'
}
 
});

JavaScript

See this demo as a standalone version.

Configuration options

Here is a list of all configuration options this plugin supports.

PropertyDatatypeDefaultDescription

provider

String

rtmp

Optional. The plugin needs to lookup the rtmp plugin from its configuration. By default it assumes that the name of the plugin is 'rtmp' like in the example above. If you call it something else, you need to configure it here.

speedIndicator

String

speedIndicator

Optional. You can show the current playback speed using the 'Content' plugin. You can specify the content plugin name here. If no 'speedIndicator' content plugin is present, nothing will be displayed.

normalLabel

String

Normal

When using the speedIndicator content plugin, specifies the text that will be shown on normal playback. You can use the {speed} template to show the actual speed.

slowForwardLabel

String

Slow Forward ({speed}x)

When using the speedIndicator content plugin, specifies the text that will be shown on slow motion playback (speed < 0). You can use the {speed} template to show the actual speed. The {speed} template will be replaced by a nice '1\x' text (up to 1/20). If no match can be done, it will display the decimal number.

fastForwardLabel

String

Fast Forward ({speed}x)

When using the speedIndicator content plugin, specifies the text that will be shown on fast forward playback (speed > 0). You can use the {speed} template to show the actual speed.

slowBackwardLabel

String

Slow Backward ({speed}x)

When using the speedIndicator content plugin, specifies the text that will be shown on slow motion backward playback (speed < 0). You can use the {speed} template to show the actual speed. The {speed} template will be replaced by a nice '1\x' text (up to 1/20). If no match can be done, it will display the decimal number.

fastBackwardLabel

String

Fast Backward ({speed}x)

When using the speedIndicator content plugin, specifies the text that will be shown on fast backward playback (speed > 0). You can use the {speed} template to show the actual speed.

speeedIndicatorDelay

Number

2000

Number of milliseconds the content plugin should be displayed.

Scripting

The SlowMotion plugin has the following custom methods that can be used at runtime:

MethodExampleDescription

forward(multiplier:Number = 4, fps:Number = -1)

$f().getPlugin("slowmotion").forward(2);

Fast forward or slow motion forward using the specified speed multiplier. multiplier specifies the speed multiplier, for example multiplier of 2 means double speed and 0.5 means half speed. fps specifies the framerate (frames per second) of the resulting stream. If you don't specify fps it defaults to multiplier *\\ 40.

backward(multiplier:Number = 4, fps:Number = -1)

$f().getPlugin("slowmotion").backward(2);

Fast backward or slow motion backward using the specified speed multiplier. The parameters are the same as with forward().

normal()

$f().getPlugin("slowmotion").normal();

Go back to normal speed playback.

Download

Download the current development version below.

flowplayer.slowmotion-3.2.10.swf

just the working flash file to get you going

flowplayer.slowmotion-3.2.10.zip

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

flowplayer.slowmotion-3.2.10-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.