0

我找到了一个非常有用的指南，解释了使用 froogaloop 的基本 vimeo 控制器。

我对javascript的理解非常有限，需要一些帮助将控制器按钮重新映射到div。

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<button>Play</button>
<button>Pause</button>

<div class="play">Play</div> <!-- I want to use this div instead of buttons -->

<script>

$(function() {
    var iframe = $('#player1')[0];
    var player = $f(iframe);

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

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

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

</script>

我一直在提到的代码笔： https ://codepen.io/bdougherty/pen/JgDfm

谢谢！

4

1 回答 1

1

老实说，我根据按钮的 innerhtml 调用某些东西会做出一个奇怪的决定。它使代码混乱，一旦设计师决定箭头比玩更好，它就会中断。

但是对于您的问题，我会这样做：

$(function() {
  var iframe = $('#player1')[0];
  var player = $f(iframe);

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

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

  // Call the API when a button is pressed
  $('.play').bind('click', function() {
    player.api('play');
  });
  $('.pause').bind('click', function() {
    player.api('pause');
  });
});
<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 id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<div class="play">Play</div>
<!-- I want to use this div instead of buttons -->
<div class="pause">Pause</div>

于 2017-07-07T13:15:40.380 回答