ffmpeg Settings for HTML5 codecs (h264/mp4, theora/ogg, vp8/webm)
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.
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.
Hi,Im using windows,If I dont donwload ffmpeg,Can I convert video by a html5 script online?
Could you give some rationale for the options, please!
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.
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.
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?
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
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/
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
thank you so much for this post! really helpful
[...] commands were taken from this blog entry and modified to work on Linux appropriately. See the original post for a Windows solution. This [...]