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

Answer 1

I tried a lot of video files, encoding options, server configurations, FFMPEG versions, other video encoders etc. before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpeg places it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.

There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.

make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4

Answer 2

I think because I'm still a newbie, I'm not allowed to leave comments? So leaving this as an answer, though I think it's more along the lines of a guess.

Started playing with HTML5 video a week or so ago. I ran into lots of issues that ultimately turned out to be due to the converted movie files I was working with. Here's the code I used for my examples:

<video id="movie" width="600" height="338" poster="http://yourDomain.com/yourDirectory/posterFrame.jpg" controls="true" autoplay="true">
    <source src="http://yourDomain.com/yourDirectory/yourMovie.mp4" type='video/mp4' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.webm" type='video/webm' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.ogg" type='video/ogg; codecs="theora, vorbis"' />
    <object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf"><param name="movie" value="http://yourDomain.com/flowplayer/flowplayer-3.2.7.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"clip": {"url": "http://yourDomain.com/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' /></object>
</video>

I modeled my code after Mark Pilgrim's Dive into HTML (Video) write-up.

A few things I can think of to try:

1) Remove the additional attributes from your tag. I'm less familiar with what you're implementing (onplaying, onpause), but maybe try using just the basics first: width, height and controls. See if this helps.

2) In my tests, I converted my .ogg and .webm versions using Miro. For whatever reason, the movies would seemingly play file locally... but when I viewed them more than once in my browsers, I'd get blank screens. I ended up using Firefogg to ultimately convert my .ogg and .webm versions. It was odd behavior.

Not sure if FFmpeg is a dealbreaker, and something you need to use as part of your workflow. But if you're just looking to get your code and example movies functional and running, Firefogg did the trick for me.

I ultimately realized what the cause was when I swapped out working versions of other movies, instead of my converted ones. I'd recommend you try plugging in the .mp4, .webm and .ogg versions of Big Buck Bunny... and see if you can even get them to display. At least that way, you could isolate whether it's a syntax or conversion issue.

3) Finally, I'd recommend testing out one video file and one browser at a time. This is probably a given, but still worth throwing out there.

Sidenote: once you're good to go with each file type, make sure to list the .mp4 version first. This is from Pilgrim's HTML5 video writeup:

iPads running iOS 3.x had a bug that prevented them from noticing anything but the first video source listed. iOS 4 (a free upgrade for all iPads) fixes this bug. If you want to deliver video to iPad owners who haven’t yet upgraded to iOS 4, you will need to list your MP4 file first, followed by the free video formats.

Answer 3

Having tried most of the suggestions above, here's what actually worked for me to convert wmv files to small mp4, webm, ogg on a Windows7-64 machine:

64bit\ffmpeg -i test.wmv test.mpg

old\ffmpeg -i test.mpg -vcodec h264 -s 320x240 test.mp4

32bit\ffmpeg -i test.mpg -vcodec libvpx -acodec libvorbis -f webm -s 320x240 test.webm

32bit\ffmpeg -i test.mpg -vcodec libtheora -acodec libvorbis -s 320x240 test.ogg

old\ffmpeg is version SVN-r5570

64bit\ffmpeg is version N-38292-ga4c22e3 built 2/27/12 14:55:47

32bit\ffmpeg is version N-39267-g4082198 built 3/25/12 20:25:08

(Only the 64 bit version would read the wmv, so I used it to convert to mpg as a common format. Only the old ffmpeg would create an mp4.)

Answer 4

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 5

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.

Answer 6

I had the same problem with IE9 showing a red cross when trying to show the .mp4 video. Keeping it simple using ffmpeg (as Michas suggested) solved the issue for me.

<video id="movie" width="600" height="360" controls preload="auto">
   <source src="http://yourDomain.com/faceplant.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> 
   <source src="http://yourDomain.com/faceplant.webm" type='video/webm; codecs="vp8.0,vorbis"'></source>
   <source src="http://yourDomain.com/faceplant.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>

The ffmpeg parameters: (I used .ogv from ffmpeg2theora as my inputfile):

ffmpeg -i input_file.ogv -vcodec libx264 -vpre hq output_file.mp4

My ffmpeg version:

ffmpeg 0.8.3
libavutil    51.  9. 1 / 51.  9. 1
libavcodec   53.  7. 0 / 53.  7. 0
libavformat  53.  4. 0 / 53.  4. 0
libavdevice  53.  1. 1 / 53.  1. 1
libavfilter   2. 23. 0 /  2. 23. 0
libswscale    2.  0. 0 /  2.  0. 0
libpostproc  51.  2. 0 / 51.  2. 0