Have an idea?

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

Error if embedded video is not played or clicked?

We have a survey page with a product introduction, which comes in the form of about 8 little (10 or so second long) videos.  They are all embedded, not streamed via hyperlink or other interface like YouTube or Vimeo.  I know some questions have answered something like this, but it looks like they are all for non-embedded videos.

We want to force everyone to at least hit play on all the videos.  If we can require that all videos are at least clicked on and played, then we would take that as a win.  

Could that be done in Javascript as a custom error message to require clicks on the videos, and if so, what is the code?  It doesn't appear to be able to be done without a Javascript.

Thanks in advance!
asked Aug 12, 2021 by FMetzger (270 points)
edited Aug 12, 2021 by FMetzger

1 Answer

0 votes
LOL @ "Asking that they pay attention is too much to ask."

If you haven't already, let's start by giving the videos a shared class and unique ID.

<video class="myVideo" id="video1" controls>...</video>
<video class="myVideo" id="video2" controls>...</video>
<video class="myVideo" id="video3" controls>...</video>


Then let's add this script to count the number of videos played:

<input id="videosPlayed" type="hidden"/>

<script>
$(document).ready(function(){
    var hash = {};
    $('.myVideo').each(function(){
        var video = this;
        video.addEventListener('play', function(){
            hash[video.id] = true;
            $('#videosPlayed').val(Object.keys(hash).length);
        });
    });
});
</script>


Now we know how many videos have started and can use custom verification like this:

if ($('#videosPlayed').val() < 8) {
    strErrorMessage = 'Please watch all videos.';
}
answered Aug 12, 2021 by Zachary Platinum Sawtooth Software, Inc. (206,100 points)
Still can't get it to work
...