Question

我在页面上有多个播放按钮，用于启动包含vimeo视频的twitter引导模式。不幸的是，我无法播放特定视频的播放按钮。它全部播放。有没有办法将每个播放按钮绑定到一个视频？

我在这里加载了一个示例http://jsfiddle.net/pmeissner/WdMu8/

JAVASCRIPT：

jQuery(document).ready(function() {

// Enable the API on each Vimeo video
jQuery('iframe.vimeo').each(function() {
    Froogaloop(this).addEvent('ready', ready);
});

function ready(player_id) {
    // Keep a reference to Froogaloop for this player
    var player = $f(player_id),
        playButton = $('.video-play'),
        pauseButton = $('.video-pause');

    playButton.click(function() {
        player.api('play');
    });
    pauseButton.click(function() {
        player.api('pause');
    });
}

});

HTML：

<html>
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 
</head>
<body>
<div class="container">
   <p><a href="#myModal1" class="btn video-play" id="play_video_1" data-toggle="modal">Play Video 1</a>
       <a href="#myModal2" class="btn video-play" id="play_video_2" data-toggle="modal">Play Video 2</a></p>
   <p>Press X in the modal to stop the videos</p>
</div>
<div id="myModal1" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close video-pause" data-dismiss="modal">×</button>
    <h3>Video 1</h3>
  </div>
  <div class="modal-body">
    <iframe src="http://player.vimeo.com/video/51230259?api=1&amp;player_id=video_1" width="500" height="281" class="vimeo" id="video_1"></iframe>
  </div>
</div>
<div id="myModal2" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close video-pause" data-dismiss="modal">×</button>
    <h3>Video 1</h3>
  </div>
  <div class="modal-body">
    <iframe src="http://player.vimeo.com/video/39863899?api=1&amp;player_id=video_2" width="500" height="281" class="vimeo" id="video_2"></iframe>
  </div>
</div>

</body>
</html>

Answer 1

所以答案很简单。我在模型启动链接中添加了一个onclick。

<a href="#" onclick="$f('put the id# of the player you want to play').api('play');">Play</a>

多个播放按钮和vimeo与Froogaloop＆amp; jQuery的

1 个答案: