Making HTML5 Video work on Android phones

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

I recent­ly became the own­er of an Android phone* and found that, despite it being list­ed as a fea­ture of the brows­er, the HTML5 video ele­ment did­n’t work for almost all of the exam­ples I tried. I’ve just done some exper­i­men­ta­tion with this and think I’ve found a solu­tion, so this post is offered in the hope that it helps any­one who may be tear­ing their hair out over the same problem.

From what I can tell, there are three require­ments for video to work in Android browsers:

  1. You must not use the type attribute when call­ing the video
  2. You must man­u­al­ly call the play() method using JavaScript
  3. The video must be encod­ed as .m4v, not .mp4 Update: This is not cor­rect (see below)

Update: This may be a spe­cif­ic encod­ing issue rather than all .mp4s; some .mp4 videos seem to play with no prob­lems, oth­ers do not. Fur­ther update: The video type was a red her­ring; see my fol­low-up post, Encod­ing Video for Android, for more about this.

You can see this work­ing in the demo attached to an old­er post of mine: Demo: HTML5 Video Con­trols With JavaScript. This works, AFAIK, in Android, iPhone and all video-enabled desk­top browsers. The markup I’ve used is:

<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">

The first source ele­ment calls the video in .m4v for­mat, with­out spec­i­fy­ing the MIME type in the type attribute; I’ve tried both video/mp4 and video/x‑m4v, and nei­ther works. Omit­ting the type attribute alto­geth­er lets the video play, and seems to have no ill-effect on oth­er browsers which play the .m4v file.

In order to play the video in Android, I also have an event lis­ten­er in the JavaScript which plays the video when the ele­ment is clicked on, some­what like this:

var video = document.getElementById('video');

I test­ed this on my own phone and an HTC Desire, and it works just fine on both. Hope this is of help to someone.

* It’s a Sam­sung Galaxy S, and I’m delight­ed by it.

71 comments on
“Making HTML5 Video work on Android phones”

  1. It’s hard to believe that HTML5 video is still so bad­ly bro­ken in Android, even in the lat­est ver­sion. This should have been work­ing since ver­sion 1 and they have no excuses—the markup has been out there and in use by the iPhone for *THREE YEARS*. I’m irate at Google for their incom­pe­tence with HTML5 video on Android. Where does one file a bug?

  2. Hi Kroc, I’ve added this blog post to an open bug, num­ber 8272 — I encour­age you to do the same.

  3. @KROC_CAMEN — HTML5 video sup­port isn’t per­fect, but the exam­ple does­n’t work on iPhone. Maybe you should check next time before going on a rant and spout­ing bullshit.

  4. Wait; my exam­ple does­n’t work on iPhone? It cer­tain­ly did when I checked it. Are you using iOS3? There’s a well-known bug with that, where the poster attribute caus­es problems.

    Also, please try to be civil.

  5. are there any spe­cial set­tings to encode the video with? The Javascript works fine, but as soon as I click the icon I get a mes­sage telling me “Video can not be dis­played. This video is not a valid stream­ing media for­mat”. Any ideas what might be wrong with the video (it’s a .m4v For­mat). Thanks!

  6. Hi Kirsten,

    Thanks for the com­ment. Your result is inter­est­ing, because I don’t get that mes­sage at all; I get the same mes­sage on some .mp4 files. What phone and ver­sion of Android are you using? I’m going to look into this further.


  7. Hi Peter,

    thanks for the quick reply. I am using the HTC Desire with the cur­rent stan­dard ver­sion Android 2.1 update1. I tried var­i­ous encod­ing set­tings. There was no chance with the mp4 encod­ing, as you have writ­ten. I use ISkySoft as con­vert­ing soft­ware and the encod­ing set­tings were: M4V ‑MPEG — 4Video(*.m4v), Codec: H.264
    Any idea? The alter­na­tive .ogv File is avail­able as down­load only.
    Thanks in advance! Kirsten

  8. Kirsten,

    I’m going to put togeth­er a test page, and we’ll see if we can get to the bot­tom of this.


  9. Kirsten, could you take a look at this test page:

    And let me know which of the videos (A,B,C,D) works for you? I’ve got a fair­ly good idea of what the prob­lem is now, but want confirmation.


  10. Hi Peter, Video A and B worked per­fe­ict­ly. With C and D I got the same error mes­sage as with my movie. I am look­ing for­warnd to your answer. Kirsten

  11. Hi all,
    This is a good article.
    Thank you very much.
    But i have an issue (not small).

    We can watch video on Android but it can be auto­buffer (or preload).
    On iPhone, you can press PAUSE and wait the play­er buffer the video. Then you can watch whole video with­out delay.

    On Android, even you press PAUSE, but it just buffer 1/20 of video and stop buffer.
    THen you watch video, if your inter­net is slow, the video will be delay to load… many times.

    Please help me to solve this problem.
    I am try­ing to find the solu­tion for this whole week, but i still can not find out…

    Thank you very much.

  12. @Kirsten: OK, so all four test videos were encod­ed using; the only dif­fer­ence is that A & B used the ‘web opti­mized’ set­ting, C & D did­n’t. I don’t know exact­ly what that does (rearranges the MP4 files so they stream bet­ter, from what I can tell) or how to make this hap­pen in oth­er encod­ing appli­ca­tions, but in the short term this will help you encode video. In the longer term, I’m going to look into this some more. I don’t get that prob­lem on my Sam­sung Galaxy; may be a phone issue rather than an Android issue? What ver­sion of Android are you on? (Also I pre­fer if you use a name or nick­name rather than a com­pa­ny name; it makes it hard­er to tell spam from gen­uine com­ments if you use your com­pa­ny name as your user name).

  13. Hi Peter
    Thanks for the great info. Can I ask you a ques­tion please.
    I’ve made a sim­ple html5 video page. Please see the code below

    var video = document.getElementById(‘video’);

    #video width=“320” height=“240” poster=“poster.png” auto­buffer controls#
    #source src=“TV_intro.m4v”#
    #source src=“TV_intro.mp4” type=“video/mp4”#
    #source src=“TV_intro.ogv” type=“video/ogg” /#
    Down­load the #a href=video.ogg#video#/a#

    But it does­n’t work on my htc desire though.. Can you kind­ly have a look at my code if I’ve done any­thing wrong? It works on iPhone.

    Thanks in advance

    ps. I just changed the mp4 exten­sion to m4v to make m4v file as I read it works this way. No?


  14. @Jun: As men­tioned, it also depends on the way the video is encod­ed; see my com­ment to Kirsten, above.

  15. Hi Peter

    Thanks for the rapid reply. So do you think that the html itself is fine?



  16. Yes, the HTML seems fine; you just need to encode the video cor­rect­ly. Try using Hand­brake, and set the ‘web opti­mized’ option.

  17. hmmmm.…Yes I used Band­brake with ‘web opti­mized’ checked. but no luck yet.. maybe need more googling.. haha
    it must be sim­ple just don’t know what it is.


  18. Hi Peter

    The rea­son was javascript. Once changed js it works. but only sound. screen is just black. one solved but anoth­er came out. Any idea? Any­way will post if there’re any out­comes for oth­er peo­ple who have the same issue.

  19. Hi Peter,

    I changed the encod­ing as you said and now it does work per­fect­ly. Thank you very much for your quick replies!

  20. does not work on htc mag­ic w. A V:1.6

  21. The JS code fixed my Android issues but it has “bro­ken” the pause/play but­ton on all oth­er browsers once the video has start­ed to play. I imag­ine this is due to con­flicts between the EventLis­ten­er and the ‘click’ func­tion of the play but­ton i.e. you’re essen­tial­ly hit­ting play twice and this caus­es the video to imme­di­ate­ly pause after the play. The exam­ple on also exhibits this prob­lem — just try and Play -> Pause -> Replay and you’ll see what I mean. My workaround at the moment is to sniff for User­A­gent and only add the EventLis­ten­er if it’s an “android” — but has any­one got a bet­ter solution?
    var uagent = navigator.userAgent.toLowerCase();

    if (“android”) > ‑1) {

    var video = document.getElementById(‘video’);

  22. @Jun I’m get­ting the same thing as you. It “plays” the video, but it only has audio with a black screen. I just have a link straight to the mp4 file with no javascript. 

    I’m try­ing to fig­ure out how to out­put once from Cam­ta­sia Stu­dio (with web for­mat) to mp4 and have it play on all browsers, iPhone/Touch/Pad, and Android. It’s all work­ing right now except for this prob­lem with Android :S

    Micah Peterson [November 23rd, 2010, 20:09]

  23. I know this is way late, but it’s worth men­tion­ing that you can keep the type=“video/mp4” on the first source, and then move it to the video ele­men­t’s .src attribute for Android. Some­thing like:

    var video = document.getElementById(‘video’);
    video.src = video.childNodes[0].src;

  24. I know this is arcane, but it may be the real rea­son for most prob­lems play­ing video on Android:

    ***Make sure the “moov” atom comes before the “mdat” atom in the file.***

    In Hand­brake, for instance, you would check “web opti­mized” then make sure that “2 pass encod­ing” is enabled — this sec­ond pass is required to re-order the ele­ments in the file such that Android will rec­og­nize it, since the nat­ur­al order these ele­ments are cal­cu­lat­ed in dur­ing sin­gle-pass encod­ing is the reverse.

  25. @Matt: I won’t pre­tend to know what that means, but that does sound right; I read some­thing sim­i­lar to that on a forum somewhere.

  26. Hi Peter,

    Are these code applied for Android’s brows­er only not for Android native application?
    I just cre­at­ed an Android appli­ca­tion that run .m4v video file using your code. I used Phone­Gap frame­work for this appli­ca­tion so I can use html and Javascript to cre­ate an app. But the code did­n’t work well. It could­n’t run the media file.
    Could you pls give me any advices?

  27. @Thom Sor­ry for the slow reply. I don’t know any­thing about Android app devel­op­ment, and haven’t used Phone­Gap, so I can’t give you any advice on this. Sorry.

  28. Hi Peter, am a new­bie to android… am try­ing to run a video in html5(). i’ve read all the com­ments post­ed and came to know abt the pro­ce­dure to run vids on phones. But i want to run thm on emu­la­tor. Cld u pls hlp me out of this of avd 2.2 or 2.3.

    Thank you.

  29. @Vinay I’ve nev­er been able to get video work­ing on the emu­la­tor, and a lot of peo­ple seem to have the same prob­lem. Most of the time I just get the audio. Try search­ing the Android devel­op­ers forums and see if you can get a decent response from there.

  30. Peter,

    I don’t know if this is help­ful info or not, but I’ve just checked and all of those videos (A‑F) on the video com­par­i­son page work on Android 2.3 (Nexus S)


  31. @Tom — Very use­ful, thanks.

  32. […] Dis­play­ing HTML5 Video for Android Tuto­r­i­al at Bro­ken Links […]

  33. […] Mak­ing HTML5 Video work on Android phones Relat­ed: iPad is the new IE6 […]

  34. Worked fine with HTC Desire[Android 2.1] and iPhone4[iOS 4.2.1]

  35. Hey Peter … This may be late to the game but I read today on Video for Every­one that Android has to be test­ed using real phones when it comes to video; the emu­la­tor won’t play them. Ref­er­ence:
    Blurb: “HTML5 video on Android is bad­ly bro­ken. Res­o­lu­tion sup­port varies from one hand­set to the next (often just 480x360), the fall­back image usu­al­ly doesn’t show and the code requires spe­cial adjust­ments. The Android emu­la­tor is com­plete­ly use­less as it doesn’t rep­re­sent any real hard­ware and does not play HTML5 video. THERE IS NO WAY TO TEST ON ANDROID WITHOUT A PHYSICAL PHONE. BLAME GOOGLE.”

    Rynne Cowham [May 5th, 2011, 20:46]

  36. Thanks Rynne. My expe­ri­ence is that the screen will go black and play audio, but there’s no video play­back. While that’s not great, it does mean that there’s enough feed­back for you to tell if a video would play or not. But yes, test­ing on a phys­i­cal device is bet­ter; the Android emu­la­tors are *slow*.

  37. I am try­ing to get a movie (mp4) to work on both ios and android. I am writ­ing on a mac and using main­ly BBEDIT or Dash­code, and edit­ing the *.js file.

    I was won­der­ing if you know what I can write to enable android to work?

    the js file is:

    func­tion writeMovie1()
    else if(isiPhone)
    setTransparentGifURL(‘Media/transparent.gif’);function hostedOnDM()
    {return false;}
    func­tion onPageLoad()
    func­tion onPageUnload()

  38. So what’s the deal with Android 2.2 then? None of these solu­tions seem to work for that one, and I’ve tried them all — the js play call trick, remov­ing the codecs, remov­ing the type attrib­ut­es, all of the above.… I even went to your Demo here: with the 2.2 droid and sure enough, it would not play the video. Gave me a spin­ner for “for­ev­er” and then on refresh popped up that “video can­not be played” message.

  39. Real­ly? I have Android 2.2 and it works fine for me. When you have a chance, take a look at this page and see if any work for you:

  40. I test­ed these on an Android 2.1 device and all played except “C” and “F”. I haven’t had a chance to use again the Android 2.2 phone I was using pre­vi­ous­ly, though. At this point I’m pret­ty con­vinced the prob­lem is with how the video is encod­ed, so I’m gath­er­ing info in that regard to see if we can’t get to the bot­tom of this (includ­ing your Encod­ing arti­cle — thank you! Did you ever resolve the iProd­ucts issues on some of those exam­ples, by the way?)

  41. worked on my opti­mus v except c and f run­ning android 2.2

  42. I’m hav­ing the same prob­lem as Stu­pid­i­an men­tioned before. If I apply the play or pause con­trol to the video tag itself, I lose the play or pause con­trol from the default con­trols. (Actu­al­ly, it acts like I’ve dou­ble-clicked the con­trol. When I click on play on the con­trols, it advances one frame then stops. If I click on the video, play continues.)
    I noticed that the video works in now, but from Chrome (for exam­ple), there is no con­trol by click­ing on the video itself. Any idea of how they are get­ting around this (like a snif­fer, because they aren’t claim­ing to use one), or how do I get around this in gen­er­al, prefer­ably with­out sniffing?

    Is there a DOM access to the default play con­trols? I’d like to have the option of play­ing by click­ing on the play con­trol or by hav­ing a giant play but­ton over­lay on the poster, because most video play­ers use the stan­dard of click­ing either one.

  43. does both android and iphone only play embed­ded video via it’s native play­er only? I want it to play on the page…not a pop­up.… is it possible?

  44. […] Javascrip­tでトリガーを設置してあげないとフルスクリーン再生してくれなかったりするようです。 […]

  45. […] Address­ing chal­lenges play­ing audio and video in the Android browser. […]

  46. less lines with;

  47. […] read this post Mak­ing html5 video work on android phones. But I believe I’ve got that cov­ered in my code above. Any­one see what I can do to get this […]

  48. Hel­lo every­body. First thnx a lot for this code for video for android it works per­fect­ly. Now I want­ed to com­bine with a code for redi­rect­ing to anoth­er url and it does­n’t work on android. While it’s work­ing in mozzi­la and safari. Any help? you can see my page 


    and here is code I used:

    var video = document.getElementById(‘myvideo’);

    var video = document.getElementById(“video”);

    func­tion doSomething() {

    window.location = “”

  49. This real­ly saved the day for me in terms of raw func­tion­al­i­ty to play the video. I was frus­trat­ed that I could get the video to play on all HTML5 devices and browsers (includ­ing oth­er android phones) except my Gin­ger-bread based Rezound. It was not an encod­ing issue, just a click-to-play issue. The video would play if I tapped in the low­er left cor­ner of the video area, so it seems as if for some rea­son the brows­er or the device makes the con­trols for video invis­i­ble. Instead of mak­ing the entire video area hot (click­able), is there a solu­tion to make those video con­trols vis­i­ble for browsers/devices that might be hid­ing them?

  50. Rather than adding an event lis­ten­er, I sim­ply take advan­tage of the play() method:
    <video onclick=“;” preload=“auto” controls=“controls”>
    <source src=“movie.mp4” />

  51. I own a Sam­sung Galaxy S2 and i dont have a prob­lem about videos. Maybe its about the ver­sion of the android ????

  52. @FredMC Using inline JavaScript is bad prac­tice, which is why I’ve used an event listener.

  53. I am devel­op­ing android app using phone gap in which I am using HTML5.Can you please tell me in which fold­er I should keep my video to make it work..
    Thanks a lot.

  54. Thank you for all the info which i had pulled my hair over.
    I am run­ning php site dis­play­ing html‑5 video and embed others
    like youtube.

    I tried above javascripts but does not work well. Espe­cial­ly my ver­sion of android stock safari brows­er run­ning on Sam­sung G. S2
    does not detect any­thing on the UA while if i switched to Chrome on the same device it does (strange!).

    So i come out with a mod­i­fied method that work well for me.

    Test­ed on: Win­dows XP chrome, Sam­sung Galaxy S2, iPad2.

    1. Let the php script which dis­plays my html‑5 videos detect brows­er UA.

    a. get this sim­ple php class to detect ua type (or any one available).

    b. Give dif­fer­ent video tag treat­ments if found to be android IOS and safari. (note chrome on android is work­ing per­fect­ly, so above meth­ods mem­tioned by a few, which test only for android will fail chrome on android, that’s why i use this approach togeth­er with onclick=‘; sug­gest­ed by FREDMC above, Thanks).

    if ( $detect_mobile->isSafari() AND $detect_mobile->isAndroidOS() )
    echo “”; }
    echo “”;
    and fol­lows by the usu­al video stuff.

    This works per­fect­ly for me on dif­fer­ent devices and PC using dif­fer­ent browsers.

    hope it helps.

  55. Soemthing was miss­ing in my post above.

    if detech to be safari and androd, i will insert this to video tag:


  56. […] If you expe­ri­ence prob­lems with MP4 video play­ing on ear­li­er ver­sion of Android you may wish to explore remov­ing the type attribute for the MP4 source – as sug­gest­ed in Peter Gasston’s post. […]

  57. Your demo runs on Ipad 2, I’d to run a sin­gle mp4 video file and per­foms OK when I touch the Ipad screen

  58. install vplay­er ver­sion 3.1.3

    Click on Video down­load Link, Android system,open with VPlayer

    it will stream it :)

  59. The movies works great on orig­i­nale brows­er on phone. My ques­tion is, how can I mod­i­fied a web­view, so it play that movies.

  60. An addi­tion­al con­sid­er­a­tion is that MP4 video that resides on a serv­er requir­ing authen­ti­ca­tion or in a pass­word pro­tect­ed fold­er will not work in Android Chrome (4.2). It will how­ev­er work using Fire­fox for android (diff for­mat as WebM but also not locked down as the MP4 evi­dent­ly is).

    You can how­ev­er have an HTML page con­tain­ing the video tag reside in a secure loca­tion as long as the fold­er where the video is does­n’t require authentication.

    It’s a messed up issue that I hope is resolved in lat­er ver­sions of Android Chrome …

  61. For the life of me I can­not get this to play on my android 4.0.4 tablet.

    I down­loaded the video, put the code on my page and tried play­ing it in a a phone­gap web­view, it just wont hap­pen! Any ideas? Can you make this play inside the webview?

  62. Im try­ing to start the video with a sim­ple once the page has loaded but this does not work. Any idea why? I mean whats the difer­ence? It works in my dek­top brows­er. Can you not do .play() with­out an event listener?

  63. As Stu­pid­i­an already point­ed this out a few years ago: the exam­ple code some­what breaks the HTML5 play­er of devices oth­er than the one tar­get­ed by the fix. So to do it cor­rect­ly, you’ve to check the User-Agent and apply the fix only for Android ver­sions 2.0.* — 2.2.*. The prob­lem got fixed in Android 2.3.

    A bet­ter exam­ple code could be like this:

    func­tion myOnload() {
    var ua = navigator.userAgent;
    if (type­of ua != “unde­fined” && ua.match(/Android.* 2\.[0–2](\.[0–9]+)*[^.0–9]/i) !== null) {
    var vid = document.getElementById(“video”);
    vid.addEventListener(“click”, function() {;
    }, false);
    window.onload = myOnload;

    Anoth­er issue many com­plained about is that (for them) the exam­ple does­n’t work at all on 2.2.* Android ver­sions, the play­back does­n’t start when you click the video. I had this issue on phones where JavaScript was dis­abled. Obvi­ous­ly your code won’t run in this case. To cov­er for this, you can add some warn­ing about the neces­si­ty of JavaScript for play­back in a NOSCRIPT tag below the JavaScript code.

  64. Thanks so much for your posts. I am hav­ing the same prob­lem play­ing HTML5 video on Android. My videos play on all browsers and iPod, but not Android (I have a Galaxy Tab 2 with Honeycomb). 

    I fol­lowed your advice on this post and your oth­er post about encod­ing video for Android but I haven’t got­ten it to work yet. My video encoder is called Mag­ix Pho­to­sto­ry. I set the the res­o­lu­tion to 480x272, the codec to MPEG‑4 H.264, the AVC pre­set to “Apple iPod” (which set the pro­file to base­line and the bit rate to 970kb/s). I set the out­put for­mat as MP4 for iPod and I even checked the box for mobile devices. The result­ing video still plays fine on all browsers (once con­vert­ed as appro­pri­ate to WebM or flash), but the darn thing still won’t play on Android.

    I fol­lowed the steps above for the HTML 5 code — not using the type attribute when call­ing the MP4 video and man­u­al­ly call­ing play(). Man­u­al­ly call­ing play() seemed to make mat­ters worse, since the con­trols attribute works OK on the Android (starts and stops play) and the play() com­mand seems to con­flict with that some. When I hit play on the video, it looks like it is just buffer­ing with the wheel going around and no pic­ture. I let it run a long time and it nev­er start­ed play­ing. I also made sure the meta data is in the front of the file (that was need­ed to get Safari to work properly).

    So, I am out of ideas. Do you have any oth­er sug­ges­tions? Would it be pos­si­ble for you to post a com­plete HTML file that works so I can check my code against it?

    Thanks again.

  65. Nev­er mind my last post. David Miller’s post below solved my prob­lem. My videos are on a pass­word pro­tect­ed page and they won’t play with Chrome or the Android default brows­er. As sug­gest­ed, I tried fire­fox and it worked like a charm. Thank you, David!!!!!

  66. […] Mak­ing HTML5 video work on Android phones. Le sigh. […]

  67. Hi Peter. I’m hop­ing the com­mu­ni­ty on this thread can help me. I’m try­ing to play a url to an .mp4 file with­in a Chrome brows­er on Android 4.1.2.

    When I click the link I get the play­back progress bar and when I click play I get audio but no video with­in the brows­er. When I click play fullscreen how­ev­er the video plays fine fill­ing the screen.

    Here is an exam­ple link which gives the issues above —

    I have tried your test com­par­i­son page ( and all videos play­back fine in fullscreen but just show a black screen with­in the browser.

    Any help with this issue would be great­ly appreciated.

  68. Chris, if you are not wed to Chrome, try Fire­fox. My video is stored on a pass­word pro­tect­ed web page; Fire­fox is the only brows­er I’ve found that can play it prop­er­ly on Android. If your video is not on a pass­word pro­tect­ed page, then this solu­tion may not work. But you might try it any­way to see if Fire­fox works.

  69. i m also try­ing to play local video files aler­ady added in my project assets/www/video/abc.mp4
    here is my post‑2–9

    but i did not get any answer can any­one help me how to encode video as i want to play videos for phone­gap Android api lev­el 8 or Android­Ver­sion 2.2 but i m unable to play even code is work­ing in brows­er but no video in device

  70. live RTSP video stream is still play­ing on the back­ground although brows­er is closed (i can hear the audio), only task manager->ram man­ag­er-> clear mem­o­ry stops it. any attempt to invoke pause,stop on video ele­ment fails. reoc­cur­ring on all Galaxy Sam­sung devices i have tested.
    any idea how to fix it ?

  71. I have a Sam­sung Galaxy Tab 2 and I’m try­ing to auto­mat­i­cal­ly play a video on an Android Appli­ca­tion, but I tried many codes but still, video does not Auto­play­ing. Would you please help me how. 

    Thank you.