0

ユーザーに見てもらいたいビデオ (vimeo) チュートリアルがあります。

各ビデオの後には、短いクイズが続きます。

これを行うのは、ユーザーがビデオをバイパスしてクイズに直行していることが経営陣の注意を引いたためです。

以下のコードを使用して、ここで大きな助けになりました。

<!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>

ここにフィドルがあります

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

私が混乱しているのは、Clickリンクが表示される前にビデオが完全に再生されるため、フィドルが期待どおりに機能することです。

ただし、同じコードを (自分の PC で) 実行すると、ビデオを見た後にリンクが表示されません。

何が間違っている可能性がありますか？

4

0 に答える 0