I recently became the owner of an Android phone* and found that, despite it being listed as a feature of the browser, the HTML5 video element didn’t work for almost all of the examples I tried. I’ve just done some experimentation with this and think I’ve found a solution, so this post is offered in the hope that it helps anyone who may be tearing their hair out over the same problem.
From what I can tell, there are three requirements for video to work in Android browsers:
- You must not use the
typeattribute when calling the video - You must manually call the
play()method using JavaScript The video must be encoded as .m4v, not .mp4Update: This is not correct (see below)
Update: This may be a specific encoding issue rather than all .mp4s; some .mp4 videos seem to play with no problems, others do not. Further update: The video type was a red herring; see my follow-up post, Encoding Video for Android, for more about this.
You can see this working in the demo attached to an older post of mine: Demo: HTML5 Video Controls With JavaScript. This works,
<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"> </video>
The first source element calls the video in .m4v format, without specifying the MIME type in the type attribute; I’ve tried both video/mp4 and video/x-m4v, and neither works. Omitting the type attribute altogether lets the video play, and seems to have no ill-effect on other browsers which play the .m4v file.
In order to play the video in Android, I also have an event listener in the JavaScript which plays the video when the element is clicked on, somewhat like this:
var video = document.getElementById('video');
video.addEventListener('click',function(){
document.play();
},false);
I tested 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 Samsung Galaxy S, and I’m delighted by it.
It’s hard to believe that HTML5 video is still so badly broken in Android, even in the latest version. This should have been working since version 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 incompetence with HTML5 video on Android. Where does one file a bug?
Kroc Camen [July 11th, 2010, 1:42 pm]
Hi Kroc, I’ve added this blog post to an open bug, number 8272 — I encourage you to do the same.
Peter [July 14th, 2010, 12:09 am]
@KROC_CAMEN — HTML5 video support isn’t perfect, but the example doesn’t work on iPhone. Maybe you should check next time before going on a rant and spouting bullshit.
Justin [July 21st, 2010, 6:43 pm]
Wait; my example doesn’t work on iPhone? It certainly did when I checked it. Are you using iOS3? There’s a well-known bug with that, where the
posterattribute causes problems.Also, please try to be civil.
Peter [July 21st, 2010, 7:01 pm]
are there any special settings to encode the video with? The Javascript works fine, but as soon as I click the icon I get a message telling me “Video can not be displayed. This video is not a valid streaming media format”. Any ideas what might be wrong with the video (it’s a .m4v Format). Thanks!
Kirsten [July 26th, 2010, 1:02 pm]
Hi Kirsten,
Thanks for the comment. Your result is interesting, because I don’t get that message at all; I get the same message on some .mp4 files. What phone and version of Android are you using? I’m going to look into this further.
Peter
Peter [July 26th, 2010, 1:51 pm]
Hi Peter,
thanks for the quick reply. I am using the HTC Desire with the current standard version Android 2.1 update1. I tried various encoding settings. There was no chance with the mp4 encoding, as you have written. I use ISkySoft as converting software and the encoding settings were: M4V –MPEG — 4Video(*.m4v), Codec: H.264
Any idea? The alternative .ogv File is available as download only.
Thanks in advance! Kirsten
Kirsten [July 27th, 2010, 10:18 am]
Kirsten,
I’m going to put together a test page, and we’ll see if we can get to the bottom of this.
Peter
Peter [July 27th, 2010, 3:09 pm]
Kirsten, could you take a look at this test page:
http://broken-links.com/tests/video/comparison.html
And let me know which of the videos (A,B,C,D) works for you? I’ve got a fairly good idea of what the problem is now, but want confirmation.
Peter
Peter [July 27th, 2010, 10:16 pm]
Hi Peter, Video A and B worked perfeictly. With C and D I got the same error message as with my movie. I am looking forwarnd to your answer. Kirsten
kirsten [July 28th, 2010, 9:13 am]
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 autobuffer (or preload).
On iPhone, you can press PAUSE and wait the player buffer the video. Then you can watch whole video without delay.
On Android, even you press PAUSE, but it just buffer 1/20 of video and stop buffer.
THen you watch video, if your internet is slow, the video will be delay to load… many times.
Please help me to solve this problem.
I am trying to find the solution for this whole week, but i still can not find out…
Please…
Thank you very much.
Regards,
Cuonga
MiniHD.mobi [July 28th, 2010, 6:41 pm]
@Kirsten: OK, so all four test videos were encoded using http://handbrake.fr; the only difference is that A & B used the ‘web optimized’ setting, C & D didn’t. I don’t know exactly what that does (rearranges the MP4 files so they stream better, from what I can tell) or how to make this happen in other encoding applications, but in the short term this will help you encode video. In the longer term, I’m going to look into this some more.
@MiniHD.mobi: I don’t get that problem on my Samsung Galaxy; may be a phone issue rather than an Android issue? What version of Android are you on? (Also I prefer if you use a name or nickname rather than a company name; it makes it harder to tell spam from genuine comments if you use your company name as your user name).
Peter [July 28th, 2010, 10:38 pm]
Hi Peter
Thanks for the great info. Can I ask you a question please.
I’ve made a simple html5 video page. Please see the code below
#script#
var video = document.getElementById(‘video’);
video.addEventListener(‘click’,function(){
document.play();
},false);
#/script#
#video width=“320” height=“240” poster=“poster.png” autobuffer controls#
#source src=“TV_intro.m4v”#
#source src=“TV_intro.mp4” type=“video/mp4”#
#source src=“TV_intro.ogv” type=“video/ogg” /#
Download the #a href=video.ogg#video#/a#
#/video#
But it doesn’t work on my htc desire though.. Can you kindly have a look at my code if I’ve done anything wrong? It works on iPhone.
Thanks in advance
ps. I just changed the mp4 extension to m4v to make m4v file as I read it works this way. No?
Jun
Jun [July 29th, 2010, 3:09 pm]
@Jun: As mentioned, it also depends on the way the video is encoded; see my comment to Kirsten, above.
Peter [July 29th, 2010, 3:27 pm]
Hi Peter
Thanks for the rapid reply. So do you think that the html itself is fine?
Thanks
Jun
Jun [July 29th, 2010, 3:29 pm]
Yes, the HTML seems fine; you just need to encode the video correctly. Try using Handbrake, and set the ‘web optimized’ option.
Peter [July 29th, 2010, 3:48 pm]
hmmmm.…Yes I used Bandbrake with ‘web optimized’ checked. but no luck yet.. maybe need more googling.. haha
it must be simple just don’t know what it is.
Thanks
Jun [July 29th, 2010, 4:13 pm]
Hi Peter
The reason was javascript. Once changed js it works. but only sound. screen is just black. one solved but another came out. Any idea? Anyway will post if there’re any outcomes for other people who have the same issue.
Jun [July 29th, 2010, 4:25 pm]
Hi Peter,
I changed the encoding as you said and now it does work perfectly. Thank you very much for your quick replies!
Kirsten [July 30th, 2010, 6:15 am]