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

January 5, 2011 | Video | 21 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.

21 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:

    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

    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.


  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:


  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!?



  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 […]

  12. For better or worse, Apple feels that we are all not grown up enough to decide whether or not
    we want adult content on our phones, or if we even want to expand the functionality of the phone
    into territory it should already be going into anyway.
    Our generation grew up thinking of coffee as a morning pick-me-up and after dinner drink for adults only.
    New parents can share the joy of having their first baby with creative new ideas offered by this amazing online gifts shop.

  13. Kitara Frei says:


    Great article. Is it possible to do the contrary? Convert an HTML5 video to mp4 or some type of video file?


  14. […] Dyer; ffmpeg Settings for HTML5 codecs (h264/mp4, theora/ogg, vp8/webm); In His Blog; […]

  15. […] Dyer; ffmpeg Settings for HTML5 codecs (h264/mp4, theora/ogg, vp8/webm); In His Blog; […]

  16. Ardy says:

    There are so many other news in this build that’s not listed above! Just a pity it’s so time cnunsmiog to walk through the revision log.Other news in this release:- Add sync support for Passwords- Don’t let bookmark navigations change content of pinned tab. (works on bookmark bar and bookmark menus, not in manager)- Allow extensions to be overinstalled with extensions of same version.Windows Only (yet):- Implement upgrade notifications. When we detect that the installed version is newer than the version you are running we show a little throbbing orange dot over the wrench menu.For Chromium OS users:- Turn on cloud print for Chromium OS.

  17. This does look promising. I’ll keep coming back for more.

  18. […] Save this file as a .bat file (for instance WEBMconverter.bat) to somewhere easy to access, like your desktop. You can then drag-and-drop a video file onto this batch file to start processing. Note: This idea was inspired by a separate post by John Dyer. […]

  19. bestautumnn says:

    Have you tried Avdshare?
    It will show you a step by step guide on how to find and download the right ogv to mp4 videos as well as add ogv to MP4. In fact, this guide also applies to add subtitles to AVI, MKV, WTV, WMV, VOB, MPG, MOV, DV, FLV, WebM, OGV, and etc.

  20. […] Quelle,¬† Videos verkleinern, Webdesign f√ľr kleine […]

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.