Encoding Video for Android

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

In my previous post, Making 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 actually correct. The suffix can be either .mp4 or .m4v, what matters is the way the video is encoded.

Now, there are loads of blog and forum posts which give differing advice on presets and parameters, and I’m no expert – so what I’ll do is just show you two quick ways that worked for me (I have a Samsung Galaxy S).

A couple of things to note: this post refers specifically to video embedded in web pages with the video element, so the other two requirements from my previous blog post still stand; also, the methods shown below should mean your videos play on iOS too, so you don’t have to encode for different platforms.

The first is cross-platform, using Handbrake. What I did with this was to use the iPhone & iPod Touch preset, check the Web Optimized option, and change the Average bitrate option (in the Quality section) to ~1000kbps (you should then save this as a new preset called Android).

You’ll also need to change the size of the output video in the Picture Settings options – I changed mine to 480 wide (keeping the aspect ratio) and they came out really crisp and sharp. You can see the result of that below (if your browser supports it).

The second method is also cross-platform, and uses VLC (I’m using version 1.1.1, not sure if older versions work the same). It involves more set-up the first time around, but will be easier with each subsequent conversion. Update: I was using VLC for Linux, but the OSX version seems to be quite different.

Go to Media > Convert/Save, add the file to be converted, and choose Convert from the selection at the bottom. Name your Destination File [filename].mp4, and from the Profile list choose Video – H.264 + AAC (TS).

Hit the Edit icon next to the list, and go through each tab in turn; in Encapsulation choose MP4/MOV; in Video Codec un-check the Keep original video track box, choose H-264 from the Codec list, empty the Scale field and enter a value in Width (I used 480); in Audio un-check the Keep original audio track box and select MPEG4 Audio (AAC) from the Codec list. Now click Save, and all of these settings will be remembered 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 encoding below. Update: This video doesn’t seem to play on iOS.

The third method is the simplest, but works on Mac OSX 10.6 only. Open up your source video in Quicktime, then go to File > Save As. Choose iPhone from the Format selector. You get less control over your output with this – the width is always 480 and the bitrate is calculated automatically – but it works without fuss. The output of this method is shown below.

A slightly more convoluted method is to use DoubleTwist, which performs on-the-fly conversion. Connect your Android device, then transfer your video to it – the optimum parameters will be automatically selected. When complete, copy the file back from the device to your computer. (I haven’t actually 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 updated as I discover different methods, and do feel free to let me know in the comments what works for you.

24 comments on
“Encoding Video for Android”

  1. […] This post was mentioned on Twitter by Peter Gasston, Peter Gasston. Peter Gasston said: New blog post: Encoding Video for Android http://j.mp/9p4wZ5 […]

  2. Thanks for sharing your tips about video encoding.

    Ubuntu users may be interested in this resource:
    https://help.ubuntu.com/community/AndroidVideoEncoding

    Feel free to contribute to it too ;)

  3. […] and FF4 will support .webm as well. Google Chrome will have support for all three. Android seems be badly flawed when it comes to playback of HTML5 video, so make sure you browse around for information (that link […]

  4. Thanks. This post and the android video post before it were a big help.
    I was one of those people pulling my hair out saying, “But it’s an mp4!
    This should work!” There’s actually 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 encoded with your Handbrake Android settings, but when I pull up the video on my Galaxy S Android all I get is the video symbol (play button symbol in front of film roll).

    Here are my questions:
    1. Did you mean for people to export from another format (exp. mov) to mp4?
    2. Do you know how I could export to this format from Quicktime in a mp4 container? The iPhone option will export it to m4v format.

    Preferably I don’t want m4v because I am trying to reduce the formats and I need the mp4 for the flash player fall back.

  6. Hi Sue,

    Sorry this isn’t working for you; I think I may have to put together a screencast to show exactly what I did. In answer to your questions:

    1. I converted from a Quicktime .mov file.
    2. There’s an option in the preferences that says ‘Use iPod/iTunes friendly (.m4v) file extension for MP4’ – unchecking this will change the output file name to .mp4

    I have to say, it seems harder to make video for Android than for iPhone; hopefully this is something that will be sorted out in future software upgrades.


  7. I have to say, it seems harder to make video for Android than for iPhone; hopefully this is something that will be sorted out in future software upgrades.

    Yes, I was pretty disappointed to hear that Android phone developers (or whoever steers the Android development) were not in tune with the latest HTML5 development. As a programmer/web designer I have to now adjust code and media to ~10 different platforms to make them cross-browser and cross-portable device compatible. That is simply ridiculous.

    As a follow-up question: I tried your handbrake 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 picture size setting in the last step be set to current size?

    Instead of Javascript I am trying 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 comment in your instrucions above about the handbrake method beeing across-platform compatible.

  9. After hours of it not working, if figured out that it requires a relative path. I was working mobile video for my job and we have an assets server that i was trying to pull the video from. iPhone will do it but Froyo says no go. This may be inherent knowledge to some but i overlooked it.

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

    Thanks!

  11. Okay to edit my previous comment, it wasn’t relative path per se, it was the fact that Ibadan had registered the mime types on the server 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 information. I should probably write a follow-up post mentioning MIME types.

  13. @Alexis – Just ran a very quick check using the 2.3 SDK and it seems that yes, WebM is supported in the browser.

  14. Ah, thanks for research! Does it still have the same silly requirements to play?

  15. I ran only a very cursory check just to see if the format was recognised, but otherwise using the same code as previously; so the answer to your question is, I don’t know! When I have more time I’ll put together some more structured tests.

  16. Okay, thanks again! I look forward to hearing your findings. :)

  17. […] Encoding HTML5 Video for Android Tutorial at Broken Links […]

  18. […] guys, when I view this page on my android device’ default web browser and click the first video, it triggers the default […]

  19. Many thanks for the work done here. i have been reading everything i can get my hands on about this nothing worked until i read thru your stuff and changed my mp4 encoding.

    GREAT JOB!

  20. Hi,
    I have a Commtiva-n700 – Android 2.2. I came across your page and found that 2/3 videos where working so I tried to implement your ideas. The difference is that I am using ffmpeg. I have tried many encoding command lines with no success 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 browser but not on the tablet.
    Am I missing something? Do they video’s need to be streamed or something like that? Many thanks in advance – hairless Dave

  21. @Dave: I think there is a very specific 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 However, 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 problems into this link and posted it to and Android forum hoping someone can help: http://ffmpeg.play4gain.com/ will let you know if there is a good outcome.

  23. @Dave,

    Install Handbrake (http://handbrake.fr/downloads.php).

    Encode videos with the following formats:
    Preset: Normal
    Form: MP4 file
    Video codec: h.264,
    Important!!: check Web optimized
    (The Web optimized will move the moov atom to the front of the video.)

    I tested this on the Samsung Galaxy and on Google phone Android 2.1 and 2.2. However, you still have to provide 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 handbrake interface queue. If you know how to run command line you can use Handbrakes command line HandBrakeCLI (need to be downloaded at http://handbrake.fr/downloads2.php).

    Here is the code that I use in the OSX terminal. The -O is the flag for the Web optimized 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 according to your folder structure and original file types.

  24. http://diveintohtml5.info/video.html is an invaluable reference for encoding files for HTML5. It suggests Miro video encoder for Windows and OSX.

    For Gnu/Linux, I use Arista Transcoder, which is excellent software with both Android and HTML5 presets.