Jump to content

html5 video to play on android and iphones


yandoo

Recommended Posts

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.