5 Replies Latest reply: Aug 14, 2012 7:41 AM by adninjastrator RSS

    Trying to place an image before a video starts

    Acemon99 Community Member

      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...

        • 1. Re: Trying to place an image before a video starts
          mytaxsite.co.uk MVP

          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.

          • 2. Re: Trying to place an image before a video starts
            Acemon99 Community Member

            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.

            • 3. Re: Trying to place an image before a video starts
              mytaxsite.co.uk MVP

              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.

              • 4. Re: Trying to place an image before a video starts
                Acemon99 Community Member

                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.

                • 5. Re: Trying to place an image before a video starts
                  adninjastrator Community Member

                  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