Preview image or frame for a video

[ron mexico]

I have a couple videos on my site but I would like to have a frame of the video showing when it is not playing. Right now, it is just a black square and it does not autostart, so it doesn't look that great.
I am using Dreamweaver CS3.
Is anyone familiar with how I might use a frame from the video to show instead of the black space, when the video is not playing?

[Eriksrocks]

What format is the video and what player is it playing in? e.g. QuickTime, WMV, Flash video, etc.

[ron mexico]

the video is an mpeg-1. I inserted it in the page by Insert>Media>Flash.
I'm totally new to this, so I don't know the best ways of doing things yet.

[ron mexico]

here is the code

<embed src="new vids/TravelVid1-MPEG-1.mpg" width="419" height="259" autoStart=false >

[Eriksrocks]

You can't embed an MPG video with the "Flash" option.

Try using this code, substituting the things in RED.

<OBJECT id='mediaPlayer' width="419" height="259" 
      classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' 
      codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112'
      standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
      <param name='fileName' value="http://servername/path/to/media.file">
      <param name='autoStart' value="false">
      <param name='showControls' value="true">
      <param name='loop' value="false">
      <EMBED type='application/x-mplayer2'
        pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
        id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1' 
        showcontrols="true" showtracker='-1' 
        showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="419" height="259"
        src="http://servername/path/to/media.file" autostart="false" loop="false">
      </EMBED>
      </OBJECT>

Also, it's not a good practice to have spaces in your file or folder names. Consider renaming the folders, or if you must have spaces, substitute %20 for the spaces in your HTML.

[ron mexico]

Thanks for the info. I tried that code and while I'm sure it is the better way to do it, the result is still the same as what I had before. My videos were actually working, but I still have just a black video screen when the page is fully loaded before the video is played.

It was never a problem getting the video to play. I just was hoping to have part of the video showing as a still image where the video is, just so it looks more interesting. Otherwise, until you play the clip, it is just a black rectangle.

Is there a way to get the display of the video to show somewhere in the middle of the clip (when they are just at the website, not when the vid is playing) rather than at the very beginning, and then when they click play, it starts at the beginning?

[Eriksrocks]

Try taking a snapshot of the part in the video that you want to be the preview, add that image to the HTML, and then use this code to make it so that when somebody clicks on the image, the image turns into the media player.

<div><img src="IMAGE" alt="" style="cursor:pointer;" onclick="this.parentNode.innerHTML = 'HTML code of video';"></div>

You would have to escape all of the ' and "s in the video so it would end up looking something like this:

onclick="this.parentNode.innerHTML = '\x3Cembed src=\'http://\' width=\'320\' height=\'283\' autostart=\'0\' showcontrols=\'1\' type=\'application/x-mplayer2\' pluginspage=\'http://www.microsoft.com/windows/windowsmedia/download/\'\x3E \x3C/embed\x3E';"

Sorry, that's the only easy solution I can think of.

An alternative is to convert the video to an FLV (Flash video) and then embed a flash player like the JW FLV player, which supports a preview image.