Pages

Sunday, March 3, 2013

Weird iPhone/iPad Video on Website Issue

Hi Guys & Gals,

 

Wonder if anyone can help here. On my website, I have a video on the front page, which has been set up with the HTML 5 video tag. The video performs correctly with the standard range of browsers - BUT

 

My iPad and iPhone show the video with a slash through the play button.

 

O.K. - I thought, I must have messed up the encoding of the MP4 file, so I re-encoded it several times, but it still won't play.

 

Then it started working on my iPhone - but I noticed my Wifi connection had dropped and it was playing it through a 3G connection. I thought I'd cracked it - but when I connect via WiFi it does't play.

 

Just to check I got a few friends with iPads/iPhones to check, and when connected over 3g on an iPhone the video works. (I don't know anyone with iPad with 3g). With iPhone or iPad over Wifi it doesn't.

 

I'm thinking it may be a server configuration issue (apache) but I'm struggling here.

 

The video is embedded with the HTML5 video tag as below:

 

<div align="center">

    <video width="688px" height="384px" autoplay="autoplay" loop="loop" controls="controls"poster="media/video/lvposter.jpg">

        <source src="media/video/livingdisplayvideo.mp4" type="video/mp4" />

        <source src="media/video/livingdisplayvideo.webm" type="video/webm" />

        <source src="media/video/livingdisplayvideo.ogv" type="video/ogv" />

    video>

div>

 

It is in a joomla site in a module position, but since it works over 3g, I don't think that this is causing the issue. The site is www.livingdisplay.com

 

 

Can anyone save my sanity, as I really don't know where to start looking to resolve this ?

 

 

Thanks in advance,

 

 

Mike.


View the original article here

0 comments:

Post a Comment