PDA

View Full Version : AnyLink Menu Hides Behind Movie



vlane95678
09-23-2011, 05:12 PM
1) Script Title: AnyLink JS Drop Down Menu v2.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: Menu is hiding behind MP4 movie

I hate having to post again, but we got help here when the menu was hiding behind a flash element, but now we have changed the video to a .mp4. I've set the z-index to 1000, and I have added <param name="wmode" value="transparent"> to the Object tag and wmode="transparent" to the Embed tag, but the menu is still behind the movie in Chrome, IE, and Safari.

Arrgh! It seems like such a simple concept but it is not working for me again. Can someone PLEASE look at my code and let me know what might be causing this? Thanks so much!


###################################

<OBJECT ID="MediaPlayer" WIDTH="563" HEIGHT="275" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="/clients/pas/videos/home-movie.mp4">
<PARAM name="autostart" VALUE="true">
<PARAM name="ShowControls" VALUE="false">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<param name="wmode" value="transparent">

<EMBED TYPE="application/x-mplayer2" SRC="/clients/pas/videos/home-movie.mp4" NAME="MediaPlayer" wmode="transparent" WIDTH="563" HEIGHT="275" ShowControls="0" ShowStatusBar="0" ShowDisplay="0" autostart="1">
</EMBED>

</OBJECT>

azoomer
09-23-2011, 05:37 PM
Have you tried
<param name="wmode" value="opaque">
and
wmode="opaque"

vlane95678
09-27-2011, 01:47 AM
1) Script Title: AnyLink JS Drop Down Menu v2.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

3) Describe problem: Menu is hiding behind MP4 movie

I hate having to post again, but we got help here when the menu was hiding behind a flash element, but now we have changed the video to a .mp4. I've set the x-index to 1000, and I have added <param name="wmode" value="transparent"> to the Object tag and wmode="transparent" to the Embed tag, but the menu is still behind the movie in Chrome, IE, and Safari.

Arrgh! It seems like such a simple concept but it is not working for me again. Can someone PLEASE look at my code and let me know what might be causing this? Thanks so much!


###################################

<OBJECT ID="MediaPlayer" WIDTH="563" HEIGHT="275" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="/clients/pas/videos/home-movie.mp4">
<PARAM name="autostart" VALUE="true">
<PARAM name="ShowControls" VALUE="false">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<param name="wmode" value="transparent">

<EMBED TYPE="application/x-mplayer2" SRC="/clients/pas/videos/home-movie.mp4" NAME="MediaPlayer" wmode="transparent" WIDTH="563" HEIGHT="275" ShowControls="0" ShowStatusBar="0" ShowDisplay="0" autostart="1">
</EMBED>

</OBJECT>

vlane95678
09-27-2011, 01:49 AM
I tried making wmode opaque and it did not work. Please help!!!!!

vlane95678
09-27-2011, 01:50 AM
Yes I did and that did not work. Please help!!!

jscheuer1
09-27-2011, 02:03 AM
If it were Flash, using wmode transparent or opaque would have the same effect here. They only differ in how the background of the Flash is rendered. Both allow other content to appear over the Flash.

But that's not Flash. As far as I know there's no corresponding param/attribute for Media Player. My advice would be to convert your movie to Flash. Or move it away from the menu in the layout.

You can upload the mp4 file to YouTube and they'll convert it for you, even host it privately or publicly for you if you like.

vlane95678
09-27-2011, 02:54 AM
The problem is we cant convert to flash because then it cannot be viewed on mobile devices and tablets. We are trying to stay far away from flash.

We cannot re-design the whole thing either to move it away from the movie object. It's 99% done.

Maybe another drop menu might work.

jscheuer1
09-27-2011, 05:43 AM
I just Googled:

mediaplayer object wmode equivalent

and found:

http://stackoverflow.com/questions/6885550/windows-media-player-object-z-index

According to it using:


<param name="windowlessVideo" value="true" />

for the object tag and the attribute:


windowlessVideo="true"

for the embed tag will do it.

vlane95678
09-27-2011, 09:54 PM
It will try that and post my findings so it might help someone else. IF I knew the keywords to type in Google then I am sure I could have found that solution as well. Thanks for the extra work and let's see if they are right....

djr33
09-27-2011, 11:25 PM
I don't have much experience with windows media player plugins in browser, but I have found that in some Quicktime videos the image is directly played through video memory, bypassing the regular image output. For example, the video is not seen in screen captures [there are other ways around that, but those aren't relevant to this question]. This does not happen on a Mac, but it does using Windows. So, that means that in some cases it may actually be "physically" impossible to place the video behind a menu because the video is being generated on top of everything else. (I'm not sure if some programs might be able to work around this by hiding part of the video if it should be "behind" something else, such as when the window is narrow and only half of the video is visible, but it might not be possible using HTML to override any of that.)

vlane95678
09-27-2011, 11:27 PM
Well that wroked for IE 9 but it is still hiding behind the menu in Chrome and Safari :(

I am starting to think this might be true and we dont want to use QuickTime because they make you surrender your email address in order to get the download.

jscheuer1's suggestion did work for IE9 but the menu is still behind the movie in Chrome and Safari.

djr33
09-28-2011, 03:07 AM
I'm not claiming this is true (or not) for your page. I'm just mentioning the possibility. I realized I made a mistake earlier: it's because it plays through video memory (but the situation is otherwise as I said).
QuickTime doesn't actually require an email. As far as I remember the form allows you to click submit without typing anything. I'm not sure that's actually within their TOS, but the form is annoying and it would be easy for them to actually require an email if they really wanted to. It's free software anyway.
But that's irrelevant if you're using Quicktime on your site. Aside from testing, there's no need that you even have it installed-- what matters is your visitors (potentially including yourself).
I'm not suggesting you switch to QT either. I was just mentioning a possibility. And as I said, maybe browsers do have a fancy way to work around that, but if you can't find a solution, maybe it really isn't possible. You could always contact the plugin software company-- in this case, Microsoft.

jscheuer1
09-28-2011, 04:27 AM
Are you sure you applied the attribute to the embed tag? That's what those other browsers use. With that sort of syntax, only IE uses the object tag.

But you may have. The plugins for Media Player for other browsers just aren't as advanced as those for IE. They might not even be written by MS. MP and IE are both MS products. Given the culture at MS, it makes sense that the two would work together better than on other browsers.

If you did and cleared the browser cache and refreshed the page and it still didn't work, for now I'd say just move it away from the menu.

Daniel, in another thread didn't you mention a tool for video that detects platforms and uses what's available?

I may have misunderstood, but that's the sort of thing that's required. Still, I doubt it has the kind of integration that Flash has. At least not yet.

djr33
09-28-2011, 05:17 AM
The tool I mentioned is just for audio, unfortunately. Maybe it would eventually work for video too, but that would be difficult with differently sized videos, etc.

If Windows Media plugin doesn't work in this case, then the best solution for embedding video is probably Flash. It's the most well supported on all platforms and is integrated enough with the browsers that menus can probably go above it in all (or almost all??) cases.


Extra information about various alternative formats below. Feel free to ignore it if you can't or don't want to change formats at the moment. It's good to have an idea about what's out there. Window Media (WMV) is very incompatible; AVI (which usually can play in WMP) is more supported, but not always available (for example iPod/iPad, as explained below).

The main downside to Flash is that there are a few systems that don't yet support it, such as probably some versions of Linux and the non-computer Apple devices-- iPads, iPods, and maybe some other brands of mobile phone. For these cases, my strong recommendation is Quicktime, since most of the users who don't have Flash will be using Apple devices with Quicktime installed by default. In fact, I'd also strongly recommend Quicktime over Windows Media for a number of reasons (mostly that Window Media only works well on Windows and has very limited if any support on other platforms).
The most cross-browser solution would be to link directly to the video file so the browser can do whatever the default is; or create a script that checks what plugins are available (as soundmanager2 does with audio) and use whatever is available such as WM or QT plugin, or Flash, or even HTML5 <video>. The trick to this is choosing a video format that can play in all/most plugins/players. The absolute most compatible option is MPEG, but that's low quality and high filesize (not to mention old), so I'd avoid it. Short of that, I recommend .mov (the QuickTime format) that will play in many players if the format of the video (codec, mostly) is supported by the various players. For that reason it's good to use a common codec, probably at this point MP4 or H.624. Sorenson3 is older and was a very common format for a while and that might play in anything at this point. I haven't checked compatibility across players for a while. AVI is a common container as well, but very often these files can't play at all in quicktime and that means it won't work on a Mac (without secondary plugins installed) or at all on iPod/iPad. Short version: .mov container with a common video codec (and audio codec, but that's easier) will be best all around. Flash can play these as well in some cases, at least I believe so. Of course you could also convert two (or more) copies and conditionally serve one or another, if you don't mind the extra work and storage.

vlane95678
09-28-2011, 04:35 PM
Hi gentlemen,

Thank you for your time. I cleared cache and cookies prior to testing with no avail. The menus still hide behind the video in Chrome and Safari. Your solution only worked for IE.

Again, we do not want to use flash because iPad and iPhones cannot read this format and this would be blocking out a HUGE part of the audience trying to see this video. Again, not an option for this reason.

We need to stream in something that is friendly for all devices like a .mp4 or .wmv, but we have the menu problem.

And for the record, if you haven't tried to download QuickTime lately, please Google "download QuickTime" the link takes you to their homepage where is clearly requires your email address. Of course you could put in a fake one if you like but not everyone will think to do that. Also in some browsers QuickTime plugin will install without having to go to the website, but we can't leave that to chance for this website build.


Here's the code as it looks right now:

#############################

<OBJECT ID="MediaPlayer" WIDTH="562" HEIGHT="276" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="/clients/pas/videos/main.mp4">
<PARAM name="autostart" VALUE="true">
<PARAM name="ShowControls" VALUE="false">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<param name="wmode" value="transparent">
<param name=”allowFullScreen” value=”true”>
<param name="windowlessVideo" value="true" />

<EMBED TYPE="application/x-mplayer2" SRC="/clients/pas/videos/main.mp4" NAME="MediaPlayer" wmode="transparent" windowlessVideo="true" WIDTH="562" HEIGHT="276" ShowControls="0" ShowStatusBar="0" ShowDisplay="0" autostart="1"
allowfullscreen=”true”> </EMBED>
################################


If no one else has any ideas then I think this menu will not work for anyone who wished to put a .wmv or a .mp4 anywhere near it. And then it should be documented in the instructions of menu.

jscheuer1
09-28-2011, 06:54 PM
I don't think any menu would. There is one commercial solution I found for showing video cross platform:

http://transparentplayer.com/

But there's no guarantee that it would allow a drop down over the video when not using Flash mode. It uses HTML 5 for iDifferent devices, but I'm simply ignorant of whether or not that can allow for a drop down over the video, and if so if there are any special considerations to achieve that. The author of the above player might be willing to help, but even if he is, it might not be possible.

Since there is this commercial solution (at least for cross platform video), sooner or later a non-commercial one will probably emerge as well. There may even be one around. If so, I just haven't run across it yet. There used to be one - swfobject.js - but that was when all devices supported Flash. Perhaps those folks or someone like them will come up with a similar script which includes this HTML 5 pathway for iOther devices.

djr33
09-28-2011, 07:28 PM
You must use Quicktime if you want to embed it for iPod and iPad. Quicktime is apple software, so that's how it will work. They also may have limited support for the HTML5 <video> tag, although my guess is that it will use the Quicktime player anyway (although the code would be more generic, just interpreted by the iPad/iPod that way).
As for downloading it, I'm well aware of that form. It's been the same for years. It has never actually required an email if you just click submit, at least as far as I can remember. I did just go to the page and it's strange because there was no form and it let me download the file directly. That's new, and the apple site has always served slightly different content for Macs and PCs, so maybe the Mac version has now eliminated the form and the PC version hasn't. Regardless, it's not that big of a problem to enter your email to get the software, and there are other ways to download Quicktime, such as through download.cnet.com. If you're not willing to bother installing it, then that seems like there's not much point in the rest. And as I said, that's a completely secondary issue to what you put on your site. There's no need to have Quicktime on your computer for others to use the plugin because that's all done on the final user's computer.

You can do what you want, but I see absolutely no reason you'd want to be using windows media player here. You claim you want to support iPad and iPod, so you "can't use Flash" but are you aware that those devices also don't have windows media player? So why is that any better??

You won't find anything that's completely cross-browser compatible, except something like John linked to above that actually conditionally uses one player or another.

jscheuer1
09-28-2011, 08:49 PM
There is this:

http://components.earthscienceagency.com/flash_media_player/skins/swfobject/

Where they say they explain using swfobject 2.2 with HTML 5 fallback.

And this:

http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback

Which is the other way round, HTML 5 video with a Flash fallback.

However, as I said before, only with Flash am I reasonably certain you can drop over it.

Also, what Daniel says about Media Player is like 99% accurate. I meant to mention that earlier. No self respecting iApple owner would have it. Some might though.

Back to the cross browser video idea. You can try what YouTube is now doing. Just host the video file in an iframe. Let the browser decide what to do with it:


<iframe src="myvideo.mp4" width="300" height="250" scrolling="no"></iframe>

But you still won't be assured of being able to drop over it in all browsers/on all platforms.

I'm going to repeat myself - move the video away from the menu.

And add that Media Player is a very poor choice for cross platform video. One of the solutions above would be better. But they should be tested on the devices. Otherwise there's no way to be certain they're working.

djr33
09-29-2011, 05:56 AM
No self respecting iApple owner would have [Windows Media Player].
That's only half of the problem. With OSX for a Mac computer, there is a version of Windows Media Player available. It's an older outdated version but it exists and will probably work in most cases. I don't know if it has a browser plugin or not. Regardless, it's true that most Mac users won't have it installed.
But the other half of the problem is that the iPad/iPhone/iPod do not have any way at all to use Windows Media Player. So even if they DO want to have WM available, they can't.

And while most devices try to have flash available (with the notable exception of Apple), very few of them will bother to have Windows Media Player in any form, except for Microsoft brand phones.

So there's no question that Flash is the (single) most widely available plugin. The only better solution is to combine a few plugins as we've been discussing.

vlane95678
09-30-2011, 05:12 PM
This has sure sparked quite a conversation! I know many people debate the best format to stream video. There's QuickTime, flash, and YouTube. Really I don't see any one solution that is best for all platforms. I say that because if the client refuses to use YouTube (which was our first recommendation) you have to move onto QuickTime and Windows Media Player. I don't know what they will not let us stream through YouTube (they said something about copyright etc), but that door is shut.

If they want it work on iPads then flash is a problem. It's a problem many web developers encounter and it doesn't help when the client is being difficult and not open to our suggestions. What I have told them is this is not a mobilized version of the site therefore do not expect the movie to work on iPad. If they want a completely mobilized version then we would add the detection script and send them to a re-skined version. That's what our other clients have to do so their customers have an optimal experience no matter what device they are using.

So, with that being said. The menu is why we even started this conversation. It is yet to be determined if it will hide based on your ideas above. We know it will work fine when the movie is flash. I've tested that and it works thanks to jscheuer1.

We will try the other methods you gentlemen have suggested and report back what works and doesn't work so it will help future users of the menu.

vlane95678
09-30-2011, 06:15 PM
To report back.....iframe solves a portion of the problem. The menu still hides behind the video in Chrome. The other browser are fine using the iframe. The windowlessVideo helps in a couple of the browsers. I even tried a YouTube video just to see...still hides!

So at the end of the day, none of these solutions will work with the video and the menu unless the video is flash.

Solution #1:
re-design the homepage so the video is not near the menu

Solution #2:
Try to use another menu.

jscheuer1
09-30-2011, 07:17 PM
I'm 99.99% sure that another menu, unless it's based on something other or more than just DHTML (javascript, HTML and css), will not cover it in all browsers. And what would that something else be? I have no clue. Often Flash is used for a menu in cases like this. But that solves nothing here.

What would work with this and many other menus is if there are params/attributes available for tags in the various alternative formats. Flash is the way to go for the PC/Mac computers and the PC hand helds. But the iDevices, they should probably use quicktime. But if there is a param/attribute to allow quicktime to go behind DHTML, I just haven't come across it yet.

Just in case you missed it before though, Media Player cannot be used on the iPhone/Pod.

Another thing about iDevices and other hand helds - They're touch activated so many menus will not work with them because they don't recognize rollovers (mouseover/mouseout). DD is updating its menu scripts that use rollovers to detect those devices and require clicks instead of rollovers to drop menus down for them. You should make sure any menu you use that uses rollovers has something like that or can detect the sort of events those devices do have. I believe there is a jQuery plugin that does. But for it to work with a given menu, it would probably have to be integrated with it. That has nothing to do with the dropping over video issue though.