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 blo开发者_高级运维cked out white.
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.
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 setwmode
conditionally.
Working demo with bgiframe for overlay.
http://jsfiddle.net/Q3yBR/23/
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.
精彩评论