IOS issue with menu overlaying HTML5 video
4657
£180(approx. $226)
- Posted:
- Proposals: 2
- Remote
- #81803
- Archived
Description
Experience Level: Expert
Hi
I have a PHP site with loads of Flash content and am using HTML5 Video with VideoJS (http://videojs.com/) as a fallback for non-Flash setups.
Having done the whole site and checked it successfully on every desktop browser, I now learn that iOS4.x on the iPad does not allow any links or click functions over the top of a <video> element. And, of course, my entire site's menu drops down over the video content!
However, if I remove the "controls" attribute on the video coding, the menu works fine on the iPad, but the video doesn't load - it just sits there forever with the "loading" icon rotating. What I think I need therefore (and I could be wrong) is some JS which means that, on mouseover of the menu and movie area, "controls" are temporarily removed as a video attribute so that the menu works - and are then restored on mouseout.
I have scoured the web but the closest I have come to a solution is the code on the attached img - which is the right idea but doesn't actually work. It might be a simple fix to make it work but JS is not my forte by any stretch of the imagination.
I am also using "autoplay" and "loop" on the video so I don't actually need the controls for any other browsers. Therefore an alternative might be some JS that forces the video to load, loop and autoplay on iOS without "controls" being enabled, but none of the fixes that I have found work beyond iOS3.x.
If you are a JS guru and familiar with iOS/HTML5 issues like this please help - you can probably make yourself v popular at the same time, as loads of people on the web blogs seem to be in the same situation!
Timing - asap - the site is behind schedule as it was supposed to launch on 4th July. Everything is ready bar this but it HAS to work on iPad.
I have a PHP site with loads of Flash content and am using HTML5 Video with VideoJS (http://videojs.com/) as a fallback for non-Flash setups.
Having done the whole site and checked it successfully on every desktop browser, I now learn that iOS4.x on the iPad does not allow any links or click functions over the top of a <video> element. And, of course, my entire site's menu drops down over the video content!
However, if I remove the "controls" attribute on the video coding, the menu works fine on the iPad, but the video doesn't load - it just sits there forever with the "loading" icon rotating. What I think I need therefore (and I could be wrong) is some JS which means that, on mouseover of the menu and movie area, "controls" are temporarily removed as a video attribute so that the menu works - and are then restored on mouseout.
I have scoured the web but the closest I have come to a solution is the code on the attached img - which is the right idea but doesn't actually work. It might be a simple fix to make it work but JS is not my forte by any stretch of the imagination.
I am also using "autoplay" and "loop" on the video so I don't actually need the controls for any other browsers. Therefore an alternative might be some JS that forces the video to load, loop and autoplay on iOS without "controls" being enabled, but none of the fixes that I have found work beyond iOS3.x.
If you are a JS guru and familiar with iOS/HTML5 issues like this please help - you can probably make yourself v popular at the same time, as loads of people on the web blogs seem to be in the same situation!
Timing - asap - the site is behind schedule as it was supposed to launch on 4th July. Everything is ready bar this but it HAS to work on iPad.
Andrew S.
100% (1)Projects Completed
3
Freelancers worked with
3
Projects awarded
60%
Last project
1 May 2018
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies