Encoding Video for Android

Warning This article was written over six months ago, and may contain outdated information.

In my pre­vi­ous post, Mak­ing HTML5 Video work on Android phones, I said that you have to encode your videos as .m4v in order for them to work in Android. This isn’t actu­al­ly cor­rect. The suf­fix can be either .mp4 or .m4v, what mat­ters is the way the video is encoded.

Now, there are loads of blog and forum posts which give dif­fer­ing advice on pre­sets and para­me­ters, and I’m no expert — so what I’ll do is just show you two quick ways that worked for me (I have a Sam­sung Galaxy S).

A cou­ple of things to note: this post refers specif­i­cal­ly to video embed­ded in web pages with the video ele­ment, so the oth­er two require­ments from my pre­vi­ous blog post still stand; also, the meth­ods shown below should mean your videos play on iOS too, so you don’t have to encode for dif­fer­ent platforms.

The first is cross-plat­form, using Hand­brake. What I did with this was to use the iPhone & iPod Touch pre­set, check the Web Opti­mized option, and change the Aver­age bitrate option (in the Qual­i­ty sec­tion) to ~1000kbps (you should then save this as a new pre­set called Android).

You’ll also need to change the size of the out­put video in the Pic­ture Set­tings options — I changed mine to 480 wide (keep­ing the aspect ratio) and they came out real­ly crisp and sharp. You can see the result of that below (if your brows­er sup­ports it).

The sec­ond method is also cross-plat­form, and uses VLC (I’m using ver­sion 1.1.1, not sure if old­er ver­sions work the same). It involves more set-up the first time around, but will be eas­i­er with each sub­se­quent con­ver­sion. Update: I was using VLC for Lin­ux, but the OSX ver­sion seems to be quite different.

Go to Media > Convert/Save, add the file to be con­vert­ed, and choose Con­vert from the selec­tion at the bot­tom. Name your Des­ti­na­tion File [filename].mp4, and from the Pro­file list choose Video — H.264 + AAC (TS).

Hit the Edit icon next to the list, and go through each tab in turn; in Encap­su­la­tion choose MP4/MOV; in Video Codec un-check the Keep orig­i­nal video track box, choose H‑264 from the Codec list, emp­ty the Scale field and enter a val­ue in Width (I used 480); in Audio un-check the Keep orig­i­nal audio track box and select MPEG4 Audio (AAC) from the Codec list. Now click Save, and all of these set­tings will be remem­bered so you don’t have to enter them again.

With all that done, hit Start to encode your video. You can see the result of the VLC encod­ing below. Update: This video does­n’t seem to play on iOS.

The third method is the sim­plest, but works on Mac OSX 10.6 only. Open up your source video in Quick­time, then go to File > Save As. Choose iPhone from the For­mat selec­tor. You get less con­trol over your out­put with this — the width is always 480 and the bitrate is cal­cu­lat­ed auto­mat­i­cal­ly — but it works with­out fuss. The out­put of this method is shown below.

A slight­ly more con­vo­lut­ed method is to use Dou­bleTwist, which per­forms on-the-fly con­ver­sion. Con­nect your Android device, then trans­fer your video to it — the opti­mum para­me­ters will be auto­mat­i­cal­ly select­ed. When com­plete, copy the file back from the device to your com­put­er. (I haven’t actu­al­ly tried this myself).

I’ve read that you can use WinFF, although I haven’t been able to make this work so far.

I’ll keep this post updat­ed as I dis­cov­er dif­fer­ent meth­ods, and do feel free to let me know in the com­ments what works for you.

24 comments on
“Encoding Video for Android”

  1. […] This post was men­tioned on Twit­ter by Peter Gasston, Peter Gasston. Peter Gasston said: New blog post: Encod­ing Video for Android http://j.mp/9p4wZ5 […]

  2. Thanks for shar­ing your tips about video encoding.

    Ubun­tu users may be inter­est­ed in this resource:
    https://help.ubuntu.com/community/AndroidVideoEncoding

    Feel free to con­tribute to it too ;)

  3. […] and FF4 will sup­port .webm as well. Google Chrome will have sup­port for all three. Android seems be bad­ly flawed when it comes to play­back of HTML5 video, so make sure you browse around for infor­ma­tion (that link […]

  4. Thanks. This post and the android video post before it were a big help.
    I was one of those peo­ple pulling my hair out say­ing, “But it’s an mp4!
    This should work!” There’s actu­al­ly not much info out there on doing
    this.

  5. Thank you so much for this post. I tried to export a video that is already mp4 encod­ed with your Hand­brake Android set­tings, but when I pull up the video on my Galaxy S Android all I get is the video sym­bol (play but­ton sym­bol in front of film roll). 

    Here are my questions:
    1. Did you mean for peo­ple to export from anoth­er for­mat (exp. mov) to mp4?
    2. Do you know how I could export to this for­mat from Quick­time in a mp4 con­tain­er? The iPhone option will export it to m4v format. 

    Prefer­ably I don’t want m4v because I am try­ing to reduce the for­mats and I need the mp4 for the flash play­er fall back.

  6. Hi Sue,

    Sor­ry this isn’t work­ing for you; I think I may have to put togeth­er a screen­cast to show exact­ly what I did. In answer to your questions:

    1. I con­vert­ed from a Quick­time .mov file.
    2. There’s an option in the pref­er­ences that says ‘Use iPod/iTunes friend­ly (.m4v) file exten­sion for MP4’ — uncheck­ing this will change the out­put file name to .mp4

    I have to say, it seems hard­er to make video for Android than for iPhone; hope­ful­ly this is some­thing that will be sort­ed out in future soft­ware upgrades.


  7. I have to say, it seems hard­er to make video for Android than for iPhone; hope­ful­ly this is some­thing that will be sort­ed out in future soft­ware upgrades.

    Yes, I was pret­ty dis­ap­point­ed to hear that Android phone devel­op­ers (or who­ev­er steers the Android devel­op­ment) were not in tune with the lat­est HTML5 devel­op­ment. As a programmer/web design­er I have to now adjust code and media to ~10 dif­fer­ent plat­forms to make them cross-brows­er and cross-portable device com­pat­i­ble. That is sim­ply ridiculous.

    As a fol­low-up ques­tion: I tried your hand­brake method again this time with a .mov and still had no luck to get it to work on my Galaxy S android.

    This should work on OSX 10.5? And can the pic­ture size set­ting in the last step be set to cur­rent size?

    Instead of Javascript I am try­ing to use this JQuery (I think it is the equivalent):

    if($('#video').length > 0){
    $('#video').bind('click', function() {
    document.play();
    });

  8. I must have missed your com­ment in your instru­cions above about the hand­brake method bee­ing across-plat­form compatible.

  9. After hours of it not work­ing, if fig­ured out that it requires a rel­a­tive path. I was work­ing mobile video for my job and we have an assets serv­er that i was try­ing to pull the video from. iPhone will do it but Froyo says no go. This may be inher­ent knowl­edge to some but i over­looked it.

  10. Hey Peter, do you have any idea if it’s pos­si­ble to make a WebM/VP8 video to work in the Android 2.3 brows­er? I’ve read that the OS sup­ports it, but no info on whether or not it applies to the browser.

    Thanks!

  11. Okay to edit my pre­vi­ous com­ment, it was­n’t rel­a­tive path per se, it was the fact that Ibadan had reg­is­tered the mime types on the serv­er to which my paths are relative.

  12. @Alexis — I haven’t tried it yet. I’ll update my SDK and give it a go.

    @Brookes — Thanks for the infor­ma­tion. I should prob­a­bly write a fol­low-up post men­tion­ing MIME types.

  13. @Alexis — Just ran a very quick check using the 2.3 SDK and it seems that yes, WebM is sup­port­ed in the browser.

  14. Ah, thanks for research! Does it still have the same sil­ly require­ments to play?

  15. I ran only a very cur­so­ry check just to see if the for­mat was recog­nised, but oth­er­wise using the same code as pre­vi­ous­ly; so the answer to your ques­tion is, I don’t know! When I have more time I’ll put togeth­er some more struc­tured tests.

  16. Okay, thanks again! I look for­ward to hear­ing your findings. :)

  17. […] Encod­ing HTML5 Video for Android Tuto­r­i­al at Bro­ken Links […]

  18. […] guys, when I view this page on my android device’ default web brows­er and click the first video, it trig­gers the default […]

  19. Many thanks for the work done here. i have been read­ing every­thing i can get my hands on about this noth­ing worked until i read thru your stuff and changed my mp4 encoding.

    GREAT JOB!

  20. Hi,
    I have a Comm­ti­va-n700 — Android 2.2. I came across your page and found that 2/3 videos where work­ing so I tried to imple­ment your ideas. The dif­fer­ence is that I am using ffm­peg. I have tried many encod­ing com­mand lines with no suc­cess and am out of ideas. Info from here: https://help.ubuntu.com/community/AndroidVideoEncoding
    and here: http://h264.code-shop.com/trac/wiki/Encoding
    All mp4 videos work great on my web brows­er but not on the tablet.
    Am I miss­ing some­thing? Do they video’s need to be streamed or some­thing like that? Many thanks in advance — hair­less Dave

  21. @Dave: I think there is a very spe­cif­ic action that you need to take; see here: http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/#comment-40896 How­ev­er, I don’t know enough about FFMPEG to say how to do that.

  22. Hi Peter,

    Thanks for your response. I don’t don’t know what to make of the advice. Well over my head I fear but I have put all my prob­lems into this link and post­ed it to and Android forum hop­ing some­one can help: http://ffmpeg.play4gain.com/ will let you know if there is a good outcome.

  23. @Dave,

    Install Hand­brake (http://handbrake.fr/downloads.php).

    Encode videos with the fol­low­ing formats:
    Pre­set: Normal
    Form: MP4 file
    Video codec: h.264,
    Impor­tant!!: check Web optimized
    (The Web opti­mized will move the moov atom to the front of the video.)

    I test­ed this on the Sam­sung Galaxy and on Google phone Android 2.1 and 2.2. How­ev­er, you still have to pro­vide for the users of Android a link to the video since it will not load in the HTML5 video player.

    If you have to batch encode videos you can load them into the hand­brake inter­face queue. If you know how to run com­mand line you can use Hand­brakes com­mand line Hand­Brake­CLI (need to be down­loaded at http://handbrake.fr/downloads2.php).

    Here is the code that I use in the OSX ter­mi­nal. The ‑O is the flag for the Web opti­mized option:
    for file in `ls /Users/path-to-video-folder/mov/`; do $(//Applications/HandBrakeCLI -v -i /Users/path-to-video-folder/mov/${file} -o Users/path-to-video-folder/mp4/"${file%.mov}.mp4" -Z Normal -O); done

    You might have to change or tweak this accord­ing to your fold­er struc­ture and orig­i­nal file types.

  24. http://diveintohtml5.info/video.html is an invalu­able ref­er­ence for encod­ing files for HTML5. It sug­gests Miro video encoder for Win­dows and OSX.

    For Gnu/Linux, I use Arista Transcoder, which is excel­lent soft­ware with both Android and HTML5 presets.