Convert Video to Grayscale

By  on  

I'm a JavaScript fanatic but I've always been fascinated with media manipulation. Maybe it's because I've secretly always wanted to be a designer, but I'm fine with being able to manipulate art with software instead of create the art myself. One type of art I've always enjoyed was black and white (/grayscale) video.

To convert a video to black and white, you can utilize ffmpeg with a few simple arguments:

ffmpeg -i input.mp4 -vf hue=s=0 output.mp4

The preceding command turns this color video:

... to the following grayscale video:

If you were to search ffmpeg on this blog, you'd find dozens of tutorials about how amazing the tool is. Play around with ffmpeg and let me know what awesomeness you come up with!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Ana Tudor’s Favorite CodePen Demos

    Cocoon I love canvas, I love interactive demos and I don't think I have ever been more impressed by somebody's work than when I discovered what Tiffany Rayside has created on CodePen. So I had to start off with one of her interactive canvas pens, even though...

  • By
    Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

Discussion

  1. Nice, ffmpeg seems to be quite handy!

    Btw the same effect may be achieved on the client using CSS grayscale-filter, which is nowadays supported by any major browser (but IE). E.g. https://codepen.io/MattDiMu/pen/pBqQqR

    Doing this on the client-side, however, will probably result in much larger file sizes than necessary, as grayscale videos offer much better compression. In your example the difference is 399kB vs 270kB.

  2. Tom Gallagher

    I noticed the file size difference as well.

    David, could you confirm that just adding -vf hue=s=0 reduced the file size by 129KB, there were no other transformations?

    Thanks

    • Denis

      In my case, the file size dropped to 1/3 of original file.

  3. Hey David! Since there is difference between BLACK AND WHITE filter and GRAYSCALE filter.

    A truly black and white image would simply consist of two colors—black and white. Grayscale images are created from black, white, and the entire scale of shades of gray.

    Is method you mentioned rather grayscale? Or rather black and white filter?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!