html5 video to play on android and iphones

[yandoo]

Hiya I've been searching for an encompassing solution to a problem for 2 days now and was wondering if anybody could shed some light on it?

 

I've setup a html5 video to play on various web browsers and finally got it to work for android phones. I also use flash for older browsers that will not work with the html5 code.

 

Android seems to be the most tricky as it requires js to call the video to play. Furthermore Its worth noting as far as I have seen that android doesnt even support https video streaming which is a nightmare and pretty short sighted of them.

 

Heres the working code so far:

<script>
function vidEvent() {
	var videos = document.getElementsByTagName('video');
	var vidCount = videos.length;
	for(i=0;i<vidCount;i++) {
		videos[i].addEventListener('click',bang,false);
	}
}
function bang() { this.play(); }
window.onload = vidEvent;
</script>


<video width="560" height="320" autoplay="autoplay">
<source src="videos/Landing-Page.mp4" type="video/mp4" />
<source src="videos/Landing-Page.mv4" type="video/mv4" />
<source src="videos/Landing-Page.ogv" type="video/ogg" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="560" height="320">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="videos/player.swf" width="560" height="315">
<!--<![endif]-->
<param name="movie" value="videos/player.swf" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#FFFFFF" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<param name="flashvars" value="vdo=videos/Landing-Page.flv&autoplay=true" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>

Ok so it works on android phones (galaxy  s i9000) and works in FF (if http NOT https), Chrome, IE and Safari (on my laptop). It doesn't seem to work on iphones at all so would assume thats the same for ipads.. Can you see anything obviously wrong with my code? I wonder if the js is causing the problem with iphone.

 

Does any body know of a workable solution where a html5/flash video can be embeded on a website to be able to play on iphone/ipad, kindle, android and desktop/laptop older browsers.

 

If anybody can shed any light on this I would so happy because this is just a mine field.

 

Thank you