Help with Quicktime Video

[J2NYC]

I'm creating a page for a large quicktime video. The page has a drop down menu which appears behind the video.

I have attempted to set the wmode to transparent. That does allow access to the drop down menu, but it makes the video invisible. We can't have that. It defeats the purpose.

Setting the z-index on a div containing the video and the menu do nothing, of course.

Quicktime only accepts "transparent" as a wmode, apparently (according to the documentation) so, unlike Flash, setting the wmode to Opaque doesn't work.

Anybody have any ideas? Is there a way to format a Quicktime movie so that a transparent wmode doesn't make the entire movie invisible?

Thanks

[Eye for Video]

I don't think that your use of the wmode transparent in Flash and Quicktime is a correct comparison. wmode transparent is an option available to Flash to allow Web page content not obstructed by objects on the Flash stage to show thru the Flash. So for example, the entire flash document will be some sort of a rectangle, with width and height dimensions. If the only object on the Flash stage is a ball, wmode transparent would allow Web page content behind the rectangle Flash stage to show thru the Flash everywhere except where the ball is. I don't think that is a parameter that is available to Quicktime. Maybe... but then the only case where that would be applicable would be with video recorded with the alpha channel embedded (green screen).
You mentioned using z-indexing... well z-indexing only works with elements that have a declared position. I'd suggest that you create both your containers (menu and video), give them different background colors and the same dimensions as the menu and video but do not add any content until you can correctly position them. That is, get the dropdown menu to position over the top of the video div. Only after that works do you add the content.
z-indexing and positioning
http://www.w3schools.com/Css/pr_pos_z-index.asp
From a couple of old posts:
How that content is positioned depends on whether or not the parent element is also positioned.
The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
Also
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
If you still have problems post a link.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[J2NYC]

Thank you for your response.

I actually have already removed the content from the div that holds the player and insured that the z-indexing worked before I added the player. It does, indeed, work without the quicktime player but the player will appear over the menu.

Quicktime supports a "wmode" transparent, as well. I do understand how it works in Flash. There is little documentation on what it does in Quicktime, however. Except, through experimentation, it appears to make the movie invisible. I suspect that, like Flash, it makes the background invisible but in a video it considers the video to be the background.

Thanks for your response, anyway.

[Eye for Video]

Well I really didn't want to say anything but you know, you might want to reconsider the use of Quicktime and .mov files. It's not nearly as cross browser friendly as Flash. The main problem being that many users browsers will not have the required plugin to play the darn thing!
A second problem with many .mov files is that they do not progressively download. Meaning the viewer has to wait until the entire video is downloaded. So be sure that your Moov Atom is correctly placed to allow progressive downloading. If you're not sure, at least test the video download from a server before you do very many.
Best wishes,
EfV

[J2NYC]

Thanks, but this isn't really my call. The client is actually moving from Flash to Quicktime because they want the videos to play on Iphones and Ipads.

Thanks anyway. I think I found my answer elsewhere. Apparently, this can't be done.

[J2NYC]

I forgot to mention that these videos are on a streaming server. So, they pop up instantly. The download problem is not an issue in this case.

The only issue I'm having is that I can't put a div over the movie.

[Eye for Video]

Well I've never worked with QT very much so I thought I'd give it a try.
Here is an example with a div over the top of the QT movie that works in IE, Chrome, and Safari, but not Firefox.
http://www.cidigitalmedia.com/tutorials/qt/play_qt.html
View the source code to see the positioning.
Don't have an iPhone so I'm not sure about that. But FF has had problems catching up in the use of wmode="transparent", works fine now but it wasn't always that way. Google "Firefox wmode="transparent" bug" for more details.
So it may be that the browser in iPhone is going thru that same learning process that FF went thru. But this example works with Safari.
Best wishes,
EfV

[J2NYC]

Thanks for looking. I should have mentioned that I've been testing this on Firefox. I did see that it worked in IE, and should have brought that up.

Enough people use firefox that this is a show stopper, for now. I could, of course, rearrange the menu for firefox only, but that seems like a lot of hoops to jump through for this.

If I could use Javascript to toggle the transparent mode (and I have found no way to do that) I could get this done and simply toggle it for firefox which wouldn't be as labor intensive as rearranging the menu.

Thanks again for looking.

The thing about the Iphone is that Apple has announced that they will not be supporting flash on the Iphone because it takes up too many resources for the device. Apparently they've made the same choice for the Ipad. I suspect it's really because they want people to use their own products.

[Eye for Video]

Well does it work in the iPhone browser? Because if it's just an issue with FF, there may be a way around that.
EfV

[J2NYC]

I actually don't have an iPhone, but the browser is Safari, so I imagine that would work.

If you're thinking that we should play quicktime for Mobile or iPhone only and use flash for everything else, that could be a solution, but it doesn't solve everything. They have a list of videos that will display when a video page opens. Right now they're using a Flash player and they need to update the list via XML. Their videos are invisible to search engines. They want the videos to appear in a specific navigation div which is in HTML/CSS, so search engines can pick it up.

The client wants Quicktime. It's not my call. In fact, I'm working for someone who is providing the Quicktime service to the client. He's not interested at all in doing any of this in Flash.

[Eye for Video]

OK, here's an update that I needed tested on iPhone...
http://www.cidigitalmedia.com/tutorials/qt/play_qt.html
Do you see the movie? Is it behind the text?
How's it look in FF? or any other browser?
If it works...view the source code... if not... ahhh.. well never mind....
EfV

[Eye for Video]

Thanks for your update. By the way, Flash works just great with xml playlists and by using swfobject you can write detailed narrations about the videos, or even a simple shorter description all of which is available for search engines.
I'm pretty sure that you'll find working with Flash on either of those tasks will be easier in Flash than in Quicktime.
For example, how would you provide a SEO narration of a video or even a short description using QT without displaying it on the page? And does your QT player support xml playlists?
Anyway, I do have one client who uses iPhone extensively so we currently are using an image and a complete html text narration of the Flash video as alternate content. But I just learned that I could also use a .mov video as the alternate content.
So even if you don't use the idea, the learning process was very helpful for me.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[J2NYC]

Thanks for your help. I actually do want to start using Flash, but I can't afford to buy it at this point.

Thanks again.

[Eye for Video]

And a big THANKS to you for driving this project! I'm very excited to be able to show my client a way to play his video on the iPhone and still have the SEO advantage of Flash for his site.
Best wishes!
Eye for Video

[J2NYC]

I neglected to mention the SEO part of this. I've written a CMS in PHP/MySQL which pulls the playlist and descriptions off of the database. These are all used on the video navigation and all are loaded into Divs when the page loads, for display when the user elects to display them. So, the design I have is fairly SEO friendly by default.