grunt-vid2pict

grunt-vid2pict

Transforms a video into a picture based web animation.

It exports the video to png or jpeg using ffmpeg.

Then it generates a css file, which describe frame sequencing.

It also generates a javascript file containing useful information to play the produced videos.

I need this kind of things to work with transparency and so on.

See the Demo

Installation

If you haven't used Grunt before, be sure to check out the Getting Started guide.

Run the following commands to download and install the application:

npm i grunt-vid2pict --save-dev

Load the task with

grunt.loadNpmTasks('grunt-vid2pict');

FFMPEG

This module use ffmpeg under the hood.

It lookup for

• options.ffmpeg inlined grunt task option
• process.ENV['FFMPEG'] a predefined variable
• ffmpeg in the PATH

Documentation

Configure a task such

grunt.initConfig({
  vid2pict: {
    'test': {
      'options': {
        src: 'test/fixtures/big_buck_bunny.webm',
        dst: 'test/test-vid/img%03d.jpg', // png|jpeg
        //compression_level: 0, // png 100-0
        quality: 12, // jpeg 1-31
        ss: 0, // start time sequence
        t: 60, // duration
        fps: 12, // frames per second to keep
        baseUrl: '/www/path',
        startFrame: 0, // starting frame index of the animation
        endFrame: null // ending frame index of the animation
      }
    }
  }
})

grunt.registerTask('default', [
  'vid2pict:test'
]);

How to contribute

• File an issue in the repository, using the bug tracker, describing the contribution you'd like to make. This will help us to get you started on the right foot.
• Fork the project in your account and create a new branch: your-great-feature.
• Commit your changes in that branch.
• Open a pull request, and reference the initial issue in the pull request message.

License

See the LICENSE file.