Android5 HTML5 <video> element not playing

Question

The video tags as shown below are great for 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 cannot even click the clip. He just sees the image of the poster.

The video tag as shown below works with Android:

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

However, I still need to use multiple sources (to support Firefox ogv ...). Below code does not work (and they do not work if I attach javascript to 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> 

Using the code above, a clip can be clicked on Android, but it does nothing.

Can anyone help?

Answer 1

Try removing codecs from the source lists .. It’s possible that the codecs you are listing are not present on Android, so they are suffocating.

If you use the src attribute, it will automatically detect the codec, so it uses something else :)