Slowmotion

Slow motion, fast forward & fast rewind

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

Flowplayer configuration

flowplayer("trickplay", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
    log: { level: 'debug', filter: 'org.flowplayer.slowmotion.*' },
 
    // configure the required plugins
    plugins:  {
 
        slowmotion: {
            url: "flowplayer.slowmotion-3.2.8.swf",
            serverType: "fms"
        },
 
        rtmp: {
            url: "flowplayer.rtmp-3.2.10.swf",
 
            // HDDN supports slow motion
            netConnectionUrl: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st"
 
        },
 
        // add a content plugin to show speed information (this is optional)
        speedIndicator: {
            url: "flowplayer.content-3.2.8.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.

Property	Datatype	Default	Description
`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:

Method	Example	Description
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.8.swf	just the working flash file to get you going
flowplayer.slowmotion-3.2.8.zip	working flash file (swf) + README.txt and LICENSE.txt
flowplayer.slowmotion-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.