I wonder if anyone can help here. On my website, I have a video on the main page that was configured using the HTML 5 tag. The video runs correctly with the standard range of browsers - BUT
My iPad and iPhone show slash videos through the play button.
OK - 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 that my Wi-Fi connection dropped and it was playing through a 3G connection. I thought I hacked it, but when I connect via WiFi, it does not play.
Just to check that I have some friends with iPads / iPhones to check, and when connected via 3g to iPhone the video works. (I don't know anyone with an iPad with 3G). With an iPhone or iPad via Wi-Fi, this is not the case.
I think this may be a server configuration problem (apache), but I'm afraid here.
The video is embedded with an HTML5 video tag as shown 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 on the joomla site in a modular position, but since it is working on 3g, I don't think this is causing the problem. Website www.livingdisplay.com
Can anyone keep my sanity since I really don't know where to start looking for this?
source
share