Convert Video to Grayscale
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!
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![Upload Photos to Flickr with PHP]()
I have a bit of an obsession with uploading photos to different services thanks to Instagram. Instagram's iPhone app allows me to take photos and quickly filter them; once photo tinkering is complete, I can upload the photo to Instagram, Twitter, Facebook, and...
![MooTools Fun with Fx.Shake]()
Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...
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.
I noticed the file size difference as well.
David, could you confirm that just adding
-vf hue=s=0reduced the file size by 129KB, there were no other transformations?Thanks
In my case, the file size dropped to 1/3 of original file.
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?