468,505 Members | 1,623 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,505 developers. It's quick & easy.

Question about customizing a web component

ac
Hi, I have to customize a component (in this case Windows Media Player)
so that a circular window is shown upon the player. That is, suppose you
have a movie playing (in the ordinary rectangle window), I'd like to create
some sort of mask which only allows to watch inside the circle (as if
someone
is viewing through a peephole or spyhole..)
Is there any possible way to do this? This is targetted to WMP, but maybe it
can be done with javascript?
Any help from someone knowledgeable would be great, as I don't have any
idea where to start from.

TIA!

Jul 20 '05 #1
4 3181
ac
> Haven't tried it but it seems like you can just layer an image over the
Player in HTML. You'll need to specify windowlessVideo as true.


Jim, thanks for your answer, but unfortunately it didn't work. In my html,
I created a table with background desired, and set windowlessVideo as true.
At the beginning, it looks fine, but as soon as the video starts, the image
is put behind.
BTW, I'm working with WMP 6.4 ... could this work with newer WMP versions?

Just in case, I show you the html...(if you try it, please set Filename)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Test</title>
</head>
<body>
<p align="center">&nbsp;</p>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="352" height="288"
background="control.gif">
<tr>
<td width="352" height="288">
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
id="MediaPlayer" width="352" height="288">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AutoStart" value="-1">
<param name="AnimationAtStart" value="0">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="5">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<param name="Enabled" value="0">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="0">
<param name="EnableTracker" value="-1">
<param name="FileName" value>
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowControls" value="0">
<param name="ShowAudioControls" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowTracker" value="0">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="-560">
<param name="WindowlessVideo" value="-1">
</object>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
As long as I've been searching, it seems it's not possible to customize the
player this way. The only option I can think of is creating a new activex
control, using wmp as a base.... but it seems a little bit complicated (at
least for me)

Thanks in advance.


Jul 20 '05 #2
Użytkownik "ac" <me@privacy.net> napisał w wiadomości
news:bi************@ID-84876.news.uni-berlin.de...
Jim, thanks for your answer, but unfortunately it didn't work. In my html,
I created a table with background desired, and set windowlessVideo as true. At the beginning, it looks fine, but as soon as the video starts, the image is put behind.
BTW, I'm working with WMP 6.4 ... could this work with newer WMP versions?

Just in case, I show you the html...(if you try it, please set Filename)

(...cut...)

As long as I've been searching, it seems it's not possible to customize the player this way. The only option I can think of is creating a new activex
control, using wmp as a base.... but it seems a little bit complicated (at
least for me)


Why are you trying to complicate your life? This is the case where layers
come handy.
You've been trying to do an impossible thing - masking player with image
that in fact is placed underneath the player!
Here's my layer proposal:

<div style="position:absolute; top:20px; left:200px; z-index:0; width:384px,
height:288px; margin:none">
<object classid="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.
cab#Version=5,1,52,701"
id="MediaPlayer"
width="384"
height="288">
<param name="WindowlessVideo" value="1">
(OTHER PARAMS HERE)
</object>
</div>
<div style="position:absolute; top:20px; left:200px; z-index:1; width:384px,
height:288px; margin:none">
<img src="control.gif" width="384" height="288">
</div>

Unfortunatelly, in this case you would have to specify a fixed location for
the layers, thus probably rebuilding your entire site for all elements to
have fixed sizes. Here's the table proposal:

<table>
<tr><td>
<div style="z-index:0; width:384px, height:288px; margin:none">
<object classid="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.
cab#Version=5,1,52,701"
id="MediaPlayer"
width="384"
height="288">
<param name="WindowlessVideo" value="1">
(...)
</object>
</div>
<div style="position:relative; top:-288; z-index:1; width:384px,
height:288px; margin:none">
<img src="control.gif" width="384" height="288">
</div>
</td></tr>
</table>

How about that? Simple. Of course I've been testing it :)
This code also ensures the player get supdated to the newest version
(codebase). You can disable it as well if you do not like it.
By the way, the option windowlessVideo does not cause the player to get
transparent or something. If you set it to false, the video will overlay
EVERYTHING that is in this place, even placed over the player. I suppose
this is similar as turning video overlay off in full player.

I hope I was helpful...

--
__ .: Radoslaw Loboda :. | Cool stuff !!!
(oo) rl*****@bojko.krakow.pl | --------------------
/ \/ \ | www.tigerhomes.org
`V__V' | www.suncam.tv


Jul 20 '05 #3
you can't overlay anything over the WMP component (as you can't over a Flash
or Director).
you have two choices:
1) encode your WMV with the mask already overlayed (every NLE will do that)
2) *try* to embed your video in a flash animation on the bottom layer and
place the mask on the top layer. i'm not sure this will work, tough...
"p0wer" <p0wer@bojko_krakow_pl> ha scritto nel messaggio
news:3f********@news.vogel.pl...
Użytkownik "ac" <me@privacy.net> napisał w wiadomości
news:bi************@ID-84876.news.uni-berlin.de...
Jim, thanks for your answer, but unfortunately it didn't work. In my html, I created a table with background desired, and set windowlessVideo as true.
At the beginning, it looks fine, but as soon as the video starts, the

image
is put behind.
BTW, I'm working with WMP 6.4 ... could this work with newer WMP versions?
Just in case, I show you the html...(if you try it, please set Filename)

(...cut...)

As long as I've been searching, it seems it's not possible to customize

the
player this way. The only option I can think of is creating a new activex control, using wmp as a base.... but it seems a little bit complicated (at least for me)


Why are you trying to complicate your life? This is the case where layers
come handy.
You've been trying to do an impossible thing - masking player with image
that in fact is placed underneath the player!
Here's my layer proposal:

<div style="position:absolute; top:20px; left:200px; z-index:0;

width:384px, height:288px; margin:none">
<object classid="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf. cab#Version=5,1,52,701"
id="MediaPlayer"
width="384"
height="288">
<param name="WindowlessVideo" value="1">
(OTHER PARAMS HERE)
</object>
</div>
<div style="position:absolute; top:20px; left:200px; z-index:1; width:384px, height:288px; margin:none">
<img src="control.gif" width="384" height="288">
</div>

Unfortunatelly, in this case you would have to specify a fixed location for the layers, thus probably rebuilding your entire site for all elements to
have fixed sizes. Here's the table proposal:

<table>
<tr><td>
<div style="z-index:0; width:384px, height:288px; margin:none">
<object classid="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf. cab#Version=5,1,52,701"
id="MediaPlayer"
width="384"
height="288">
<param name="WindowlessVideo" value="1">
(...)
</object>
</div>
<div style="position:relative; top:-288; z-index:1; width:384px,
height:288px; margin:none">
<img src="control.gif" width="384" height="288">
</div>
</td></tr>
</table>

How about that? Simple. Of course I've been testing it :)
This code also ensures the player get supdated to the newest version
(codebase). You can disable it as well if you do not like it.
By the way, the option windowlessVideo does not cause the player to get
transparent or something. If you set it to false, the video will overlay
EVERYTHING that is in this place, even placed over the player. I suppose
this is similar as turning video overlay off in full player.

I hope I was helpful...

--
__ .: Radoslaw Loboda :. | Cool stuff !!!
(oo) rl*****@bojko.krakow.pl | --------------------
/ \/ \ | www.tigerhomes.org
`V__V' | www.suncam.tv

Jul 20 '05 #4
ac
> Why are you trying to complicate your life? This is the case where layers
come handy.
I complicate because I had no idea about layers :-) Didn't know they even
existed! (I'm quite newbie to all this)
You've been trying to do an impossible thing - masking player with image
that in fact is placed underneath the player!
Exactly! and I must tell your solution is wonderful, and helped me a lot
to go in the right direction. Thank you very much.

Although I had a little problem with your examples:

This one works ok, I put some comments to see if they're
typos or not...
Here's my layer proposal:

<div style="position:absolute; top:20px; left:200px; z-index:0; width:384px,

width of the component is 352... I changed all occurrences
height:288px; margin:none">
<object classid="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf. cab#Version=5,1,52,701"
Yes, I avoid this because we stick to wmp 6.4 only... (don't ask why :-))
id="MediaPlayer"
width="384"
height="288">
<param name="WindowlessVideo" value="1">
Maybe you mean "-1" ?
(OTHER PARAMS HERE)
</object>
</div>
<div style="position:absolute; top:20px; left:200px; z-index:1; width:384px, height:288px; margin:none">
<img src="control.gif" width="384" height="288">
</div>

Unfortunatelly, in this case you would have to specify a fixed location for the layers, thus probably rebuilding your entire site for all elements to
have fixed sizes. Here's the table proposal:
OK, as you say, this one has the problem of being absolute... but it works
anyway...
Unfortunately this one didn't... the problem I'm having is that I get
the table size doubled...as if it were taking account of the image height...
<table>
<tr><td>
<div style="z-index:0; width:384px, height:288px; margin:none">
<object classid="clsid:22D6f312-B0F6-11D0-94AB-0080C74C7E95"

codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf. cab#Version=5,1,52,701"
id="MediaPlayer"
width="384"
height="288">
<param name="WindowlessVideo" value="1">
(...)
</object>
</div>
<div style="position:relative; top:-288; z-index:1; width:384px,
height:288px; margin:none">
<img src="control.gif" width="384" height="288">
</div>
</td></tr>
</table>
OK, did that but the only problem I'm having is that. Except for that,
everything works great.
I hope I was helpful...


Again, million thanks for your valuable help!

Just in case, this is the new html...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Test</title>
</head>
<body>
<p align="center">&nbsp;</p>
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="z-index:0; width:352px, height:288px; margin:none">
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
id="MediaPlayer" width="352" height="288">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AutoStart" value="-1">
<param name="AnimationAtStart" value="0">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="5">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="0">
<param name="Enabled" value="0">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="0">
<param name="EnableTracker" value="-1">
<param name="Filename">
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIStyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowControls" value="0">
<param name="ShowAudioControls" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="0">
<param name="ShowStatusBar" value="0">
<param name="ShowTracker" value="0">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="0">
<param name="Volume" value="-560">
<param name="WindowlessVideo" value="-1">
</object>
</div>
<div style="position:relative; top:-288; z-index:1; width:352px,
height:288px; margin:none">
<img src="control.gif" width="352" height="288">
</div>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>

ac.-
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by jonnytansey2 | last post: by
24 posts views Thread by Uwe Mayer | last post: by
7 posts views Thread by Richard Gutery | last post: by
1 post views Thread by PiPOW | last post: by
6 posts views Thread by preport | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.