1

Vimeo ビデオを含む Twitter ブートストラップ モーダルを起動するページに複数の再生ボタンがあります。残念ながら、特定のビデオを再生するための再生ボタンを取得できません。それらすべてを再生します。各再生ボタンを 1 つの動画に関連付ける方法はありますか?

ここに例をロードしましたhttp://jsfiddle.net/pmeissner/WdMu8/

ジャバスクリプト:

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>​
4

1 に答える 1

3

したがって、答えは非常に簡単でした。モーダル起動リンクにオンリックを追加しました。

<a href="#" onclick="$f('put the id# of the player you want to play').api('play');">Play</a>
于 2013-01-08T14:45:05.053 に答える