0

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.

2 Answers 2

1

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

setTimeout(function() {
    // do here..
}, 750)
2
  • I did this: setTimeout(function playVid() { vid.play(); }, 2000) but now the video starts to play on it's own after 2 seconds.
    – raduzrc
    Apr 7, 2016 at 13:12
  • 1
    The correct line was: function playVid() { setTimeout(function(){ vid.play(); , 750);} Thank you
    – raduzrc
    Apr 7, 2016 at 15:06
1

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

4
  • Same problem as the answer bellow: the video has a timeout but after that it starts playing on his own
    – raduzrc
    Apr 7, 2016 at 13:34
  • so you don't want the video to play, but rather just fade in when the object fades out? if so, replace the settimeout with this: $("#myVideo").delay(1500).fadeIn(2000)
    – imvain2
    Apr 7, 2016 at 13:38
  • That line already exists in: $("#play").click(function(){} and it works but only after the second click on the play button. The first time I click it, it appears instantly
    – raduzrc
    Apr 7, 2016 at 14:51
  • I wrote the code wrong it works with just: function playVid() { setTimeout(function(){ vid.play(); }, 750);}
    – raduzrc
    Apr 7, 2016 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.