Pause at first image or show image in background

[ChloeBrussard]

I thought this would be simple but it has proven to be something I can't
figure out. I have a video embedded in a page (using
CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6). I have AutoStart set to false so
the video won't play until the visitor clicks the play button. The <object>
code is in a table cell. That table cell has a background image. I want that
background image to show up until the user clicks the Play button, and then
have the video show up. In other words, the visitor sees the graphic until
they click Play on the WMP control, and then they see the video. I have tried
adding the "TransparentAtStart" parameter and set it to True, but that
doesn't make a difference. Any suggestions? Thanks!

[Alessandro Angeli]

From: "ChloeBrussard"

Post by ChloeBrussard
I thought this would be simple but it has proven to be
something I can't figure out. I have a video embedded in
a page (using
CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6). I have
AutoStart set to false so the video won't play until the
visitor clicks the play button. The <object> code is in a
table cell. That table cell has a background image. I
want that background image to show up until the user
clicks the Play button, and then have the video show up.
In other words, the visitor sees the graphic until they
click Play on the WMP control, and then they see the
video. I have tried adding the "TransparentAtStart"
parameter and set it to True, but that doesn't make a
difference. Any suggestions? Thanks!

Put the player in an invisible layer (style="display:
none;") and make it visible only when needed
(style="display: block;").

[ChloeBrussard]

Thank you, Alessandro! That got me headed in the right direction. I ended up
putting the image div on top and the player div on the bottom, but large
enough that the play button still showed. When the user clicks the play
button the player pops to the top. Since the graphic behind is the first
image from the video it looks great. Here is the code in case anyone wants it:

<table style="width: 100%" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 311px; vertical-align:top">
<div style="position: absolute; width: 311px; height: 175px; z-index: 2"
id="clickgraphic">
<img alt="My Graphic" src="Loading Image..." width="311"
height="175" /></div>
<div style="position: absolute; width: 311px; height: 485px; z-index: 1;
left: 23px; top: 18px;" id="player">
<OBJECT id="VIDEO0" width="100%"
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<PARAM NAME="URL" VALUE="http://site/video.wmv"/>
<PARAM name="uiMode" value="mini"/>
<PARAM NAME="AutoStart" VALUE="0" />
<PARAM name="PlayCount" value="9999"/>
<param name="rate" value="1"/>
<param name="balance" value="0"/>
<param name="currentPosition" value="0"/>
<param name="defaultFrame" value=""/>
<param name="currentMarker" value="0"/>
<param name="invokeURLs" value="-1"/>
<param name="baseURL" value=""/>
<param name="volume" value="50"/>
<param name="mute" value="0"/>
<param name="windowlessVideo" value="0"/>
<param name="enabled" value="-1"/>
<param name="enableContextMenu" value="-1"/>
<param name="fullScreen" value="0"/>
<param name="SAMIStyle" value=""/>
<param name="SAMILang" value=""/>
<param name="SAMIFilename" value=""/>
<param name="captioningID" value=""/>
<param name="enableErrorDialogs" value="0"/>
<param name="showcontrols" value="-1" />
</OBJECT>
<table style="width: 100%" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td class="bigwhitetext" style="background-color:#1D537E; padding: 4px;
border: 2px solid #9999999; text-align: center; width: 140px" nowrap="">
<a href="http://site/video.wmv">View the Video Larger</a></td>
<td> </td>
</tr>
</table>
<em>Click the Play button above to learn more! </em>
</div>
</td>
</tr>
</table>

Post by Alessandro Angeli
From: "ChloeBrussard"

Post by ChloeBrussard
I thought this would be simple but it has proven to be
something I can't figure out. I have a video embedded in
a page (using
CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6). I have
AutoStart set to false so the video won't play until the
visitor clicks the play button. The <object> code is in a
table cell. That table cell has a background image. I
want that background image to show up until the user
clicks the Play button, and then have the video show up.
In other words, the visitor sees the graphic until they
click Play on the WMP control, and then they see the
video. I have tried adding the "TransparentAtStart"
parameter and set it to True, but that doesn't make a
difference. Any suggestions? Thanks!

none;") and make it visible only when needed
(style="display: block;").
--
// Alessandro Angeli
// MVP :: DirectShow / MediaFoundation
// mvpnews at riseoftheants dot com
// http://www.riseoftheants.com/mmx/faq.htm
.

[Alessandro Angeli]

From: "ChloeBrussard"

Post by ChloeBrussard
Thank you, Alessandro! That got me headed in the right
direction. I ended up putting the image div on top and
the player div on the bottom, but large enough that the
play button still showed. When the user clicks the play
button the player pops to the top. Since the graphic
behind is the first image from the video it looks great.

I thought you wanted to show an arbitrary image. If you want
to show the first frame, you can do someting much easier:
let playback autoStart (or play() during the page's onLoad
event) but listen for the playStateChange event and, as soon
as the player transitions to the playing state, pause() it.