Skip navigation
Currently Being Moderated

Trying to place an image before a video starts

Aug 13, 2012 5:01 PM

I have a very preliminary website with some flash and video. It passes the validator. The flash and video work but the video software isn't able to show any of the video until someone presses the play button - it just shows a black box.

 

According to the video software provider, their player can't show a preview image. I wonder if it's possible to "overlay" an image with the same div, then have it disappear or move to the background when the play button is clicked.

 

Failing that, does anyone know of a similar program which can insert a video easily into Dreamweaver? The one I'm using was cheap and easy but if it can't/won't do what I need it's a waste of time and effort.

 

 

For some reason I can't paste the code...

 
Replies
  • Currently Being Moderated
    Aug 13, 2012 6:38 PM   in reply to Acemon99

    According to the video software provider, their player can't show a preview image. I wonder if it's possible to "overlay" an image with the same div, then have it disappear or move to the background when the play button is clicked.

     

     

    Sure.  You could create a background image for that DIV and it will load before the video and people won't know what is going on.  If you have a link please post here so that somebody can create the image for you for that DIV.

     

    Hope this helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2012 9:15 PM   in reply to Acemon99

    OK change your CSS to look like this:

     

     

    .videobox {

        float: left;

        height: 350px;

        margin-bottom: 5px;

        margin-left: 25px;

        margin-top: 5px;

        padding-right: 15px;

        text-align: center;

        width: 440px;

        background-image: url('2012-08-14_0450.png');

        background-repeat: no-repeat;

    }

     

    And use this image to put it at the appropriate place.

     

    2012-08-14_0450.png

     

    It should serve your purpose for now.

     

    Can you not upload your video  to Youtube servers?  I would have thought U-Tube is better and reliable.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 7:41 AM   in reply to Acemon99

    I don't think the suggested method (<div> background image) will work with the example Web page video you linked to.... here is why...

    Inside the <div> is code for a special Windows Media Player... (not a very good choice by the way)... meaning that the <div class="videobox"> has content (the video player) which will cover over the background image.... leaving the black box and some controls showing.

    Code also contains an IE conditional statement and nothing in the

    <!--[if !IE]>

    so nothing displays in FF.... nix all that player code and use something else.

    A better route (in my opinion) would be to first choose a better video type than mpeg (better compression and quality per file size)... choose an mp4 for example.

    Now you have a much wider range of player options.

    For example:

    http://flowplayer.org/

    http://www.pickleplayer.com/

    http://www.longtailvideo.com/players

    Any of these players plus an mp4 file would be much better than your current choice. They all support a "poster frame"... or image that displays before the video starts.

    If you need to convert mpeg to mp4, Handbrake does a good job:

    http://handbrake.fr/

    Best wishes,

    Adninjastrator

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points