Convert Videos (MP4, MPEG, or MOV) to WEBM

By  on  

In an effort to make the web and media more efficient, developers and corporations everywhere are investing effort in creating better file formats and delivery streams.  One of the more impressive video formats I've seen is the WEBM file format.  WEBM files are quite small but the quality is still impressive.  If you're ready to support and serve WEBM, here's how you can convert your traditional file format videos to WEBM!

You're going to use ffmpeg, as you could probably guess.  Thanks to a tip from the Theme Foundry, here's the shell command magic that will convert your video to WEBM:

ffmpeg -i trailer.mov -c:v libvpx -crf 10 -b:v 1M -c:a libvorbis trailer.webm

A comparison of quality is the same but the comparison in file size is fractional.

Supporting WEBM on Apache Servers

You may need to add support to your Apache server for WEBM since it's a newer format. Here's how I added WEBM support via .htaccess:

AddType video/webm webm

WEBM will be a great format moving forward and I look forward to seeing our legacy formats leave while new formats take over.  It's a true sign that the future is mobile!

Recent Features

  • By
    How to Create a RetroPie on Raspberry Pi – Graphical Guide

    Today we get to play amazing games on our super powered game consoles, PCs, VR headsets, and even mobile devices.  While I enjoy playing new games these days, I do long for the retro gaming systems I had when I was a kid: the original Nintendo...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately...

  • By
    Style Textarea Resizers

    Modern browsers are nice in that they allow you to style some odd properties.  Heck, one of the most popular posts on this blog is HTML5 Placeholder Styling with CSS, a tiny but useful task.  Did you know you can also restyle the textarea resizer in WebKit...

Discussion

  1. MaxArt

    WebM is indeed an impressive format that only needs some wider support, starting from Microsoft – but it won’t happen any time soon, I guess. Same story for WebP, that could replace png, jpeg and even animated gifs.

    • Supposedly mozjpeg is better than webp too!

  2. Hi,

    Is there anyway to create webm video from pptx?

  3. Bushwazi

    First time commenter, long time reader…

    I used FireFogg to generate webm videos as well: http://firefogg.org/

  4. Tonya Rose

    Awesome! I just learned how to edit webm files from this: http://www.videostudiopro.com/en/pages/webm-file/ and I wanted to convert some mp4 files to webm and practice a bit. I tried your way and it works great! Thanks for the tip!

  5. Shifflett Kristen

    Thank you for these instructions, really helpful!! I used to convert MP4 video to Webm video with Acethinker video converter, It is a cloud based software to convert videos without install any software in your device. Share it here as an alternative method.

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