Froogaloop＆jQuery的多個播放按鈕和vimeo

我在啓動包含vimeo視頻的twitter引導模式的頁面上有多個播放按鈕。不幸的是，我無法獲得播放按鈕來播放特定的視頻。它播放所有。有沒有辦法將每個播放按鈕綁定到單個視頻？Froogaloop＆jQuery的多個播放按鈕和vimeo

我有一個例子裝載了這裏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>

來源

2013-01-02 Philip Meissner

因此，答案是很簡單的。我添加了一個onlick模式啓動鏈接。

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

來源

2013-01-08 14:45:05

該死的。這看起來太簡單了，一夜之間花費我很多時間。 – Imperative

生活。節電器。謝謝！ –

Froogaloop＆jQuery的多個播放按鈕和vimeo

回答

相關問題