I'm having a minor problem inserting a preview image into a swf player on my website. The swf player has no image before you click the play button and just displays nothing on the player screen when you first log onto the page. What do I need to add to my html so I can add a preview image before clicking play on the swf movie control bar? Here is the swf movie html:
Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
How to insert a preview image for a swf player?
- Thread starter Golden Child
- Start date
- Sort by reaction score
View the page source of this web page (http://contractornews.org/). I did what you are asking about for the video in the right sidebar (the user didn't like the INDUSTRY STANDARD play button covering his face).
Although this particular use is for a YouTube video, the same idea should apply to an SWF video...
Although this particular use is for a YouTube video, the same idea should apply to an SWF video...
Forgive me, I'm a newbie at web development. What do I need to add to my html to be able to add a preview graphic?
Okay. I took note of some of the html for the swf preview graphic. Now that I have changed some of my html and added the swf preview graphic, the preview graphic shows up left of the swf player instead of showing the preview graphic. Is some CSS necessary here? 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body></li><li id="youtube" class="widget-container widget_youtube"><img id="video_still" src="../../../T of D/TD swf pic 1.jpg" style="cursor
<param name="src" value="example.swf"/>
<param name="bgcolor" value="none"/>
<param name="quality" value="best"/>
<embed name="whatever" src="../Movies/DoremiSoft Studio/WheatonEditP-20110607-151910/WheatonEditP.swf" wmode="transparent" width="300" height="225" bgcolor="transparent" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object></li>
</body>
</html>
I successfully placed the preview image in place on my site. However, now the player doesn't play when I scroll over the preview image. What could be wrong here:
<li id="youtube" class="widget-container widget_youtube"><img id="video_still" src="../../../TDswfpic2.jpg" style="cursor
<param name="movie" value="example.swf">
<param name="wmode" value="transparent"></param>
<embed src="../Movies/DoremiSoft Studio/WheatonEditP-20110614-164244/WheatonEditP.swf" wmode="transparent" width="300" height="225">
</embed>
</object></li>
It's because you put your image over the player.
you need the poster attribute in a param tag like this
PHP:
<param name="flashvars" value="poster=path to your image"/>Still not working.
1.Are you trying to use a local image file? You need to upload it to your webserver.
2. Secondly, take out the extra quotes.
Should look something like this:
PHP:
<param name="flashvars"
value="poster=Macintosh/video_still.jpg"/>Thanks for replying. Yes, I am trying to use a local image on my computer seeing as I have not uploaded the site live to the web yet. That explains a lot.
Ah. Well first off the proper format is:
file://<path to the image>
secondly, its generally bad practice to use absolute urls as, as you might imagine, once you upload everything, you'll have to go through and change all your links. it's best to use what's called a relative url.
say your main folder contains:
- index.html
- mygreatthing.swf
- images(imagine it's a folder)
and that inside that images folder is your preview image. So the proper relative path would then be:
"images/mygreatthing_preview.png"