Hi,
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?
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
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:
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>
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();"/>
I've just done some experimentation with this, and from what I can tell you need three things:
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(){
document.play();
},false);
I tested this on a Samsung Galaxy S and it works fine.
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.
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/
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