Quicktime - Wmode Transparent problem

1
votes

Embedding a Quicktime video on a page as a graceful fallback for the IE family of browsers (no flash / html5). I have a div overlaying the video later on, so the Quicktime embed must be wmode=transparent. Below is the embed code:

<embed src="test.mp4" width="300" height="400" wmode="transparent" autoplay="true" scale="tofit" />

The problem is: the embed area flashes white before loading the quicktime plugin. Embed succesfully completes and video begins playing, the controlbar however is blocked out white.

What quicktime looks like

Any ideas as how to fix this? (Changing wmode is not an option). This occurs in all IE browsers + FF3.6 (haven't tested higher versions).

Thanks.

2
htmlinternet-explorerquicktimewmode
Are you testing this in ieTester / browser labs, or on a standalone version of IE? - rickyduck
Real version of IE running in a VM. Also occurs on Firefox. - Dmitri Farkov
Can I have a link to an example page (with the test.mp4 that you are using)? And what OS is the VM? Also version of quicktime? - rickyduck
Are you saying that ie doesn't support Flash, or is this fallback in case it doesn't support flash? Graceful degradation means that you don't need a working version for users that don't meet the minimum specs, instead, provide a link to the video so they can download or watch it elsewhere. - zzzzBov
@zzzzBov: it is a fallback. Unfortunately we have to meet the client's demands and sending a large part of their demographic to download the video will reduce views. - Dmitri Farkov

2 Answers

4
votes

The player hiding the control bar in IE is because of wmode="transparent". Live example, tested in all versions of IE (6/7/8 and 9) and I saw the same behavior However setting wmode="opaque" shows the control bar. Live example, tested in all versions of IE (6/7/8 and 9) and saw the same behavior. But the issue with wmode="opaque" is we cannot show any overlay (dom element) on top of the player.

FF 3.6 with wmode="transparent" do not show anything, I mean the player itself is not visible. Live example. But with wmode="opaque" everything works fine without any issue, we can have overlay also on top of the player. Live example

In Chrome 13 with wmode="transparent" everything works fine. Live example. But with wmode="opaque" the only issue is we cannot show any overlay on top of the player. Live example

I think this will give you enough idea about the issues with Quicktime player across most of the modern browsers related to wmode and control bar problems.

Working demo

  • This works in all browsers IE (all versions), and Chrome 13. In FF 3.6 works only with wmode="opaque" and also supports overlay. So for FF you might want to set wmode conditionally.

Working demo with bgiframe for overlay.

http://jsfiddle.net/Q3yBR/23/

2
votes

The HEIGHT attribute specifies the height of the embedded file in pixels. The HEIGHT attribute is required unless the HIDDEN attribute is specified. The HEIGHT of the movie can be found by choosing 'Get Info...' in the 'Movie' menu within QuickTime Player. If you do not use the SCALE attribute and you supply a height that is smaller than the actual height of the movie (plus 16 if you are showing the controller), the movie will be cropped to fit the height. If you supply a height that is greater than the height of the movie, the movie will be centered inside this height.

Note:Never specify a height of less than 2 as this can cause problems with some browsers.

> Note 2:The movie controller is 16 pixels high, so add 16 pixels to the height of the movie to make the movie controller visible.

<embed src="test.mp4" width="300" height="416" wmode="transparent" autoplay="true" scale="tofit" />

adding 16 to your embed height for controller and/or scale="aspect" will solve your problem according to documents. I don't have lower IE version to test, so, pls let me know.