Adobe Community: Trying to place an image before a video starts

Currently Being Moderated

1. mytaxsite.co.uk,

Aug 13, 2012 6:38 PM in reply to Acemon99

Report

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

2. Acemon99,

Aug 13, 2012 8:25 PM in reply to mytaxsite.co.uk

Report

I copied the page over to another site and stuck it in as a temporary page. It's at http://www.cbcaferacer.com/temp.html

The flash sideshow works, as does the video player, but the links at the bottom are empty.

I truly appreciate the help.

|

Mark as:

Currently Being Moderated

3. mytaxsite.co.uk,

Aug 13, 2012 9:15 PM in reply to Acemon99

Report

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.

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

4. Acemon99,

Aug 14, 2012 6:55 AM in reply to mytaxsite.co.uk

Report

YouTube is indeed easier but the actual video I’ll use for the site (the drag racing one is just a demo) is something we don’t want our competition to see, at least not yet.

Thank you very, very much for your help.

|

Mark as:

Currently Being Moderated

5. adninjastrator,

Aug 14, 2012 7:41 AM in reply to Acemon99

Report

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:

Dreamweaver

Trying to place an image before a video starts

Aug 13, 2012 5:01 PM

More Like This

Bookmarked By (0)

Answers + Points = Status