If you use the html5 video element, you probably want to also include webm & ogv videos to help make your video more accessible on browsers. (I won’t get into using the element, but it’s fairly simple.) What I do want to share is an easy way to take our source video (maybe .mp4 or .mov) and convert it to .webm and .ogv. This solution uses the freely available FFMPEG – it’s been around forever, and many of the pay software “utilities” you could buy just use it in the background. Let’s get to it.

I’m using Windows, but this should work on most platforms (linux & OS X) that FFMPEG is available for.

1. Get FFMPEG. Visit https://www.ffmpeg.org/download.html and grab a build. Windows will be a .zip.
2. Extract (unzip) the above build you downloaded to a folder. In my case, I unzipped to “C:\ffmpeg”. Inside that folder should look something like this:
   
3. To start your video conversion, the easiest way (without having to adjust your PATH settings) is to copy your video into the “bin” folder. In my example, I’ll copy “test.mp4” into “c:\ffmpeg\bin”
4. Begin a conversion by first opening a command prompt (cmd.exe if on Windows).
5. Now change to the bin directory, maybe using:

   cd \
   cd ffmpeg
   cd bin

6. You should now see “c:\ffmpeg\bin>” if your prompt (if that was your directory).
7. To convert to .webm enter the below and press enter (replace “test” w/ your video filename”:

   ffmpeg -i test.mp4 -c:v libvpx -crf 15 -b:v 1M -c:a libvorbis test.webm

8. To convert to .ogv enter the below and press enter (replace “test” w/ your video filename”:

   ffmpeg -i test.mp4 -codec:v libtheora -qscale:v 6 -codec:a libvorbis -qscale:a 6 test.ogv

9. Now you should have 2 new files in the “bin” folder!

There is a ton of options for ffmpeg – above are just my common settings.