Question

How can I convert a video from mp4 to webm using VLC, if possible? What codec should I choose? Do I need to reencode the sound?

I’m trying to put an HTML5 video on a website with Flash as fallback. As I understand it, webm is the only format that Firefox allows (unless you are on Windows 7 64-bit?). Theora seems to work but from what I understand it’s a bit old, also it takes a while before it renders the picture correctly and provides no thumbnail 🙁

<video controls width="500">
    <!-- if Firefox -->  
    <source src="video/45-theora.ogg" type="video/ogg" />
     <!-- if Safari/Chrome-->
    <source src="video/45.mp4" type="video/mp4" />
</video>

Oh and I’m on Mac OS Lion but I have access to Windows 7, Vista and XP if it makes it easier for someone.

Thanks for any help!

Answer 1

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.