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 @douglassllc/videojs-framebyframe with all npm packages installed. Try it out:

var videojsFramebyframe = require("@douglassllc/videojs-framebyframe")

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

@douglassllc/videojs-framebyframe v1.1.1

video.js plugin that allows users to step frame-by-frame through a video.

videojs-framebyframe

npm version License

Allows users to step frame-by-frame through a video.

This has to make an unfortunate assumption about framerate, but it should be "ok" for general use. If you can run framerate detection on the server side, this plugin works perfectly for you.

Updates included in this Fork

  • Updated code causing warnings for deprecated methods .plugin -> .registerPlugin
  • Appends buttons after playToggle
  • Added .css to package

Installation

$ npm install @douglassllc/videojs-framebyframe

Usage

import 'videojs-framebyframe/videojs.framebyframe.js'
import 'videojs-framebyframe/videojs.framebyframe.css'

let options: {
  plugins: {
    framebyframe: {
      fps: 30,
      steps: [
        { text: '< 1f', step: -1 },
        { text: '1f >', step: 1 }
      ]
    }
  }
}

let player = videojs('my-video', options)

Framerate Issues

We have no easy way to calculate framerate in Javascript, so we make a guess. If you're serving the video yourself or otherwise can calculate the FPS value, then you should use that and supply it to your videojs instance.

  • http://stackoverflow.com/questions/20336955/how-to-step-one-frame-forward-and-one-frame-backward-in-video-playback
  • http://stackoverflow.com/questions/4298084/html5-frame-by-frame-viewing-frame-seeking
  • https://github.com/videojs/video.js/issues/692

Original Contributors

  • Helena Rasche (@erasche)
  • Miguel Grinberg (@miguelgrinberg)

License

Licensed under MIT

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