我正在使用 Froogaloop.js 在外部暂停和播放 vimeo 视频。现在我想在播放完 20 秒 视频后显示一个 div。如何实现这一点,我搜索了很多,但无法破解它的代码。这是我到目前为止尝试过的..
var iframe = document.getElementById('video');
// $f == Froogaloop
var player = $f(iframe);
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.api("play");
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.api("pause");
});
.button {
width: 48px;
height: 48px;
cursor: pointer;
}
.defs {
position: absolute;
top: -9999px;
left: -9999px;
}
iframe {
float: left;
width: 350px;
height: 200px;
}
.buttons {
padding: 1rem;
background: #f06d06;
float: left;
}
body {
padding: 1rem;
}
.show--div-20sec {
width: 100%;
background: red;
height: 80px;
float: left;
display: none;
}
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/froogaloop.js"></script>
<iframe src="https://player.vimeo.com/video/80312270?api=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>
<!-----------Show this div when video has been played for 20 seconds----->
<div class="show--div-20sec">
Show me after 20 second of video play
</div>
<div class="buttons">
<button id="play-button">Play</button>
<button id="pause-button">Pause</button>
</div>
非常感谢..提前致谢:)
最佳答案
试试这个代码
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.api("play");
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.api("pause");
});
setTimeout(function () {
player.addEvent('ready', function() {
player.addEvent('playProgress', onPlayProgress);
});
});
function onPlayProgress(data, id) {
var Time = data.seconds;
if (Time >= '20') {
$('.show--div-20sec').show();
}
}
});
关于javascript - vimeo 视频达到特定秒数时如何显示 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43971843/