ffmpeg Settings for HTML5 codecs (h264/mp4, theora/ogg, vp8/webm)

January 5, 2011 | Video | 12 Comments

This is just a quick tip for people encoding video for HTML5 (and using sweet HTML5 players like MediaElement.js). Go download a copy of ffmpeg, and if you’re on Windows, use this guide to set it up. Then use the following commands to create H.264, WebM, and Ogg videos, along with an image you can use as a poster.

REM mp4  (H.264 / ACC)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libx264 -vpre slow -vpre baseline  											-g 30 -s 640x360 %1.mp4
REM webm (VP8 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libvpx  							-acodec libvorbis -ab 160000 -f webm 	-g 30 -s 640x360 %1.webm
REM ogv  (Theora / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libtheora							-acodec libvorbis -ab 160000 			-g 30 -s 640x360 %1.ogv
REM jpeg (screenshot at 10 seconds)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -ss 00:10 -vframes 1 -r 1 -s 640x360 -f image2 %1.jpg

I save this as a batch file and then just drag and drop videos on it to get everything ready for HTML5.

12 Responses to “ffmpeg Settings for HTML5 codecs (h264/mp4, theora/ogg, vp8/webm)”

  1. Edwin says:

    Thanks, very helpful. I just looked this up: if you change the output file names at the end of the lines from for example “%1.webm” to “%~n1.webm” it will give you a cleaner file name suffix. I was using Avisynth and inputting “Myfile.avs” for which the output was “Myfile.avs.webm”. My modification will output “Myfile.webm” as probably intended.

  2. ddd says:

    Hi,Im using windows,If I dont donwload ffmpeg,Can I convert video by a html5 script online?

  3. Mischa says:

    Could you give some rationale for the options, please!

  4. Ray says:

    Hello.
    I have been trying to run the mediaelement.js video script with my mp4 files. I have tried using the echo-hereweare.mp4 in my container, and it works fine on all platforms, but when I use my own file, it does not run on the iPad. It just keeps loading and nothing really happens. Could you please advise me on what settings would be best to emulate the mp4 settings?

    I have tried the command line above, but it doesn’t seem to work. I have used adaptations of the code above, and now it is giving me messages like “AV Filter told us it has a frame available but failed to output one”
    The line is:

    C:\>”c:\Program Files\ffmpeg\bin\ffmpeg.exe” -i “C:\Users\Raymond\Downloads\WAP1
    .mp4″ -vcodec libx264 -vprofile baseline -b:v 1000k -maxrate 1500k -s 624×260 “C
    :\Users\Raymond\test6_cmdLine.mp4″

    I would really appreciate if you could help me out with this. Thanks.

  5. Adam says:

    You just saved me so much time and trouble, thank you for sharing :) I am planning to convert the same script into a shell script that can be invoked asynchronously from my PHP… so the user will simply have to upload the original file (which will be archived) and the system will do the rest. It will run on a separate server so as not to cause any slow down for my users.

    • sreesanth says:

      Hello Adam,

      Can you please help me with code to convert any other vedio codec to H.264. Looking forward for your reply.

      Thankyou.

  6. Adam says:

    When I run this I get the following when trying to process .webm output: “Requested output format ‘webm’ is not a suitable output format”… I setup exactly as per your article and the linked resources… any ideas?

  7. REM jpeg (screenshot at 10 seconds)…gives error…[Invalid duration specification for ss: 00:10]
    should be
    -ss 00:10 —-> -ss 00:00:10

    “c:\program files\ffmpeg\bin\ffmpeg.exe” -i %1 -ss 00:00:10 -vframes 1 -r 1 -s 640×360 -f image2 %1.jpg

  8. Thanks for this! I ended up having to make a few changes to get it to work with the latest version of FFmpeg. My updated batch file is here:

    http://blogs.visigo.com/chriscoulson/encode-h-264-and-webm-videos-for-mediaelement-js-using-ffmpeg/

  9. Nils says:

    Hi John …

    I’m also looking for the right codes for ffmpeg to get the correct outputfile for the video-js HTML5 player …
    I want to create timelapse-movies from snapshots from my webcam …

    May you please help me to find the correct ones!?

    Thanks!

    Nils

  10. Dmitry says:

    thank you so much for this post! really helpful

  11. [...] commands were taken from this blog entry and modified to work on Linux appropriately. See the original post for a Windows solution. This [...]

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.