Have an idea?

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

Delay next button until video watched

After reviewing the Forum (which is very useful), I was able to show a video without any controls and delay the Next button until it would have played.  With a 90 second video I was reasonably certain that respondents watched.

Now I have a 6 second video.  Is there a way to have the countdown start after the respondent hits Play?

This is the code I used with the 90 second video.

Thanks,
Mike

IN HTML HEAD:
<head>
   <link type="text/css" href="[%GraphicsPath()%]/system/jplayer.blue.monday.min.css" rel="stylesheet" />
   <script type="text/javascript" src="[%GraphicsPath()%]/system/jquery.min.js"></script>
   <script type="text/javascript" src="[%GraphicsPath()%]/system/jquery.jplayer.min.js"></script>
</head>

<script type="text/javascript">

function disableNext ( )
{
  originalValue = document.mainform.next_button.value;
  document.mainform.next_button.disabled = true;
  document.mainform.next_button.value = "Please wait (" + timeOutRemaining-- + " seconds)";
  setTimeout ( "countDown()", 1000 );
}

function countDown() {
    document.mainform.next_button.value = "Please wait (" + timeOutRemaining + " seconds)";
    if(timeOutRemaining > 0) {
              timeOutRemaining--;
              setTimeout("countDown();", 1000);
        } else {
              enableNextButton();
        }
}

function enableNextButton ()
{
  document.mainform.next_button.disabled = false;
  document.mainform.next_button.value = originalValue;
  
}

window.onload = disableNext;
var originalValue;
var timeOutRemaining = 90; //90 Seconds
  
  
</script>

IN HEADER1:

<center><head>
<script type="text/javascript">
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Click red box to play video",
                m4v: "[%GraphicsPath()%]Excuses270.mp4",
                ogv: "[%GraphicsPath()%]Excuses.ogg",
                webmv: "[%GraphicsPath()%]Excuses.webm",
                poster: "[%GraphicsPath()%]Excuses_Poster.png"
            });
        },
        swfPath: "[%GraphicsPath()%]/system",
        supplied: "webmv, ogv, m4v",
        size: {
            width: "480px",
            height: "270px",
            cssClass: "jp-video-270p"
        },
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
      });
    });
  </script>
</head>

<body>
<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
    <div class="jp-type-single">
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        <div class="jp-gui">
            <div class="jp-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div>
            <div class="jp-interface">
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-controls-holder"><div class="jp-controls"></div></div>
                <div class="jp-details"><div class="jp-title" aria-label="title">&nbsp;</div></div>
            </div>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>
</body>
</html>
</center>
asked May 10, 2017 by Mike (205 points)

1 Answer

0 votes
Per the jPlayer documentation, the "ended" event is called when the media finishes.  You could hide the next button with CSS, then show it using this event.

This simple example may help you get started:

<style>
#next_button {
    display: none;
}
</style>


<script>
$("#jquery_jplayer_1").jPlayer({
    ended: function() {
        $('#next_button').show();
    }
});
</script>
answered May 10, 2017 by Zachary Platinum Sawtooth Software, Inc. (76,750 points)
Thanks for your answer.  I deleted the <script> section of my HTML head tag where I disabled Next and did the countdown.  Then I added both of your codes snippets.  Next is suppressed but never comes back.

I have tried other changes but the first one seems to be closest to working.  What am I doing wrong?
Mike
I'm not sure what is not working.  I created a simple working example with this JS:

<script src="[% GraphicsPath() %]jquery.jplayer.min.js"></script>
<script>
$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Click red box to play video",
                webmv: "http://techslides.com/demos/sample-videos/small.webm",
                poster: "[%GraphicsPath()%]shapes.png"
            });
        },
        swfPath: "[%GraphicsPath()%]/system",
        supplied: "webmv",
        size: {
            width: "480px",
            height: "270px",
            cssClass: "jp-video-270p"
        },
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true,
        ended: function() {
            $('#next_button').show();
        }
   });
});
</script>


Does that look different than your code?
Your code works great!  My one issue is the subtlety with which the arrow appears.  Is there a way to display some text when it appears that they should click the arrow now?
Sure, you can put code to do whatever in the "ended" event.  To make text appear, I would start by putting this HTML wherever you want on the page:

<span class="clickNextMsg" style="display: none;">Click the next button!</span>


Then add this script after line 27 of my previous code:

$('.clickNextMsg').show();
Works like a charm!  Thanks!!
...