HTML5 <video> element on Android does not play

Question

Video tags like below plays fine with iPhone, but not Android:

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

With the above code, Android can't even click the clip. It would just see the poster image.

Video tag like below however works with Android:

<video src="vpr6.mp4" poster="video/placeholder.jpg" onclick="this.play();"/>

However, I still need to multiple sources capability (for Firefox ogv support…). Below code does not work (nor do they work if I stick the javascript into the source tags):

<video id="video" width="320" height="240" autobuffer controls onclick="this.play();">
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>

With above code, the clip is clickable in Android, but still does nothing.

Can anyone help?

Answer 1

Try to remove the codecs from the source listings.. It might be that the codecs you're listing are not present on Android, so it's choking.

If you use the src attribute, it'll auto-detect the codec, so it's using something else :)