VLC: How to convert from mp4 to webm

Just to update this answer, I would not recommend using Miro Video Converter any more. It used to be my weapon of choice for creating HTML5 video for web, but the current version 3 of the program has issues with converting into ogg theora: the quality of the converted video is far too low and to create a higher quality version you have to use ffmpeg command line utility.

Easyhtml5video is really good as it automatically creates all video formats with flash fallback with embed code but you will have to pay $69 for it - the free version adds watermarks to the videos.

At the minute I'm using VLC player to do the video conversions. To convert mp4 files in VLC I do the following:

Conversion to .webm

1. Select Media > convert/save from the menu.
2. Click 'add' button and select the file you want to convert
3. Click 'Convert/Save' button
4. in the 'profile' dropdown select 'Video - VP80 + Vorbis (Webm)'
5. click on the button next to the drop down ("edit selected profile" - looks like a spanner+screwdriver icon)
6. Encapsulation tab should be set as Webm.
7. Click on 'video codec' tab. In the encoding parameters, the codec should be selected as 'VP8'.
8. In the Audio Codec tab, 'keep original audio track' should be unselected. The Codec should be set to 'Vorbis'
9. Click 'Save'
10. important: select the destination file location and name. Click on browser, go to the folder you want the converted filename to go in, and enter the new filename. If you dont do this, VLC will not create your converted file (well not in version 2.1.5 anyway)
11. Click 'Start' to start the conversion.

Conversion to .ogv:

1. Select Media > convert/save from the menu.
2. Click 'add' button and select the file you want to convert
3. Click 'Convert/Save' button
4. in the 'profile' dropdown select 'Video - Theora + Vorbis (OGG)'
5. click on the button next to the drop down ("edit selected profile")
6. Encapsulation tab should be set as Ogg/Ogm.
7. Click on 'video codec' tab. In the encoding parameters, the codec should be selected as 'theora' and the bit rate should be 1000kb/s if you have text in it. Lower bitrate might be fine for smaller videos.
8. In the Audio Codec tab, select 'keep original audio track'
9. Click 'Save'
10. select the destination file location and name.
11. Click 'Start' to start the conversion.

If you need to resize or crop your video, I would recommend you do this to the .mp4 file first using Handbrake. Trying to create resized versions of .ogg/ogv or webm files using VLC does not give you great results in my experience.

When putting the videos on a webpage, I use VideoJs - this allows you to create html5 video with flash fallback for older browsers very easily. Slightly more work than easyhtml5video, but its free to use.

I would change that code to read:

<video poster="/path/to/your/thumbnail/image.jpg" preload="meta" controls width="500"> 
    <!-- if Safari/Chrome-->  
    <source src="video/45.mp4" type="video/mp4" /> 
    <!-- if Firefox -->  
    <source src="video/45-theora.ogg" type="video/ogg" />
</video>

Reasons:

poster="/path/to/your/thumbnail/image.jpg"

because you want a "thumbnail" to display before the video has been played by the user

<source src="video/45.mp4" type="video/mp4" /> BEFORE <source src="video/45-theora.ogg" type="video/ogg" />

mp4 BEFORE open formats (like webm or therora) because there is a bug in some iOS versions that will not play the video at all if mp4 is listed after any other format in the html (so list it first).

preload="meta"

because some versions of iOS and even some versions of Safari and Chrome have a hard time loading the page if there are many videos on the same page all at once. preload=none or preload=meta helps solve these issues.

In regards to encoding, Miro Converter is better at encoding and much easier to use for converting formats that can be played by browsers (mp4, webm, theroa). VLC has a lot of options but can be overwheling and frustrating if you don't get it right. Miro is more of a drop and drag application and is recommended by diveintohtml5.

WebM is just a subset of Matroska (.mkv), so just use HandBrake to create a MKV file (choose MKV container, not MP4). IMHO is HandBrake the best tool for creating MP4 and MKV files on Mac (also exists for Windows and Linux, but I never used it there). With two pass encoding you can get optimal quality for the available storage space and/or bandwidth, and while being very powerful (you can configure so many settings), HandBrake is still a very easy tool (you don't need to configure most of the settings, already the defaults will give you very good results).

Just keep in mind that WebM is a MKV subset, so as a video codec use either VP8 or VP9 and as an audio codec use either Vorbis or Opus. Up to 2013 there was only VP8 and Vorbis for WebM, so this is the most compatible combination that is going to play on most devices, browsers and players. In 2013 the newer VP9 and Opus were added and now any combination of these is legit.

Once you got your MKV, convert it to WebM using ffmpeg. You can download ffmpg pre-built for MacOS X as a stand-alone binary (works with 10.9 or newer). All you need to do is running that command in Terminal:

./ffmpeg -i INPUTIFLE.mkv -c copy OUTPUTFILE.webm

and that's it. This will be very fast because -c copy means that ffmpeg is not converting anything here (the video is not transcoded again!), it is copying all audio and video data just as it is, only the container is rewritten, removing the MKV parts that are not supported in WebM (e.g. chapters are not supported). Just copying also means that this conversion has zero influence on quality as nothing is recompressed.

Using ffmpeg to convert between containers w/o recompression also works with many other formats. E.g. if you have a MKV that is in fact MPEG4 or H.264, you can convert that to a MP4 file the same way, no re-enconding. You can even extract just the audio layer of a video to plain audio file without losing any quality (e.g. extracting MP3 or AAC audio to an MP3 or MPA file). If the chosen destination container cannot hold the data of the source file (e.g. you cannot copy AAC audio into a MP3 file or VP9 video into a MP4 file, that just won't work), ffmpeg will let you know.