FFMPEG Converted Video Not Working In HTML5

Question

Converted Avi to Mp4 using FFMPEG, Converted video not working in html 5 <video> Tag

I have a section in my web page where user can upload any types of videos of any format , currently only restricted to .mp4 and .avi. After successfull upload i have displayed the same video to the user. I have bind the path in HTML5 video so that the user can view the content he/she has uploded. Video with extension .mp4 no doubt are working properly as HTML5 support them. Tricky part is it don't support Avi files. Now here what the problem has arised. In order to display avi videos i have used FFMPEG to convert videos with extension .avi to .mp4. With lots of googling and reading forum, i have succesfully converted avi videos to mp4 . Here's what i have used :-

1. ffmpeg -i input.avi -acodec libfaac -b:a 128k -vcodec mpeg4 -b:v 1200k -flags +aic+mv4 output.mp4

2. ffmpeg -i input.avi -c:v libx264 -b:a 128k -vcodec mpeg4 -b:v 1200k -flags +aic+mv4 output.mp4

Above two are working perfectly, they have succesfully converted the video. But when i run them on browser in HTML5 and in new tab (Flash Player Plugin Installed), HTML5 doesn't play it and flash player return an error message "Video can't be played because the file is corrupt". But when i played them on KMplayer and in Window media player they are running perfectly.

I have been to various threads in stackoverflow related to convert avi to mp4 and here i found following in one of the forum. where one of user has accepted this a correct answer but it ain't worked out for me.

3. ffmpeg -y -i sample.avi -b:v 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 sample.mp4

Above argument returned me following error "File for preset 'slow' not found".

Following my futher searches i came across this thread ffmpeg convert mov file to mp4 for HTML5 video tag IE9. Here following argument worked perfectly and it able to convert video in such way that it is playble on browser.

4. ffmpeg -y -i input.avi -vcodec libx264 -vprofile high -preset slow -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=-1:480 -threads 0 -acodec libvo_aacenc -b:a 128k -pix_fmt yuv420p output.mp4.

Problem i faced here was video is converted to 420p reso which quality is noty upto mark. Smaller resolution videos are been enlarged and seems pixelated

Thus, i had to finally put up a question. I will be very obliged if someone can give a solution for above problem. I need to convert an avi video to mp4 supported by HTML5 video tag. It should able to play it on browser and during conversion of video it should maintain original audio and video quality plus resolution.

Thanks

My C# Code:

        public void Create(string input, string output, string parametri, string ThumbnailPhysicalPath, int ConvertType)
        {
            ffmpeg = new Process();

            if (ConvertType == Convert.ToInt32(ConversionType.Thumbnail))
                ffmpeg.StartInfo.Arguments = " -i \"" + input + "\" -vframes 1 \"" + output + "\"";
            else if (ConvertType == Convert.ToInt32(ConversionType.AviToMp4))
                ffmpeg.StartInfo.Arguments = " -i \"" + input + "\" -c:v libx264 -b:a 128k -vcodec mpeg4 -b:v 1200k -flags +aic+mv4 \"" + output + "\"";
                //ffmpeg.StartInfo.Arguments = " -i \"" + input + "\" -vcodec libx264 -vprofile high -preset slow -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=-1:480 -threads 0 -acodec libvo_aacenc -b:a 128k -pix_fmt yuv420p \"" + output + "\"";
            ffmpeg.StartInfo.FileName = ThumbnailPhysicalPath + @"ffmpeg.exe";
            ffmpeg.StartInfo.UseShellExecute = false;
            ffmpeg.StartInfo.RedirectStandardOutput = true;
            ffmpeg.StartInfo.RedirectStandardError = true;
            ffmpeg.StartInfo.CreateNoWindow = true;
            try
            {
                ffmpeg.Start();
                ffmpeg.WaitForExit();
                string error = ffmpeg.StandardError.ReadToEnd();
            }
            catch (Exception Ex)
            {
                Common.WriteLog("Exception occurred during conversion. Error Message :- " + Ex.Message + "\n Input Parameter :- " + input+ "\n Output Paramenter :- "+ output);
            }
            finally
            {
                ffmpeg.Close();
                if (ConvertType == Convert.ToInt32(ConversionType.AviToMp4))
                    UpdateConvertedVideoDetails(input,output);
            }
        }

Command Prompt FFMPEG Output :-

Sample 3 Result :-

D:\Client\WebSite\Converter_Tools>ffmpeg -y -i sample.avi -b:v 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 sample.mp4
ffmpeg version N-70239-g111d79a Copyright (c) 2000-2015 the FFmpeg developers
  built with gcc 4.9.2 (GCC)
  configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --enable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libblu
ray --enable-libbs2b --enable-libcaca --enable-libfreetype --enable-libgme --enable-libgsm --enable-libilbc --enable-libmodplug --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrw
b --enable-libopenjpeg --enable-libopus --enable-librtmp --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvo-aacenc --
enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxavs --enable-libxvid --enable-lzma --enable-decklink --enab
le-zlib
  libavutil      54. 19.100 / 54. 19.100
  libavcodec     56. 26.100 / 56. 26.100
  libavformat    56. 23.105 / 56. 23.105
  libavdevice    56.  4.100 / 56.  4.100
  libavfilter     5. 11.101 /  5. 11.101
  libswscale      3.  1.101 /  3.  1.101
  libswresample   1.  1.100 /  1.  1.100
  libpostproc    53.  3.100 / 53.  3.100
[avi @ 037c8480] non-interleaved AVI
Guessed Channel Layout for  Input Stream #0.1 : mono
Input #0, avi, from 'sample.avi':
  Duration: 00:00:34.00, start: 0.000000, bitrate: 1433 kb/s
    Stream #0:0: Video: cinepak (cvid / 0x64697663), rgb24, 320x240, 15 fps, 15 tbr, 15 tbn, 15 tbc
    Stream #0:1: Audio: pcm_u8 ([1][0][0][0] / 0x0001), 22050 Hz, 1 channels, u8, 176 kb/s
File for preset 'slow' not found

Sample 4 Result :-

D:\Client\WebSite\Converter_Tools>ffmpeg -y -i input.avi -vcodec libx264 -vprofile high -preset slow -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=-1:480 -threads 0 -acodec libvo_
aacenc -b:a 128k -pix_fmt yuv420p output.mp4
ffmpeg version N-70239-g111d79a Copyright (c) 2000-2015 the FFmpeg developers
  built with gcc 4.9.2 (GCC)
  configuration: --enable-gpl --enable-version3 --disable-w32threads --enable-avisynth --enable-bzlib --enable-fontconfig --enable-frei0r --enable-gnutls --enable-iconv --enable-libass --enable-libblu
ray --enable-libbs2b --enable-libcaca --enable-libfreetype --enable-libgme --enable-libgsm --enable-libilbc --enable-libmodplug --enable-libmp3lame --enable-libopencore-amrnb --enable-libopencore-amrw
b --enable-libopenjpeg --enable-libopus --enable-librtmp --enable-libschroedinger --enable-libsoxr --enable-libspeex --enable-libtheora --enable-libtwolame --enable-libvidstab --enable-libvo-aacenc --
enable-libvo-amrwbenc --enable-libvorbis --enable-libvpx --enable-libwavpack --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxavs --enable-libxvid --enable-lzma --enable-decklink --enab
le-zlib
  libavutil      54. 19.100 / 54. 19.100
  libavcodec     56. 26.100 / 56. 26.100
  libavformat    56. 23.105 / 56. 23.105
  libavdevice    56.  4.100 / 56.  4.100
  libavfilter     5. 11.101 /  5. 11.101
  libswscale      3.  1.101 /  3.  1.101
  libswresample   1.  1.100 /  1.  1.100
  libpostproc    53.  3.100 / 53.  3.100
Input #0, avi, from 'input.avi':
  Duration: 00:00:03.93, start: 0.000000, bitrate: 3255 kb/s
    Stream #0:0: Video: msrle ([1][0][0][0] / 0x0001), pal8, 300x250, 3301 kb/s, 15 fps, 15 tbr, 15 tbn, 15 tbc
[libx264 @ 002ec860] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2
[libx264 @ 002ec860] profile High, level 2.2
[libx264 @ 002ec860] 264 - core 144 r2525 40bb568 - H.264/MPEG-4 AVC codec - Copyleft 2003-2014 - http://www.videolan.org/x264.html - options: cabac=1 ref=5 deblock=1:0:0 analyse=0x3:0x113 me=umh subm
e=8 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=6 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 i
nterlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=2 b_bias=0 direct=3 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=15 scenecut=40 intra_refresh=0 rc_lookahead=50 rc
=cbr mbtree=1 bitrate=500 ratetol=1.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 vbv_maxrate=500 vbv_bufsize=1000 nal_hrd=none filler=0 ip_ratio=1.40 aq=1:1.00
Output #0, mp4, to 'output.mp4':
  Metadata:
    encoder         : Lavf56.23.105
    Stream #0:0: Video: h264 (libx264) ([33][0][0][0] / 0x0021), yuv420p, 576x480, q=-1--1, 500 kb/s, 15 fps, 15360 tbn, 15 tbc
    Metadata:
      encoder         : Lavc56.26.100 libx264
Stream mapping:
  Stream #0:0 -> #0:0 (msrle (native) -> h264 (libx264))
Press [q] to stop, [?] for help
frame=   59 fps= 30 q=-1.0 Lsize=     229kB time=00:00:03.80 bitrate= 493.5kbits/s
video:227kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.637976%
[libx264 @ 002ec860] frame I:3     Avg QP:26.53  size: 10657
[libx264 @ 002ec860] frame P:25    Avg QP:30.49  size:  5608
[libx264 @ 002ec860] frame B:31    Avg QP:32.26  size:  1935
[libx264 @ 002ec860] consecutive B-frames: 22.0% 16.9% 20.3% 40.7%
[libx264 @ 002ec860] mb I  I16..4: 16.7% 69.0% 14.4%
[libx264 @ 002ec860] mb P  I16..4: 11.1% 29.9%  3.8%  P16..4: 21.3%  6.8%  2.6%  0.0%  0.0%    skip:24.6%
[libx264 @ 002ec860] mb B  I16..4:  1.7%  3.0%  0.3%  B16..8: 29.7%  5.6%  0.8%  direct: 2.1%  skip:56.8%  L0:50.5% L1:45.6% BI: 3.9%
[libx264 @ 002ec860] 8x8 transform intra:66.5% inter:79.4%
[libx264 @ 002ec860] direct mvs  spatial:93.5% temporal:6.5%
[libx264 @ 002ec860] coded y,uvDC,uvAC intra: 40.3% 48.8% 25.7% inter: 12.4% 8.4% 1.4%
[libx264 @ 002ec860] i16 v,h,dc,p: 19% 59%  6% 17%
[libx264 @ 002ec860] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 10% 25% 16%  7%  8%  6% 11%  7% 10%
[libx264 @ 002ec860] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 20% 21%  9%  7%  9%  8% 10%  7% 10%
[libx264 @ 002ec860] i8c dc,h,v,p: 41% 33% 13% 13%
[libx264 @ 002ec860] Weighted P-Frames: Y:0.0% UV:0.0%
[libx264 @ 002ec860] ref P L0: 67.6%  8.1%  9.6%  5.4%  6.6%  2.8%
[libx264 @ 002ec860] ref B L0: 84.6% 10.5%  3.9%  1.0%
[libx264 @ 002ec860] ref B L1: 95.9%  4.1%
[libx264 @ 002ec860] kb/s:472.20

Answer 1

Problem 1: MPEG-4 Part 2 video is not supported by HTML5

Command #1 is using the encoder mpeg4. The resulting video format is not supported by HTML5. Use libx264 instead.

Command #2 is declaring both libx264 and mpeg4. This makes no sense because you can only choose one encoder per output video stream, and since mpeg4 is listed last this is likely the encoder that was used.

Problem 2: Use -preset instead of the outdated -vpre

I'm referring to your command #3 here.

When encoding with libx264 use -preset instead of the old -vpre option. -preset will access the internal x264 presets. -vpre is used to access text-file based custom presets.

Use -profile:v instead of -vpre when attempting to use a H.264 profile, such as -profile:v baseline.

Problem 3: Upscaling is bad

Smaller resolution videos are been enlarged and seems pixelated.

Why upscale? Upscaling will reduce quality. Imagine scaling an small size image to a large size. It will look crappy because the exiting information must be interpolated to the new size. It is impossible to magically enlarge an image and make it look like an "original" because the information is simply not there.

Problem #4: Internet Explorer

I don't know why IE did not play the output from command #4, but the suggestion of adding -movflags +faststart seemed to fix it as far as I can tell. Once encoding finishes this option will relocate some data to the beginning of the file so it can begin playback before it is completely downloaded. However, your input was only about 3 seconds long so it shouldn't have made much of a difference.

If you continue to have problems you can experiment with some of the profiles, such as baseline or main depending on what your target browsers or devices can decode.