According to:

http://developer.android.com/sdk/android-2.0-highlights.html

Android 2.0 should support the HTML5 video element. I haven't been able to get this to work using a Motorola Droid, and haven't been able to successfully view a video on any of the HTML5 video example pages out there. Since there currently isn't support for QuickTime or Flash, this is the only other thing I can think of for embedding mp4 video in a web page. Has anyone had any luck with this?

2 upvote
  flag
I have a Droid as well, and haven't been able to get html5 videos to play. Even the "video for everybody" site doesn't work. – haxney
upvote
  flag
"video for everybody" redirected to some silly frontpage for me--I couldn't even attempt to view but the one demo on that page! – jmans
upvote
  flag
Place videos in internal/external file system and access it. Example:-- <video controls='controls'> <source src= "file:/storage/sdcard0/video_name.mp4" type='video/mp4'>; </video> – user915267

14 Answers 11

It's supposed to work, but watch the resolution: Android 2.0 and webkit

Canvas works right out of the box, while Geolocation seems to not work at all in the Emulator. Of course, I have to send it mock locations to get it to work, so I have no idea what this would be like on an actual phone. I can say the same thing with the video tag. There are issues with it not actually playing the video, BUT I think it’s the fact that the video is a higher resolution than what the Emulator can handle. We’ll know more once someone tries this on a Motorola Droid or other next-gen Android device

upvote
  flag
I'll try messing around with the resolution, but I am using an actual device, and the video stream (a webcam) is pretty lowres. – jmans

Maybe you have to encode the video specifically for the device eg:

<video id="movie" width="320" height="240" autobuffer controls>
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>

There are some examples of encoding configurations that worked on here:

https://supportforums.motorola.com

If you manually call video.play() it should work:

<!DOCTYPE html>
<html>
<head>
  <script>
    function init() {
      enableVideoClicks();
    }

    function enableVideoClicks() {
      var videos = document.getElementsByTagName('video') || [];
      for (var i = 0; i < videos.length; i++) {
        // TODO: use attachEvent in IE
        videos[i].addEventListener('click', function(videoNode) {
          return function() {
            videoNode.play();
          };
        }(videos[i]));
      }
    }
  </script>
</head>
<body onload="init()">

  <video src="sample.mp4" width="400" height="300" controls></video>

  ...

</body>
</html>
2 upvote
  flag
This gets me to a film icon that I can click on to view the MP4 in the video app, but still doesn't give me inline video. – jmans
upvote
  flag
Inline video is supported as of Android 3.1. – Roman Nurik
upvote
  flag
it works on the default browser, not inside a webview – Panthro
upvote
  flag
Can anyone confirm that this works on a honeycomb+ device? I could not make it work on 3.2. I can hear the sound, and do not see any video. – dongshengcn

Roman's answer worked fine for me - or at least, it gave me what I was expecting. Opening the video in the phone's native application is exactly the same as what the iPhone does.

It's probably worth adjusting your viewpoint and expect video to be played fullscreen in its own application, and coding for that. It's frustrating that clicking the video isn't sufficient to get it playing in the same way as the iPhone does, but seeing as it only takes an onclick attribute to launch it, it's not the end of the world.

My advice, FWIW, is to use a poster image, and make it obvious that it will play the video. I'm working on a project at the moment that does precisely that, and the clients are happy with it - and also that they're getting the Android version of a web app for free, of course, because the contract was only for an iPhone web app.

Just for illustration, a working Android video tag is below. Nice and simple.

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
upvote
  flag
there are weird problems with this on desktop browsers--in chrome and firefox, if you use the controls attribute, the onclick event is bypassed when you press pause (so the video actually gets paused), but somehow when you click play nothing happens--you have to click in the video (not on the actual play button) to get the video to resume. – Kip
upvote
  flag
This works. I can play h264 videos on Android. The files have the suffix mp4. – neoneye
up vote 77 down vote accepted

I've just done some experimentation with this, and from what I can tell you need three things:

  1. You must not use the type attribute when calling the video.
  2. You must manually call video.play()
  3. The video must be encoded to some quite strict parameters; using the iPhone setting on Handbrake with the 'Web Optimized' button checked usually does the trick.

Have a look at the demo on this page: http://broken-links.com/tests/video/

This works, AFAIK, in all video-enabled desktop browsers, iPhone and Android.

Here's the markup:

<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>

And I have this in the JS:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

I tested this on a Samsung Galaxy S and it works fine.

1 upvote
  flag
The demo doesn't seem to work on my Nexus One (nothing happens when I tap "Play") – itsadok
1 upvote
  flag
BTW the link you gave is not working on a 2.3.3 Nexus One, message: this video cannot be played – Panthro
upvote
  flag
@RafaelRoman I have included and answer, that will hopefully work in Nexus One (at least it did for me): //allinonescript.com/a/8952025/1108032 – Boris Strandjev
upvote
  flag
I cannot get this to work on my 4.0.4 tablet device. I think native is the way to go – Harry
upvote
  flag
This demo is not working in my lenovo s850. please let me know is there any way to play video in android native player? – vipin
upvote
  flag
Point #3 is what did it for me. I don't know what handbrake is doing under the hood when you check 'web optimized' and enable for iPod, but that does the trick for me. – Jason Sultana
upvote
  flag
According to android documents, you should use Baseline Profile (BP) for MP4. check this: developer.android.com/guide/appendix/media-formats.html#core – ray pixar
upvote
  flag
Does not work on Android 5.x, video is black until play is clicked – FiringSquadWitness
upvote
  flag
I'm not sure if you're just using this as background, but just in case someone lands on this question, as I did, I was able to get mine working by making sure both autoplay AND muted were on the video tag. – Jonathan Bowman

This might not exactly answer your question, but we're using the 3GP or 3GP2 file format. Better even to use the rtsp protocol, but the Android browser will also recognize the 3GP file format.

You can use something like

self.location = URL_OF_YOUR_3GP_FILE

to trigger the video player. The file will be streamed and after playback ends, handling is returned to the browser.

For me this solves a lot of problems with current video tag implementation on android devices.

upvote
  flag
Hi, i tried this one using the android WebView, but it doesn't work, is there any other settings i have to do? I'm using the code in this link . – Kris
upvote
  flag
No, I don't know any other way to achieve this. – leviathan

pointing my android 2.2 browser to html5test.com, tells me that the video element is supported, but none of the listed video codecs... seems a little pointless to support the video element but no codecs??? unless there is something wrong with that test page.

however, i did find the same kind of situation with the audio element: the element is supported, but no audio formats. see here:

http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/

upvote
  flag
same for me with html5test.com on SGS 2.1update1. Did you find a way to embed video yet? When I open the test site broken-links.com/tests/video and click on the play icon, the video plays but not embedded (as on desktop/Firefox) but opening in the media player. – Mathias Conradt
upvote
  flag
Same here on my LG Optimus Black... but the demo on broken links works. I'll try to encode with handbrake. – Pier
upvote
  flag
It worked encoding the video with Handbreak. – Pier

Nothing worked for me until I encoded the video properly. Try this guide for the correct handbrake settings: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

upvote
  flag
Fixed the problem for me as well. But mpeg4 didn't work for other browsers, so I created 2 video layers. First mpeg4 and then h264: <video width="480" height="386" autoplay loop muted playsinline> <source src="assets/chat_letter_mpeg4.mp4" type="video/mp4"> <!-- MPEG4 for android --> <source src="assets/chat_letter_h264.mp4" type="video/mp4"> <!-- h264 for everything else --> <img alt="" src="assets/chat_letter.png"> <!-- image as fallback for IE8 --> </video> – yodalr

HTML5 is supported on both Google (android) phones such as Galaxy S, and iPhone. iPhone however doesn't support Flash, which Google phones do support.

upvote
  flag
Google phones dropped Flash in Android 4.0 (ICS), and this question wasn't about iPhone anyway. – greg.kindel

Try h.264 in an mp4 container. I've had much success with it on my Droid X. I've been using zencoder.com for format conversions.

Here I include how a friend of mine solved the problem of displaying videos in HTML in Nexus One:

I never was able to make the video play inline. Actually many people on the internet mention explicitly that inline video play in HTML is supported since Honeycomb, and we were fighting with Froyo and Gingerbread... Also for smaller phones I think that playing full screen is very natural - otherwise not so much is visible. So the goal was to make the video open in full screen. However, the proposed solutions in this thread did not work for us - clicking on the element triggered nothing. Furthermore the video controls were shown, but no poster was displayed so the user experience was even weirder. So what he did was the following:

Expose native code to the HTML to be callable via javascript:

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

The code itself, had a function that called native activity to play the video:

public class JavaScriptInterface {
    private Activity activity;

    public JavaScriptInterface(Activity activiy) {
        this.activity = activiy;
    }

    public void startVideo(String videoAddress){
        Intent intent = new Intent(Intent.ACTION_VIEW);
        intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
        activity.startActivity(intent);
    }
}

Then in the HTML itself he kept on failing make the video tag work playing the video. Thus, finally he decided to overwrite the onclick event of the video, making it do the actual play. This almost worked for him - except for no poster was displayed. Here comes the most weird part - he kept on receiving ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" every time he set the poster attribute of the tag. Finally he found the issue, which was very weird - it turned out that he had kept the source subtag in the video tag, but never used it. And weird enough exactly this was causing the problem. Now see his definition of the video section:

<video width="320" height="240" controls="controls" poster='poster.gif'  onclick="playVideo('file:///sdcard/test.3gp');" >
   Your browser does not support the video tag.
</video>

Of course you need to also add the definition of the javascript function in the head of the page:

<script>
  function playVideo(video){
    window.JSInterface.startVideo(video);
  }
</script>

I realize this is not purely HTML solution, but is the best we were able to do for Nexus One type of phone. All credits for this solution go to Dimitar Zlatkov Dimitrov.

upvote
  flag
I had to add the javascript function playVideo(videoName) with reference to JSInterface to get this working - might not be apparent to people who haven't used this technique before. Also I preferred to build the full path with getExternalDirectory() in the startVideo function with only the name of the file passed in from Javascript. Worked for me except that the poster image disappears when the video activity closes and the WebView gets back focus (my WebView is embedded in a ViewPager). Thanks. – alan-p
upvote
  flag
Thank you for the comments. I have added the javascript call script, ad also completely agree with the comment of the video path construction, however I assume this is something everybody can fix for his needs, – Boris Strandjev
upvote
  flag
I had the "Null or empty value for header Host" error too. It was the unused source tag. This source tag is actually used by the ios app (phonegap app), so now I'm inserting the source tag on ios only and it's working fine. thanks for helping with this weird issue. – Guillaume Gendre

This works for me:

<video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>

Only when the .mp4 is on top and the videofile is not to big.

According to : //allinonescript.com/a/24403519/365229

This should work, with plain Javascript:

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") {
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") {
    myVideo.mozRequestFullScreen();
}

You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing. Tested with the latest version of Android Browser, Chrome, Safari.

I've tested it on Android 2.3.3 & 4.4 browser.

After much research, in many different devices, up to now, I've reached the simple conclusion that MP4 is much less supported than MOV format. So, I'm using MOV format, which is supported by all Android and Apple devices, on all browsers. I've detected weather the device is a mobile device or a desktop browser, and set the SRC accordingly:

if (IsMobile()) {
    $('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
    $('#vid').attr('src', '/uploads/' + name + '.webm');        
}

function IsMobile() {
    var isMobile = false; //initiate as false

    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
                || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
    return isMobile;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.