2

There is a blank image (blank.png) with background hover effect, which works. I click on the image and it hides, then the video div shows, which works. What I can't figure out is how to get the video to play on the click on original blank image.

I have it working most of the way, but can't get the video to play on click of the image.

I am not the best with scripting.

An example of what I have done: http://jsfiddle.net/3s8EC/2/

<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.custom-th').click(function() {
        $('.custom-th').fadeOut('fast', function() {
            $("#thevideo").css("display","block");
            });
        });
    });
</script>

<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}

#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg)  no-repeat;
}
</style>

<div style="width: 100%; height: 370px; background-color: #000;">

<div id="promovid">
    <div class="custom-th">
        <img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />    
    </div>

    <div id="thevideo" style="display:none; padding: 0px;">
        <center>
        <video onclick="this.play();" preload="auto" width="600" height="370">
            <source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
        </video>
        </center>
    </div>

</div>
</div>

Any help is appreciated, but since I am not the best with scripting an actual example, or edit the jsfiddle, would be totally super awesome.

Thanks in advance for the help.

Eric Malcolm
  • 25
  • 1
  • 5

1 Answers1

2

Just add a $("video").click();

Like this:

$(document).ready(function() {
        $('.custom-th').click(function() {
            $('.custom-th').fadeOut('fast', function() {
                $("#thevideo").css("display","block");
                $("video").click();
             });
        });
});

Add an id to the video if you have multiple videos on the page and use it's id instead of "video" in the selector.

Prashant Tapase
  • 2,132
  • 2
  • 25
  • 34
Iansen
  • 1,268
  • 1
  • 10
  • 14
  • Thanks a lot, I was trying: video.addEventListener('click',function(){ video.play(); } Greatly, greatly appreciated. – Eric Malcolm Jun 25 '13 at 14:36
  • @lansen Now they want the image to come back after the video is played so they can play it again if they want. Is there a way to do this? The only thing I can think is to refresh the page. – Eric Malcolm Jun 25 '13 at 14:56
  • Just listen for the events the video triggers and add it back. Take a look at this : http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events – Iansen Jun 25 '13 at 17:14