Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including videojs-shuttle-controls with all npm packages installed. Try it out:

var videojsShuttleControls = require("videojs-shuttle-controls")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

videojs-shuttle-controls v1.2.4

Adds shuttle controls(JKL controls) to video.js

videojs-shuttle-controls

Adds shuttle controls(JKL controls) to video.js Live Demo

Table of Contents

## Installation
npm install --save videojs-shuttle-controls

Usage

To include videojs-shuttle-controls on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-shuttle-controls.min.js"></script>
<script>
  var player = videojs('my-video', {
    playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
  });

  player.shuttleControls({
    playPauseKeys       : [' ', 'k'],
    backwardKeys        : ['j'],
    forwardKey          : ['l'],
    inKey               : ['i'],
    outKey              : ['o'],
    backwardFrameKey    : ['ArrowLeft'],
    forwardFrameKey     : ['ArrowRight'],
    shiftMagnification  : 10,
    fps                 : 30
  });
</script>

Browserify/CommonJS

When using with Browserify, install videojs-shuttle-controls via npm and require the plugin as you would any other module.

var videojs = require('video.js');

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-shuttle-controls');

var player = videojs('my-video', {
  playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
});

player.shuttleControls({
  playPauseKeys     : [' ', 'k'],
  backwardKeys      : ['j'],
  forwardKey        : ['l'],
  inKey             : ['i'],
  outKey            : ['o'],
  backwardFrameKey  : ['ArrowLeft'],
  forwardFrameKey   : ['ArrowRight'],
  shiftMagnification: 10,
  fps               : 30
});

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-shuttle-controls'], function(videojs) {
  var player = videojs('my-video', {
    playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
  });

  player.shuttleControls({
    playPauseKeys       : [' ', 'k'],
    backwardKeys        : ['j'],
    forwardKey          : ['l'],
    inKey               : ['i'],
    outKey              : ['o'],
    backwardFrameKey    : ['ArrowLeft'],
    forwardFrameKey     : ['ArrowRight'],
    shiftMagnification  : 10,
    fps                 : 30
  });
  
});

ES6

import videojs from 'video.js'
import 'videojs-shuttle-controls'

const player = videojs('my-video', {
  playbackRates: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10]
});

player.shuttleControls({
  playPauseKeys     : [' ', 'k'],
  backwardKeys      : ['j'],
  forwardKey        : ['l'],
  inKey             : ['i'],
  outKey            : ['o'],
  backwardFrameKey  : ['ArrowLeft'],
  forwardFrameKey   : ['ArrowRight'],
  shiftMagnification: 10,
  fps               : 30
});

Options

  • playPauseKeys (array of string): The keys to toggle between play and pause (default: [' ', 'k'])
  • backwardKeys (array of string): The keys to play backward (default: ['j'])
  • forwardKey (array of string): The keys to play forward (default: ['l'])
  • inKey (array of string): The keys to confirm the in point of loop
  • outKey (array of string): The keys to confirm the out point of loop
  • backwardFrameKey (array of string): The keys to step backward (default: ['ArrowLeft'])
  • forwardFrameKey (array of string): The keys to step forward (default: ['ArrowRight'])
  • shiftMagnification (number): The step magnification when using shift key (default: 10)
  • fps (number): The video frame rate (default: 30)
  • playbackRates (array of number): Set playbackRates. If you want to display in the control bar, set it to the player's playbackRates instead of here. (default: [-10, -5, -2, -1, -0.5, 0.5, 1, 2, 5, 10])

License

MIT. Copyright (c) sweetberry <pixel@sweetberry.com>

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free