我们有一个希望我们的用户观看的视频 (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>
这是小提琴
我感到困惑的是,小提琴按我们的预期工作,因为它让视频在Click
链接可见之前完全播放。
但是,当我(在我的 PC 上)运行相同的代码时,观看视频后链接不会显示。
有什么想法可能是错的吗?