当 vimeo 视频达到特定秒数时如何显示 div？

Question

我正在使用 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>

帮助很多appriciated..提前感谢:)

Answer 1

我猜这是你问题的答案，你只需要修改 console.log 部分。

$(function() {
  var iframe = $('#video')[0];
  console.log()
  var player = $f(iframe);

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

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
  });

  // Call the API when a button is pressed
  $('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
  });

  function onPause() {}

  function onFinish() {}

  function onPlayProgress(data) {
    if (data.seconds >= 20) {
      $('.show--div-20sec').css('display', 'block')
    }
  }
});

.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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe src="//player.vimeo.com/video/80312270?api=1&player_id=video" 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>

Answer 2

试试这个代码

$(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();
    }
}
});

DEMO