0

We have a video (vimeo) tutorial we would like our users to watch.

Each video is followed by a short quiz.

We are doing this because it was brought management's attention that users were bypassing the video and going straight to the quizzes.

I got some great help here with the code below:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> Video Tutorials</title>

 <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

      <script type='text/javascript' src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

  <style type='text/css'>
    #surveyLink { display:none; }
  </style>

<script type='text/javascript'>//<![CDATA[ 
 var VanillaRunOnDomReady = function() {
 var iframe = $('#player1')[0],
 player = $f(iframe),
 status = $('.status');

 // When the player is ready, add listeners for pause, finish, and playProgress
 player.addEvent('ready', function() {
     player.addEvent('finish', onFinish);
 });

 function onFinish(id) {
     $("#surveyLink").fadeIn();
 }
}

var alreadyrunflag = 0;

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1; 
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}

window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}//]]>  

</script>
</head>

<body>
  <body>
    <iframe id="player1" src="http://player.vimeo.com/video/39863899?api=1&player_id=player1" width="400" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div id="surveyLink">
    <a href="http://show.aspx?testid=27#activate"
    target="target-iframe"
    onclick="frames['target-iframe'].document.getElementById('activate')
    .scrollIntoView();return false">Click</a>
    </div>
</body>
</body>
</html>

Here is the fiddle

http://jsfiddle.net/QkGRd/10/

What I am confused about is that the fiddle works as we expected because it lets the video play completely before making the Click link visible.

However, when I run the same code (on my PC), the link doesn't display after watching the video.

Any ideas what could be wrong?

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
Chidi Okeh
  • 1,537
  • 8
  • 28
  • 50
  • Oy. You can avoid a lot of yelling if you learn how to format your posts properly. – Robert Harvey Jul 28 '14 at 18:32
  • 1
    What browser are you using on your PC? – Blazemonger Jul 28 '14 at 18:32
  • Thank you @RobertHarvey. I do know how to format but the formatting options disappeared - I didn't see any of them. Sorry about that. Blazemonger, I am using IE11. Thanks – Chidi Okeh Jul 28 '14 at 18:36
  • Well, I don't see the point of doing this as the user will still be able to push the video execution to the last second and the link will than appear, hence, skipping the vide. To make this work you're also going to have to disable the video controls while playing. – groo Jul 28 '14 at 18:43
  • 1
    @MarcosMaia, we have a setting in vimeo that allows us to hide the bar so user won't be able to slide the bar at all. – Chidi Okeh Jul 28 '14 at 18:51
  • @ChidiOkeh - Nice! I would test in other browsers other than IE11 just to make sure this is not something browser related. Also you should use your browser javascript debugger and put a breakpoint at the entrance of your js that should be triggered once the video finishes to make sure your code is being triggered. Have you done that? – groo Jul 28 '14 at 19:36

0 Answers0