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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    New MooTools Plugin: ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

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!