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
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Create a Quick MooTools Slideshow with Preloading Images

    I've been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you: The following code snippet will show you how to create a simple slideshow with MooTools; the script will also...

  • By
    CSS Sprites

    The idea of CSS sprites is pretty genius. For those of you who don't know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: Fewer images for the browser to download, which means...

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!