• Stars
    star
    6,088
  • Rank 6,616 (Top 0.2 %)
  • Language
    JavaScript
  • License
    ISC License
  • Created almost 10 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

😻 Convert any video file to an optimized animated GIF.

NOTE FROM AUTHOR

I am no more using this project or providing any support to it, if you want to maintain it, ping me here: [email protected].

This project was created 4 years ago, there might be better ways to turn a video into a GIF now, use google!

/NOTE FROM AUTHOR

gifify

Convert any video file to an optimized animated GIF. Either in its full length or only a part of it.

Demo time

screencast

This screencast was recorded with lolilolicon/FFcast then converted to a GIF with:

gifify screencast.mkv -o screencast.gif --resize 800:-1

Features

  • command line interface
  • programmatic JavaScript (Node.JS) stream interface
  • unix friendly, supports stdin & stdout
  • optimized! uses pornel/giflossy to generate light GIFS
  • lots of options: movie speed, fps, colors, compression, resize, reverse, from & to, subtitles
  • no temp files used, everything happens in memory
  • fast! Extracting a 5-second GIF from the middle of a 2-hour movie takes less than 20 seconds

Requirements

Before using gifify, please install:

You can also use the gifify Docker image which comes with everything installed.

Installation

npm install -g gifify

Command line usage

> gifify -h

  Usage: gifify [options] [file]

  Options:

    -h, --help              output usage information
    -V, --version           output the version number
    --colors <n>            Number of colors, up to 255, defaults to 80
    --compress <n>          Compression (quality) level, from 0 (no compression) to 100, defaults to 40
    --from <position>       Start position, hh:mm:ss or seconds, defaults to 0
    --fps <n>               Frames Per Second, defaults to 10
    -o, --output <file>     Output file, defaults to stdout
    --resize <W:H>          Resize output, use -1 when specifying only width or height. `350:100`, `400:-1`, `-1:200`
    --reverse               Reverses movie
    --speed <n>             Movie speed, defaults to 1
    --subtitles <filepath>  Subtitle filepath to burn to the GIF
    --text <string>         Add some text at the bottom of the movie
    --to <position>         End position, hh:mm:ss or seconds, defaults to end of movie
    --no-loop               Will show every frame once without looping

Programmatic usage

See the example.

var fs = require('fs');
var gifify = require('gifify');
var path = require('path');

var input = path.join(__dirname, 'movie.mp4');
var output = path.join(__dirname, 'movie.gif');

var gif = fs.createWriteStream(output);

var options = {
  resize: '200:-1',
  from: 30,
  to: 35
};

gifify(input, options).pipe(gif);

You can also pass a readable stream to gifify(stream, opts).

Readable stream input performance

Gifify supports streams both on command line (cat movie.mp4 | gifify -o out.gif) and in the programmatic API (gifify(readableStream, opts).pipe(writableStream)).

While it's super useful in some cases, if you have the file on disk already, you better do gifify movie.mp4 -o out.gif or gifify(filePath, opts).pipe(writableStream).

Why? Because piping 3.4GB when you want to cut from 40:20 to 40:22 still takes a loooooot of time and does not give you any performance benefit.

FFmpeg has to read from 0GB -> $START_BYTE_40:20 and discards it. But everything flows in your memory.

When using direct file input from command line, we pass the -i filename option to FFmpeg and then it's super fast!

Be careful when |piping.

Adding some text

You can burn some simple text into your GIF:

gifify back.mp4 -o back.gif --from 01:48:23.200 --to 01:48:25.300 --text "What?..What?What?"

Result:

back

Subtitles

You can burn subtitles into your GIF, it's that easy:

gifify 22.mkv -o movie.gif --subtitles 22.ass --from 1995 --to 2002 --resize 600:-1

You must create new subtitles files, the timecodes for the complete film will not work for a five seconds GIF.

Create subtitles using aegisub and augment the font size for a great effect!

Here's the 22.ass from the previous command, created with aegisub:

[Script Info]
; Script generated by Aegisub 3.2.1
; http://www.aegisub.org/
Title: Default Aegisub file
ScriptType: v4.00+
WrapStyle: 0
ScaledBorderAndShadow: yes
YCbCr Matrix: None

[Aegisub Project Garbage]

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,Arial,20,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,2,2,2,10,10,10,1

[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:02.50,0:00:03.97,Default,,0,0,0,,{\fnLiberation Sans\fs40}Okay, okay.
Dialogue: 0,0:00:05.00,0:00:06.90,Default,,0,0,0,,{\fnLiberation Sans\fs40}Okay. Okay.

Result extracting a GIF from 22 Jump Street:

22

GIF Performance

On modern hardware GIF is the slowest and most expensive video codec. Can we please allow it to be obsoleted?

https://pornel.net/efficient-gifs#sec44

YOLO!

Giflossy

Giflossy is a fork of gifsicle, gifsicle author is currently working on integrating the lossy part in gifsicle.

So in little time we will be able to directly use gifsicle and gifiscle packages.

Thanks

jclem/gifify was a great source of inspiration.

More Repositories

1

iron-session

🛠 Secure, stateless, and cookie-based session library for JavaScript
TypeScript
3,619
star
2

lazyload

🚅 Lazyload images, iframes, widgets with a standalone JavaScript lazyloader
JavaScript
942
star
3

tzdb

🕰 Simplified, grouped and always up to date list of time zones, with major cities
JavaScript
629
star
4

in-viewport

Get a callback when any element becomes visible in a viewport (body or custom viewport)
JavaScript
280
star
5

sourcekarma

Discover how people react to you on GitHub 👍
JavaScript
101
star
6

javascript-library-template

JavaScript library template to focus on ⌨️ coding, 🙌 collaborating and 🚀 shipping
JavaScript
80
star
7

npm-pkgr

Cache `npm install` results by hashing dependencies
JavaScript
73
star
8

nextjs-vercel-aws-cdk-example

Example Next.js project deployed on Vercel with AWS services for database, cron jobs and asynchronous jobs
JavaScript
70
star
9

docker-selenium-firefox-chrome-beta

A Dockerfile starting a selenium standalone server with Chrome and Firefox beta
Shell
67
star
10

iron-store

🧿 in-memory, signed and encrypted JavaScript store
JavaScript
65
star
11

aws-lambda-nodejs-webpack

λ CDK Construct to build Node.js AWS lambdas using webpack
TypeScript
31
star
12

analytics.js-loader

Asynchronously load segment.com analytics.js with an npm module
JavaScript
29
star
13

concat-files

[DEPRECATED] Concatenate files asynchronously with node.js
JavaScript
26
star
14

zorgs

🦑 Command line tool displaying GitHub organizations stats
JavaScript
18
star
15

ansible-archee

dotfiles on steroids
Python
17
star
16

localenvify

localenv and envify combined as a browserify transform
JavaScript
14
star
17

chainit

Turn an asynchronous JavaScript api into an asynchronous chainable JavaScript api
JavaScript
12
star
18

selenium-runner

Run a [url/JSTest, ..] combo in selenium grid, in parallel
JavaScript
10
star
19

mocha-browse

Launch headless browsers on any mocha tests webpage, get results in console
JavaScript
9
star
20

node-whereis

Simply get the first path to a bin on any system
JavaScript
7
star
21

typescript-library-template

TypeScript library template to focus on ⌨️ coding, 🙌 collaborating and 🚀 shipping
TypeScript
7
star
22

project-name

description
JavaScript
5
star
23

tokenify

🎰 Interactive command line tool to easily get refresh tokens for Spotify API
JavaScript
5
star
24

coronamaison

🎨 All the drawings from the #coronamaison hashtag on Twitter
JavaScript
5
star
25

almanak

WIP Google Calendar like component for React
TypeScript
5
star
26

azure-sb-queue-watcher

Job worker around Azure Service Bus Queues
JavaScript
4
star
27

forkie

Forkie is a graceful process manager for Node.js: start/stop/working?
JavaScript
4
star
28

knex-typescript-migrations-esm

TypeScript
3
star
29

offline-docs

Always get some documentation on the modules you use, even offline
CSS
3
star
30

b64-bench

JavaScript
2
star
31

kcnb1-france.org

Repository for Association KCNB1 France website
PHP
2
star
32

www.berlisco.com

CTRL+W
JavaScript
2
star
33

cron-example

CSS
2
star
34

aws-lambda-nodejs-performance

Example of performance issue of aws-lambda-nodejs
JavaScript
2
star
35

vercel-test-workspaces

JavaScript
1
star
36

test-post-body

JavaScript
1
star
37

test-favicon

Vue
1
star
38

example-empty-project

1
star
39

vvo

1
star
40

npm-test-pre-push

Install a git pre-push hook launching `npm test`
JavaScript
1
star
41

test-babel-node-configuration-file

JavaScript
1
star
42

go-ghoauth

Two steps process for github access_token creation
Go
1
star
43

test-next-broken-packagelock

JavaScript
1
star
44

deploy-summary-test

CSS
1
star
45

emoshort

Emoji to short name converter
JavaScript
1
star
46

nextjs-jobs

JavaScript
1
star
47

express-minimal-app

basic express app, production ready
JavaScript
1
star
48

knex-pool-require-cache-issue

Demo of knex pool issue when combined with delete require.cache
JavaScript
1
star
49

swc-maximum-call-stack-error

TypeScript
1
star
50

test-nextjs-routes-bug-locales

JavaScript
1
star