Streaming plugin: Slow Motion (beta) Slow motion, fast forward & fast rewind
Demo
Use the buttons below the player to control playback. Our upcoming 'Modern' skin of the controlbar version will have special buttons to be used to control slow motion and fast play.
Introduction
The Wowza Media Server supports slow motion and fast play. The Slow Motion plugin provides these features to Flowplayer. The Wowza server is required when using this plugin.
- Fast forward in any speed
- Fast rewind in any speed
- Slow motion forward and backward with any speed
- Normal speed
The upcoming Flowplayer Modern controlbar skin contains buttons for controlling trickplay. In addition to using the Modern controlbar you can control playback using the JavaScript API.
(Version 3.2.0)
Flowplayer configuration
flowplayer("trickplay", "http://releases.flowplayer.org/swf/flowplayer-3.2.2.swf", {
log: { level: 'debug', filter: 'org.flowplayer.slowmotion.*' },
// configure the required plugins
plugins: {
slowmotion: {
url: 'flowplayer.slowmotion-3.2.0.swf'
},
rtmp: {
url: 'flowplayer.rtmp-3.2.1.swf',
// HDDN supports slow motion
netConnectionUrl: 'rtmp://vod01.netdna.com/play'
},
// add a content plugin to show speed information (this is optional)
speedIndicator: {
url: 'flowplayer.content-3.2.0.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'
}
});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 it's 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. |
speedIndicatorDelay |
Number | 2000 | Number of milliseconds the content plugin should be showed. |
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.0.swf | just the working Flash file to get you going |
| flowplayer.slowmotion-3.2.0.zip | working Flash file (swf) + README.txt and LICENCE.txt |
| flowplayer.slowmotion-3.2.0-src.zip | source code |
Please right-click and choose "Save link as..." (or similar)
See the version history for this tool.
NOTE We are no longer providing packed scripts. Althought they may have smaller file size they offer less performance than minified scripts. See details from JavaScript Library Loading Speed.
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.