CODEWITHSUNDEEP
javascriptjquerycsshtml5-video
raduzrc
raduzrc

Reputation: 167

Delay video after clicking play button

I have a div that has a full width video with position:absolute, that plays when clicking an image, and some text on top of the video.

What I want is when I click the play button for the text on top to fade out and after the text fades out, for the video to fade in and as well when I click the pause button for the video to fade out and after for the text to fade in.

I achieved something close to what I want but for some reason I cannot delay the video fadein the first time I click the play button. After the second click it seems to work fine.

Here is my code:

`<video preload="none" id="myVideo" width="100%" >
<source src="wp-content/themes/quill/images/video.mp4" type="video/mp4">
</video>`

`<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script> 
var vid = document.getElementById("myVideo"); 

function playVid() { 
    vid.play(); 
} 

function pauseVid() { 
    vid.pause(); 
} 
</script>

<script>
    $("#play").click(function(){
        $("#pause").fadeIn(1000);
        $("#myVideo").delay(1500).fadeIn(2000);
        $("#play").fadeOut(1000);
        $(".toph1").fadeOut(1000);
        $(".toph2").fadeOut(1000);
        $(".introduction").fadeOut(1000);
        $(".howitworks").fadeOut(1000);
        $(".logo").fadeOut(1000);
    });
</script>

<script>
    $("#pause").click(function(){
        $("#play").fadeIn(1000);
        $(".toph1").fadeIn(1000);
        $(".toph2").fadeIn(1000);
        $(".introduction").fadeIn(1000);
        $(".howitworks").fadeIn(1000);
        $(".logo").fadeIn(1000);
        $("#pause").fadeOut(1000);
        $("#myVideo").fadeOut(0);
    });
</script>`

I added the scripts at the bottom of the page.

Upvotes: 0

Views: 2015

Answers (2)

imvain2
imvain2

Reputation: 15847

Fadeout has another optional parameter that can be passed for an on complete function:

  $( "#div" ).fadeOut( "slow", function() {
    setTimeout(function() {vid.play();}, 750)
  });

the function in the above call will only be triggered once the fadeout animation has completed. You will need to change #div to the correct ID.

http://api.jquery.com/fadeout/#fadeOut-duration-complete

Upvotes: 1

begoyan
begoyan

Reputation: 424

If you want to have a delay, try to use timeout function:

setTimeout(function() {
    // do here..
}, 750)

Upvotes: 1

Related Questions