Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Trigger delay of Next Button based on playing a video

I currently have a timed delay on my next button that I have set to the length of a video (hosted on Vimeo and showing within iframe tags) as below:

<script type="text/javascript">
    $(document).ready(function(){
      $("div.submit_div").slideUp(00).delay(330000).fadeIn(1000);
    });
</script>

The issue is it doesn't always work out if they take a minute before clicking the play button on the video and then the Next button can appear before the video has completed.  Any examples of how I can have the timed delay only trigger once they have clicked the play button of the video?
asked Aug 10 by Jay Rutherford Gold (37,685 points)

1 Answer

0 votes
The Vimeo API includes an "ended" event that fires when the video has reached its conclusion.  You can place your ".submit_div" code and anything else to run at this event to achieve what you're after.  He's a simple example:

<div id="vimeoPlayer"></div>

<script>
var options = {
    id: 59777392,
    width: 640
};
var player = new Vimeo.Player('vimeoPlayer', options);
player.on('ended', function(){
    alert('Video ended!');
})
</script>
answered Aug 10 by Zachary Platinum Sawtooth Software, Inc. (153,100 points)
So the options var would need to be populated with the specific id of the video being played?  I'm not sure I understand how to incorporate the code I'm using with the example you have provided.
I haven't seen what work you have done already in embedding your video onto your page.  I just looked up the Vimeo documentation and started with their example.  I reckon you are already doing something like this with "Vimeo.Player" somewhere in your questionnaire?
I have a link like this in header 2

<div style="padding:56.25% 0 0 0;position:relative;"><span class="fr-video fr-draggable" contenteditable="false"><iframe src="https://player.vimeo.com/video/76979871?title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" class="fr-draggable"></iframe></span></div>
<script src="https://player.vimeo.com/api/player.js"></script>


Then in the footer I had this for the next button to appear after the set time:

<script type="text/javascript">
    $(document).ready(function(){
      $("div.submit_div").slideUp(00).delay(330000).fadeIn(1000);
    });
</script>
It looks like that may have been Vimeo's legacy approach before they created their new API.  If you replace your first line with my script and change the ID to 76979871, the code should work.
I still think I'm missing something.  Do I need to add the id="vimeoPlayer" into the div where my video link is?  Then your saying put this in the footer?

<script type="text/javascript">
var options = {
    id: 76979871,
    width: 640
};
var player = new Vimeo.Player('vimeoPlayer', options);
player.on('ended', function(){
      $("div.submit_div").slideUp(00).delay(330000).fadeIn(1000);
    });
</script>

I do want the Next button disabled when hitting the screen and then enabled after the video plays.  With this, it's never disabled.
<div id="vimeoPlayer"></div>

<style>
.submit_div {
    display: none;
}
</style>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var options = {
    id: 76979871,
    width: 640
};
var player = new Vimeo.Player('vimeoPlayer', options);
player.on('ended', function(){
    $(".submit_div").show();
});
</script>
Okay.  I had done that but was using #next_button instead of .submit_div.  When I enabled it, the Next button was on the left side of the screen.  When I used your script the Next button appears where expected but I can only see part of the button.  It's chopped after "Ne".

Also, what is the purpose of the width: 640 parameter?
Hi Jay,

Have you replaced .submit_div with #next_button at both the places, in css and js.
It seems you replaced only js.

If you have replaced at both the places, in that case - you can try using:

1. visibility:hidden; instead of display:none;
2. Replace $("#next_button").show(); with $("#next_button").css("visibility","visible");
Thanks Rahul.  I did replace it in both places.  I tried your revised script and it was not hiding the next button at all.  

I was able to come up with a solution.  I used #next_button in the css and js and then I added this and it positioned the Next Button where I wanted.

<style>
#next_button {
position: absolute;
left: 50%;
bottom: 1px;
}
</style>

I will add that perhaps part of the positioning problem was that I had also removed the Previous button.
...