Hi guys,
I can't seem to find the answer to this problem.
On the iPad and iPhone, the JWPlayer uses HTML5. I have a normal HTML/CSS drop down menu above the video - when you roll over the drop down menu items, it is not "clickable" - the z-index is correct and all looks great, but anything that is part of the menu that is overlaying the video, renders quiet blurry and can't be clicked on.
Can someone help shed some light on the problem?
"Where is the Beef", can you provide a link?
Sure - here is a prototype: http://test.vuu.co
Drop down menu works correctly on Opera, Safari, IE7, IE8, IE9, Firefox and Chrome.
When you view it on the iPad and iPhone - all looks great as well. But any drop down links overlaying on top of the video does not work.
@David Smith – This is an iOS issue in general.
In iOS, any element that is over the <video> tag is not clickable. It happens with the regular <video> tag too. There isn’t anything we can do about this, unfortunately.
Wow, that is very unfortunate :(
Yeah, it is :( , believe me, I have been fighting with iOS for weeks on several issues like this…
Maybe this could help?
http://stackoverflow.com/questions/3007797/ipad-iphone-html5-video-loading
@Aidil – Thanks. I saw that solution. It doesn’t work for me because I am writing a plugin and I can’t use jQuery though :\
I'm running into this issue on a Wordpress based JWPlayer installation. Funny thing is - I'm sure I didn't have this problem earlier in the year??? Is it a recent iOS implementation?
Anyone have any other ideas for how it can be fixed?
I'm looking to do something similar to the stockoverflow solution above as a temp workaround. Here's the site in question: testtrack.tv
Basically, when the user clicks the 'videos' link (.nav2), disable the <video> tag controls attribute and then re-apply it when a user mouses out. The code needs tweaking but I can't even find the <video> element:
bc.. $().ready(function() {
$(".nav2").click(function()) {
$("video").removeAttr("controls");
}
$(".sub").mouseout(function()) {
$("video").attr("controls");
}
});
When viewing the source, I can't see the HTML5 <video> wrapper for the HTML5 version of the YouTube embed. Does JWPlayer switch the Flash version out for the HTML5 in JavaScript?
Yes it does, through the JW Embedder. It will embed the right method based on what mode the player is in.
Hi Ethan, well, removing the controls attribute doesn't seem to work anyway.
If you take a look at www.testtrack.tv on an iPhone or iPad and click the 'videos' link in the navigation you'll see the menu opens behind the video.
If you look in a browser without Flash and click there it opens in front (and using Firebug or similar you can see that clicking Videos is removing the 'controls' attribute within the <video> tag).
So, are there any other known workarounds for this?
Well, in case this helps anyone in future I have a hacky way of solving it. I've basically elected to hide the video holder div when the menu trigger is hovered over. I've also done a little agent sniffing which I know isn't bullet-proof but should sort most cases.
bc.. if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
jQuery(function() {
jQuery(".nav2").hover(function() {
jQuery("#jwplayer-1-div").toggle();
});
});
};
Cool, glad you got that sorted!
On the IPAD using jwplayer 5.7.1896 --
I was able to use
$("video").removeAttr("controls");
to get a video dialog overlay to be clickable.
BUT I have a problem with the dialog displayed over youtube videos on the IPAD, in this case the dialog is behind the videoplayer and I cannot figure out how to get it to overlay the video. z-indexing does not seem to work nor does a lot of other recommendations I've found. If anyone has any suggestions I would appreciate. thanks
This is because in iOS the <video> tag takes control of every click anywhere over the player display space. Apple enforces this.
Can you explain why I get a different behavior for Youtube videos than I do for something else like e.g. feeds.reuters.com.....
With youtube videos the dialog is overlayed by the video and I don't see the dialog. with reuters or something other than youtube I see the dialog - it is not overlayed bu the video and they both have the <video> tag
thanks
Do you have an example of this?
Here is an example:-
On an IPAD using safari - You will need to log into my test account.
go to http://my.twonky.com
on the top right of the screen select "sign in"
username: sagherdi46
pass: asdfgh
you should be on the home screen which is my.twonky.com/video
half way down the screen on the left there is "My Bookmarks", select the reuters.com video
on the video player screen click the play icon in the centre of the player, once the video starts playing select the button "Bookmarked" below the video - you should see a dialog asking you to confirm deletion of the bookmark -- here the buttons are not clickable but I am able to fix with the hack to remove controls.
Now hit the back button to go back to the video home screen, select the youtube video under the "My bookmarks" title and repeat the steps as before on the player page. you will see that the confirm delete dialog is hidden by the video -- zoom in and you'll see the dialog appearing from beneath the video.
Can you explain why there is this difference with youtube and how to possibly get the dialog to overlay the video ??
thanks.
Hi Ethan, another question in addition to above...I tried using youtube iframe code which works and displays the dialog correctly over the video BUT the buttons are not clickable - is there a fix for this perhaps ? thanks
@Shireen – Email me, I might have a fix – ethan [at] longtailvideo [dot] com, thanks.
