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.
Hello Adam,
Can you please help me with code to convert any other vedio codec to H.264. Looking forward for your reply.
Thankyou.
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
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.
Hello,
Great article. Is it possible to do the contrary? Convert an HTML5 video to mp4 or some type of video file?
Thanks!
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.