How to insert a preview image for a swf player?

Discussion in 'Web Design and Development' started by Golden Child, Jun 7, 2011.

  1. Golden Child macrumors newbie

    Joined:
    Mar 1, 2011
    #1
    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:

     
  2. HomeBru Studios macrumors member

    HomeBru Studios

    Joined:
    Jun 4, 2008
    #2
    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...
     
  3. Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011
    #3
    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?
     
  4. Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011
    #4
    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? :confused:

     
  5. Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011
    #5
    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:

     
  6. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #6
    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"/>
     
  7. Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011
    #7
    Still not working. :confused: Could it be the player I'm using? This is what I have now:

     
  8. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #8
    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"/>
     
  9. Golden Child thread starter macrumors newbie

    Joined:
    Mar 1, 2011
    #9
    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.
     
  10. Ride9650 macrumors 6502

    Joined:
    Jun 29, 2007
    #10
    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"
     

Share This Page