Page 1 of 1

Using FFMPEG to encode MP4 .H264 for use in HTML5 Video Tag

Posted: Tue Jan 24, 2012 5:13 pm
by footnick
I’ve been trying unsuccessfully to use static FFMPEG builds to encode an MP4 video from a set of JPG images so that the video runs in a browser using the HTML5 Video tag.

I’ve included below my FFMPEG input parameters and build details (based on forum advice from others who had apparently been successful). Plus a comparison with a correctly encoded MP4 with some analysis using MediaInfo.

I’ve had no problems with WEBM and OGG but my attempts at MP4 have failed on both IE9 and Chrome on a PC.

For comparison I used gizmo.mp4 from here http://www.808.dk/?code-html-5-video which works fine on my test page with both Chrome and IE9.

I’ve used recent FFMPEG builds from FFMPEG.org and Zeranoe.

There are clearly differences between the two videos but can anyone tell me which are significant and how to configure FFMEG correctly for HTML5. I would rather use a standard FFMPEG build if possible.

Thanks

Nick


FFMPEG Build

ffmpeg -r 10 -i "images\img-%04d.jpg" -r 10 -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 model.mp4

FFmpeg version SVN-r26400, Copyright (c) 2000-2011 the FFmpeg developers
built on Jan 18 2011 04:07:05 with gcc 4.4.2
configuration: --enable-gpl --enable-version3 --enable-libgsm --enable-libvorb
is --enable-libtheora --enable-libspeex --enable-libmp3lame --enable-libopenjpeg
--enable-libschroedinger --enable-libopencore_amrwb --enable-libopencore_amrnb
--enable-libvpx --disable-decoder=libvpx --arch=x86 --enable-runtime-cpudetect -
-enable-libxvid --enable-libx264 --enable-librtmp --extra-libs='-lrtmp -lpolarss
l -lws2_32 -lwinmm' --target-os=mingw32 --enable-avisynth --enable-w32threads --
cross-prefix=i686-mingw32- --cc='ccache i686-mingw32-gcc' --enable-memalign-hack

libavutil 50.36. 0 / 50.36. 0
libavcore 0.16. 1 / 0.16. 1
libavcodec 52.108. 0 / 52.108. 0
libavformat 52.93. 0 / 52.93. 0
libavdevice 52. 2. 3 / 52. 2. 3
libavfilter 1.74. 0 / 1.74. 0
libswscale 0.12. 0 / 0.12.


ZERANOE Build

ffmpeg -r 10 -i "images\img-%04d.jpg" -r 10 -vcodec libx264 model.mp4
ffmpeg version N-37063-g14d94a1 Copyright (c) 2000-2012 the FFmpeg developers built on Jan 23 2012 17:40:00 with gcc 4.6.2
configuration: --disable-static --enable-shared --enable-gpl --enable-version3
--disable-w32threads --enable-runtime-cpudetect --enable-avisynth --enable-bzli
b --enable-frei0r --enable-libopencore-amrnb --enable-libopencore-amrwb --enable
-libfreetype --enable-libgsm --enable-libmp3lame --enable-libopenjpeg --enable-l
ibrtmp --enable-libschroedinger --enable-libspeex --enable-libtheora --enable-li
bvo-aacenc --enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-l
ibx264 --enable-libxavs --enable-libxvid --enable-zlib
libavutil 51. 34.101 / 51. 34.101
libavcodec 53. 57.105 / 53. 57.105
libavformat 53. 30.100 / 53. 30.100
libavdevice 53. 4.100 / 53. 4.100
libavfilter 2. 59.101 / 2. 59.101
libswscale 2. 1.100 / 2. 1.100
libswresample 0. 6.100 / 0. 6.100
libpostproc 52. 0.100 / 52. 0.100



MEDIAINFO output

I looked at all the videos in MediaInfo and noted the following differences

MY VIDEO(FFMpeg build)

Format profile : Base Media
Codec ID : isom
Writing application : Lavf52.93.0
Format profile : [email protected]
Format settings, ReFrames : 5 frames
Writing library : x264 core 112 r1834 a51816a

Encoding settings : cabac=0 / ref=5 / deblock=1:0:0 / analyse=0x1:0x111 / me=umh / subme=8 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / constrained_intra=0 / bframes=0 / weightp=0 / keyint=30 / keyint_min=16 / scenecut=40 / intra_refresh=0 / rc_lookahead=30 / rc=abr / mbtree=1 / bitrate=1500 / ratetol=1.0 / qcomp=0.60 / qpmin=10 / qpmax=51 / qpstep=4 / ip_ratio=1.41 / aq=1:1.00

MY VIDEO (Zeranoe build)

Format profile : Base Media
Codec ID : isom
Writing application : Lavf53.30.100
Format profile : [email protected]
Format settings, ReFrames : 4 frames
Writing library : x264 core 120 r2120 0c7dab9

Encoding settings : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=3 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=10 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00


GIZMO (works fine in my tests)

Format profile : Base Media / Version 2
Codec ID : mp42
Writing application : HandBrake 0.9.4 2009112300
Format profile : [email protected]
Format settings, ReFrames : 2 frames
Bit rate mode : Variable
Writing library : x264 core 79
Color primaries : BT.709-5, BT.1361, IEC 61966-2-4, SMPTE RP177
Transfer characteristics : BT.709-5, BT.1361
Matrix coefficients : BT.709-5, BT.1361, IEC 61966-2-4 709, SMPTE RP177

Encoding settings : cabac=0 / ref=2 / deblock=1:0:0 / analyse=0x1:0x111 / me=umh / subme=6 / psy=1 / psy_rd=1.0:0.0 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=0 / cqm=0 / deadzone=21,11 / chroma_qp_offset=-2 / threads=6 / nr=0 / decimate=1 / mbaff=0 / constrained_intra=0 / bframes=0 / wpredp=0 / keyint=300 / keyint_min=30 / scenecut=40 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=20.0 / qcomp=0.60 / qpmin=10 / qpmax=51 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00

Re: Using FFMPEG to encode MP4 .H264 for use in HTML5 Video

Posted: Wed Jan 25, 2012 6:02 pm
by footnick
Hopefully solved the problem. It seems it was the resolution that was the problem.

We are simulating alpha transparency by adding an opacity mask in the bottom half of the video so the height is twice the actual display size.

With a bit of trial and error we found that the height limit was 1088, but its not clear whether exceeding this limit was causing issues in the video or whether the video players had limits.

Anything larger than 1088 high fails in IE9 and Microsoft Zune, but was OK in QuickTime. Webm in Chrome coped with any size.

I expect 1088 will be a good limit anyway for performance reasons but in case we need larger resolution can anyone tell us whether the limit is in the H264 codec and if so is there any way to produce larger files if we need them.

Thanks

Nick