Neil Smith [MVP Digital M
Guest
|
 Posted:
Sun Apr 17, 2005 7:33 pm Post subject:
Re: Overlay image on media player |
|
|
On Sun, 17 Apr 2005 17:21:20 GMT, "Carl Gilbert"
<mr_carl_gilbert@hotmail.com> wrote:
| Quote: | Hi
I have a web page with a media player control and I am looking to overlay an
image.
The image will probably be the same size as the video and this will be used
to give a border to the video.
I have the following code for the movie control, but does anyone know how to
overlay an image?
|
Sure, something like this will work using CSS (note z-indexes and
relative/absolute positioning selections) :
<style type="text/css">
#playerouter {
position: relative;
left: 220px;
top: 100px;
width: 500px;
height: 260px;
}
#overlay {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 220px;
z-index: 1;
display: block;
}
#playerinner {
position: absolute;
left: 0;
top: 0;
width: 500px;
height: 260px;
z-index: 0;
clip: rect(0px 500px 260px 0px);
}
</style>
Then adjust your object tag, wrapping it in the DIV id's listed above
so :
<div id="playerouter">
<div id="overlay"><a href="#" onclick="startPlay(); return
false"><img src="my_overlay_image.jpg" width="500" height="220"
border="0" alt="Preview Image" /></a></div>
<div id="playerinner">
<object id="VIDEO" width="500" height="260" ....
</div>
</div>
Finally, within your player object, add
<param name="windowlessvideo" value="true" />
which allows the player to take the video out of the display card's
overlay and place it within the same "plane" as the browser window.
Although it's stated to only work on XP in fact it works in windows
2000 too. You'll need media player 9 and late to use this param tag.
I must add - 500x260 is a *very* odd aspect ratio for web video !
Even 16:9 is a ratio of 1.78:1, you have 1.92:1 ;-)
HTH
Cheers - Neil
| Quote: | OBJECT id="VIDEO" width="500" height="260"
style="position:absolute; left:0;top:0;"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject"
PARAM NAME="URL" VALUE="C:\007.mpg"
PARAM NAME="SendPlayStateChangeEvents" VALUE="True"
PARAM NAME="AutoStart" VALUE="True"
PARAM name="uiMode" value="none"
PARAM name="PlayCount" value="2"
/OBJECT
Kind regards, Carl Gilbert
|
|
|
FAQ
Memberlist
Register
Profile
Log in to check your private messages
Log in
