Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ffmpeg convert mov file to mp4 for HTML5 video tag IE9

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!

like image 902
Adidi Avatar asked Mar 20 '13 13:03

Adidi


People also ask

Does FFmpeg support MOV?

FFmpeg can input most container formats natively, including MP4, . ts, MOV, AVI, Y4M, MKV, and many others. This is the output file. No switch necessary; just the file name.

Can FFmpeg convert video?

Because WebM is a well-defined format, FFmpeg automatically knows what video and audio it can support and will convert the streams to be a valid WebM file.


1 Answers

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` 
like image 79
23 revs Avatar answered Sep 20 '22 13:09

23 revs