FFMPEG Convert HTML 5 Video NOT Working

Question

I am using FFMPEG to convert a video to .mp4, ,ogg, .webm so that it may be viewed in all HTML5 capable browsers using the video tag. The problem is that I manage to convert the video to the 3 required formats but it does not display the video in the video tag, all I get is IE9: red cross, Firefox: Grey cross, could it be a problem with the conversion or is it something to do with the way I am adding them to the source of the video tag. Here is what I have done:

1. FFmpeg command line(s):

   ffmpeg -i test.mp4 test.mp4
   ffmpeg -i test.mp4 test.ogg
   ffmpeg -i test.mp4 test.webm
   

2. Here is the video tag:

   <video id="video"  height="340" width="470" onplaying="PlayVideoFromVid('PAUSE')"  onpause="PlayVideoFromVid('PLAY')" onended="ResetVideo()" preload="true" autobuffer="true" controls="true">
       <source src="test.ogg" type="video/ogg"></source>
       <source src="test.mp4" type="video/mp4"></source>
   </video>
   

3. Webconfig lines for the video support:

   <staticContent>
       <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
       <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
       <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
       <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
       <mimeMap fileExtension=".webm" mimeType="video/webm" />
   </staticContent>
   

It would be great if someone could send me the required parameters for ffmpeg to convert the video to the 3 required formats and an example of how they setting the source in the video tag to display them again. And any other advise would be great like how to set the quality up etc when doing the conversion.

Thanks in advance.

Answer 1

Sorted it out, thanks for all the help :) I found the following:

1. You need to download the latest ffmpeg + the presets:

ffmpeg.arrozcru.org/autobuilds/ffmpeg/mingw32/static/

2. You need to create a HOME environmetal variable:

(a) www.moosechips.com/2009/08/installing-ffmpeg-binary-in-windows/

(b) www.itechtalk.com/thread3595.html

3. Copy the presets under the environmental variable folder

4. You need to use the following commands to convert using ffmpeg:

For mp4 (H.264 / ACC):

ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"

For webm (VP8 / Vorbis):

ffmpeg -i "INPUTFILE"  -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 "OUTPUTFILE.webm"

For ogv (Theora / Vorbis):

ffmpeg -i "INPUTFILE" -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 "OUTPUTFILE.ogv"

Answer 2

I would try this code first. It is as simple as possible.

    <video controls="true">
        <source src="test.mp4" type="video/mp4"></source>
        <source src="test.webm" type="video/webm"></source>
        <source src="test.ogv" type="video/ogg"></source>
    </video>

Creating mp4 files, minimal number of arguments. Unfortunately, I haven't tested it much.

    ffmpeg -i input_file -vcodec libx264 -vpre medium output_file.mp4

To creating ogv files You should use ffmpeg2theora. There are too many problems with ffmpeg.