Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    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...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • By
    WordPress-Style Comment Controls Using MooTools or jQuery

    WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery. The XHTML Notice that we place the links into...

  • By
    MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...

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.

    • David Walsh

      Supposedly mozjpeg is better than webp too!

  2. Bhumi

    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!