ffmpeg convert mov file to mp4 for HTML5 video tag IE9
Asked Answered
L

6

49

I looked everywhere here and on google - there is no valid command that works for IE9. some how IE9 is missing something. All that I tried worked everywhere else: chrome,safari,mobile device etc... I want one command that will convert it and I can use it in every device suppose to support mp4 in HTML5 video tag.

I use this commands:

ffmpeg -i movie.mov -vcodec copy -acodec copy out.mp4
ffmpeg -i movie.mov -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 outa.mp4
ffmpeg -i movie.mov -b:V 1500k -vcodec libx264 -preset fast -g 30 adel.mp4
ffmpeg -i movie.mov -acodec aac -strict experimental -ac 2 -ab 160k -vcodec libx264 -preset slow -f mp4 -crf 22 lamlam.mp4
ffmpeg -i movie.mov -acodec aac -strict experimental -ac 2 -ab 160k -vcodec libx264 -preset slow -profile:v baseline -level 30 -maxrate 10000000 -bufsize 10000000 -f mp4 -threads 0 adiel.mp4

etc.. again all this commands produce a valid mp4 file which works on chrome,safari etc... and works even when I launch them in windows itself using window media player. When I put this file in the video tag (I am using http://videojs.com/) in IE9 it isn't working !

<div class="vidoco-content" style="margin-top: 20px;">
<video id="divVid" class="video-js vjs-default-skin vidoco-center" controls preload="none" width="600" height="400" poster="<?php echo(DOMAIN); ?>static/test.jpg">
    <source src="<?php echo(DOMAIN); ?>static/out.mp4" type="video/mp4" />
</video>

If I use the software miro video converter to convert the same mov file to mp4 - it converted fine and I can play it in IE9! miro converter is also using embedd ffmpeg inside it so I am sure it's only a metter of the right ffmpeg command and parameters. In my apache htaccess I set the correct mime types for my files and I see it indeed correct when looking in IE developer tools:

AddType audio/aac .aac
AddType audio/mp4 .mp4 .m4a
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg
AddType audio/ogg .oga .ogg
AddType audio/wav .wav
AddType audio/webm .webm

AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

I am struggling with this for a long time so any help would be much appreciated.

Thanks!

Lynx answered 20/3, 2013 at 13:21 Comment(9)
ie9 should handle h264/aac or webm... diveintohtml5.info/video.htmlAnthocyanin
see the note about 'vp8' & ie9Anthocyanin
Do you know if it can work with an ffmpeg command ?Lynx
read the link , near bottom it covers ffmpeg.Anthocyanin
I did. there isn't ffmpeg for IE9 H.264 - only for "HandBrake". Do you know the commands for ffmpeg ?Lynx
try google..... sample mp4 output using 2pass ffmpeg .. snipplr.com/view/56022/…Anthocyanin
My suggestion would be to get a working mp4 file of the web & try it with your setup if it works then your problem is the encoding part.Carincarina
I know it is - mp4 from the web (video.js site) is working - also if I convert it via MIRO software it also working - I know the problem is encoding - I don't know how to achieve this with ffmpeg commandLynx
Also, please note in any future work that IE (especially 10+) is a HORRIBLY broken browser. It has many bugs and in fact most things there do not work correctly. Microsoft really has to work harder. It is so sad because I used to like IE a lot. Now they have lots of bugs. If I could, I would just write on my site that IE 11 is NOT SUPPORTED here.Torn
C
93

For ffmpeg:

ffmpeg -i {input}.mov -vcodec h264 -acodec aac -strict -2 {output}.mp4

You may also add the -q:v/-q:a parameter to specify the quality of the video. You may also use HandBrake which is a simpler encoder than ffmpeg.

For HandBrake:

handbrakecli -i {input}.mov -e x264 -E facc -o {output}.mp4

 

EDIT: I found the solution! Here is a ZIP with a working demo that I tested on IE 9 and Firefox!

http://www.mediafire.com/download/kyavlpudybg0bc1/HTML5_video.zip

Also, the above demo has a flash fallback, so it should work on IE8 and less.

Same ffmpeg command used.
EDIT: I had to re-upload the video, since my hosting service is down for now. Now it is hosted on mediafire. I found they are the best file sharing service. Minimum ads, no registration, no 30 sec wait.

 

Also, check out this discussion on the videojs website: http://help.videojs.com/discussions/problems/1020-ffmpeg-command-produce-your-demonstration-video.

VERY IMPORTANT! Make sure to click the 'Allow Active Content' button to allow the video when running locally!

Video of the problem I have and my solution: See my demo mentioned above.

HTML code used while testing:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

I analyzed a working test video that w3schools provides (it works on IE), and I found out that they used HandBrake to encode the video.

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'movie.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: mp42isomavc1
    creation_time   : 2010-05-11 10:32:06
    encoder         : HandBrake 0.9.4 2009112300
  Duration: 00:00:12.61, start: 0.000000, bitrate: 202 kb/s
    Chapter #0.0: start 0.000000, end 12.612000
    Metadata:
      title           :
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 320x240, 80 kb/s, 29.65 fps, 29.97 tbr, 90k tbn, 59.31 tbc
    Metadata:
      creation_time   : 2010-05-11 10:32:06
    Stream #0:1(und): Audio: aac (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 115 kb/s
    Metadata:
      creation_time   : 2010-05-11 10:32:06
    Stream #0:2(und): Subtitle: mov_text (text / 0x74786574)
    Metadata:
      creation_time   : 2010-05-11 10:32:06`
Christiachristian answered 20/3, 2013 at 13:21 Comment(18)
again - vpre is deprecated in the new build of ffmpeg - what is the equal command to it in the new one ?Lynx
@Adidi: I changed the script and added one new method.Torn
No - I need only mp4 - I tried your first command - sais libfaac unknown. Tried your edit command -again it's with -vpre - its throw error (use preset)Lynx
Did you check out HandBrake?Torn
Plus, I added some new methods. This time, since I installed ffmpeg, I tested them.Torn
This command ffmpeg -i $1 -b 1500k -vcodec libx264 -g 30 -s 640x360 $1.mp4 works well in the new ffmpeg - but again - the file being generated just fine - but IE9 does not play it! did you test it on IE9 HTML5 video tag ?Lynx
I found the exact code Miro uses! If it works, please consider marking my answer correct. :)Torn
EDIT: I found the the audio codec Miro uses is experimental and it bugged up my test VID. I used 'libvo_aacenc' instead and everything went fine.Torn
Tried it: ffmpeg -i movie.mov -acodec libvo_aacenc -ab 96k -vcodec libx264 -preset slow -f mp4 -crf 22 out.mp4 - again - it is producing a valid file - but IE9 does not play it ! - do you test on IE ?Lynx
No Man - sorry - this command does not work in IE9 when using video js - on other device it is work fine. I didn't try handbreak but any case it isn't my questionLynx
AHA! you are using video.js NOT the <video> tag! See the HTML I used when testing it!Torn
I really don't know what you are talking about - please - next time, If you don't test it yourself on IE - please don't post here another answer - it is absolutely not working in IE9 ! even with the video tag alone. stop posting answers if you don't bother to see if it's actually works - you are just making me to be hassled over and over again - it's ridiculous !Lynx
I tested this in IE 9 AND Firefox 22.0a1!Torn
HMMM... I have something weird going on. If I run the HTML on my local computer it works on IE9 AND Firefox, but if I upload it to my hosting service, it only works on Firefox. I will take a closer look at it.Torn
I uploaded a video. Please check it out.Torn
Can you help me with converting webp images to MP4 video using ffmpeg?Bustos
@Sunny: use the same command but just specify your webm file instead of {INPUT}.movTorn
this command helped me make .mp4 from .mov big file quickly/not-hang-forever > ffmpeg -i {input}.mov -vcodec h264 -acodec aac -strict -2 {output}.mp4Blockhead
J
11

A Primary journey to ffmpeg


Download latest ffmpeg and its presets http://www.ffmpeg.org/download.html

Follow the instructions to install Ffmpeg Binary In Windows


Instructions:

  1. Get the latest build from the arrozcru autobuilds page
  2. Unzip the folder into C:/Program Files/ffmpeg
  3. Add C:/Program Files/ffmpeg/bin to your system’s PATH environment variable

Optional libx264 preset setup:

If you use libx264 presets (by using the -vpre flag) you need to do the following setup.

  1. Create a HOME environment variable for your user pointing to your home directory. (e.g. for Vista/7/8 C:/Users/moose or for XP C:/Documents and Settings/moose )
  2. Create a .ffmpeg folder in your home directory
  3. Copy the preset files from C:/Program Files/ffmpeg/share/*.ffpreset into %HOME%/.ffmpeg
  4. Now you can open a command prompt and use ffmpeg. :D (e.g. This is my Vimeo video conversion command. ffmpeg -i input.mov -vcodec libx264 -vpre hq -crf 24 -g 25 -acodec libmp3lame -ab 192k -ar 44100 output.mp4 )
    *NOTE: libfaac is not included in the build since libfaac is considered to be a non-free plugin

Remember to set the HOME environmental variable in windows

  1. Copy the presets under the environmental variable folder
  2. 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"
Jolandajolanta answered 31/3, 2013 at 1:46 Comment(2)
Will install it from source help ? the "exe" build with the auto builds inside it is not good ?Lynx
This... is to much. We work of speed, not 'consuming time'. Amazing, how many years now? And not ONE properly compiled FFMPEG.exe. One would think by now, with the need to mobile and HTML5 video, there would be an insane amount of 'easy to use' options. Hell, I am dumbfounded Adobe has not even jumped on that yet.Roguish
A
4

from orig link...

WebM is fully supported in ffmpeg 0.6 and later. On the command line, run ffmpeg with no parameters and verify that it was compiled with VP8 support:

you@localhost$ ffmpeg
FFmpeg version SVN-r23197, Copyright (c) 2000-2010 the FFmpeg developers
built on May 19 2010 22:32:20 with gcc 4.4.3
configuration: --enable-gpl --enable-version3 --enable-nonfree --enable-postproc 
--enable-pthreads --enable-libfaac --enable-libfaad --enable-libmp3lame 
--enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libtheora 
--enable-libx264 --enable-libxvid --enable-x11grab --enable-libvorbis 
--enable-libvpx

If you don’t see the magic words “--enable-libvorbis” and “--enable-libvpx” you don’t have the right version of ffmpeg. (If you compiled ffmpeg yourself, check to see if you have two versions installed. That’s fine, they won’t conflict with each other. You’ll just need to use the full path of the VP8-enabled version of ffmpeg.)

I’m going to do a two-pass encode. Pass 1 just scans through the input video file (-i pr6.dv) and writes out some statistics to a log file (which will be auto-named pr6.dv-0.log). I specify the video codec with the -vcodec parameter:

you@localhost$ ffmpeg -pass 1 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 4:3 -an -y NUL

Most of the ffmpeg command line has nothing to do with VP8 or WebM. libvpx does support a number of VP8-specific options that you can pass to ffmpeg, but I don’t yet know how any of them work. Once I find a good explanation of them, I’ll link it here and incorporate them into the narrative if it’s worthwhile to do so.

For the second pass, ffmpeg will read the statistics it wrote during the first pass and actually do the encoding of the video and the audio. It will write out a .webm file.

you@localhost$ ffmpeg -pass 2 -passlogfile pr6.dv -threads 16  -keyint_min 0 -g 250 -skip_threshold 0 -qmin 1 -qmax 51 -i pr6.dv -vcodec libvpx -b 614400 -s 320x240 -aspect 4:3 -acodec libvorbis -y pr6.webm

There are five important parameters here:

  • -vcodec libvpx specifies that we’re encoding with the VP8 video codec. WebM always uses VP8 video.
  • -b 614400 specifies the bitrate. Unlike other formats, libvpx expects the bitrate in actual bits, not kilobits. If you want a 600 kbps video, multiply 600 by 1024 to get 614400.
  • -s 320x240 specifies the target size, width by height.
  • -aspect 4:3 specifies the aspect ratio of the video. Standard definition video is usually 4:3, but most high-definition video is 16:9 or 16:10. In my testing, I found that I had to specify this explicitly on the command line, instead of relying on ffmpeg to autodetect it.
  • -acodec libvorbis specifies that we’re encoding with the Vorbis audio codec. WebM always uses Vorbis audio.
Anthocyanin answered 31/3, 2013 at 2:7 Comment(0)
T
2

My issue was the pixel formatting.

Adding -pix_fmt yuv420p fixed it in IE for me.

Tillo answered 8/12, 2015 at 0:48 Comment(0)
G
1

I spent many hours trying to figure that one out. I finally found how to do this properly using avconv (or ffmpeg)

  1. Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4
    
  2. Move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!

    qt-faststart pre_out.mp4 out.mp4
    

qt-faststart is a Quicktime utilities that also support H.264/ACC file format. It is part of libav-tools package.

Grata answered 13/3, 2014 at 0:35 Comment(0)
A
0

Had the same problem a while ago, and i successfully resolved in this way:

First , download the latest version of ffmpeg (or build from the official github repository (https://github.com/FFmpeg/FFmpeg ), if you want to make some experimentation).

Then try this:

ffmpeg -i input.mov -c:v libx264 -c:a libfaac -strict experimental output.mp4

Hope this will help out!

Aria answered 3/4, 2013 at 20:11 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.