clappr-playback-rate-custom-plugin
v1.0.10
Published
A simple plugin for Clappr that adds support to manually select the playback rate on HTML5 containers.
Downloads
15
Readme
Clappr Playback Rate Plugin
Getting started
Add both Clappr and the plugin scripts to your HTML :
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-playback-rate-plugin@latest/lib/clappr-playback-rate-plugin.min.js"></script>
</head>Then add PlaybackRatePlugin into the list of plugins of your player instance :
var player = new Clappr.Player({
source: "https://your.video/here.mp4",
plugins: [
PlaybackRatePlugin
],
// [...]
});You can also customize the labels and rates using the playbackRateConfig property as shown below :
var player = new Clappr.Player({
// ...
source: "https://your.video/here.mp4",
plugins: [
PlaybackRatePlugin
],
playbackRateConfig: {
defaultValue: 1,
options: [
{value: 0.5, label: '0.5x'},
{value: 1, label: '1x'},
{value: 2, label: '2x'},
],
// rateSuffix: 'x',
},
});External interface
This plugin adds the getPlaybackRate and setPlaybackRate methods to Clappr player instance.
var player = new Clappr.Player({
source: "https://your.video/here.mp4",
plugins: [
PlaybackRatePlugin
],
// [...]
});
var currentRate = player.getPlaybackRate(); // 1
player.setPlaybackRate(0.5); // set playback rate to 0.5Usage as Node.js external dependency
Add it to your project, for example, using NPM command :
$ npm install clappr-playback-rate-pluginThen import the plugin into your application bundle :
import PlaybackRatePlugin from 'clappr-playback-rate-plugin'
// [...]Limitations
This plugin works only with HTML audio and video playbacks. (ie: it does not work for the Flash playback)
Changelog
See Releases
Development
Install dependencies :
yarnStart HTTP dev server (http://0.0.0.0:8080) :
npm start