按鈕加載值到jQuery插件

Question

我使用jQuery YouTube播放器插件在這裏找到：http://badsyntax.github.com/jquery-youtube-player/

該插件允許你指定你想要播放的YouTube視頻和YouTube視頻ID的標題。這裏是它的代碼片段：

var config = { 

      repeatPlaylist: 1, 
      showTime: 1, 
      height: 356, 
      toolbar: 'play,prev,next,shuffle,repeat,mute', // comma separated list of toolbar buttons 

      // Custom playlist 
      playlist: { 
       title: 'Random videos', 
       videos: [ 
        { id: 'youtube video id goes here', title: 'title goes here' }, 
       ] 
      } 

     }; 

我想創建一個按鈕，並分配youtube id和視頻標題。按下時，我希望這些值可用於使用上面的以上的jQuery插件加載YouTube視頻，而無需刷新頁面。

我不知道如何做到這一點。我花了好幾個小時試圖弄清楚它沒有任何運氣。任何幫助都會很大。讚賞

Answer 1

HTML：

<div class="youtube-player"></div>   <!-- this element will be replaced --> 

<button type="button" id="videoBtn1">video 1</button> 
<button type="button" id="videoBtn2">video 2</button> 

JS：

function loadYouTube(id, title) { 
    // your config with the parameters id and title 
    var config = { 
     repeatPlaylist: 1, 
     showTime: 1, 
     height: 356, 
     toolbar: 'play,prev,next,shuffle,repeat,mute', 
     // Custom playlist 
     playlist: { 
      title: 'Random videos', 
      videos: [{ id: id, title: title }] 
     } 
    }; 
    // replace the html element with an empty you-tube plugin html code 
    $('.youtube-player').replaceWith($('<div class="youtube-player"><div class="youtube-player-video"><div class="youtube-player-object">You need Flash player 8+ and JavaScript enabled to view this video.</div></div></div>')); 
    // start youtube-plugin 
    $('.youtube-player').player(config); 
} 

// click handlers 
$('#videoBtn1').click(function() { 
    loadYouTube('3qQWibGlfb0', 'title 1 goes here'); 
}); 
$('#videoBtn2').click(function() { 
    loadYouTube('b8MhLvjoBTs', 'title 2 goes here'); 
}); 

另見this example。

=== UPDATE ===

把事件處理程序調用到按鈕的一個onclick屬性，並在JavaScript中刪除：

<button type="button" id="videoBtn1" onclick="loadYouTube('3qQWibGlfb0', 'title 1 goes here');">video 1</button> 
<button type="button" id="videoBtn2" onclick="loadYouTube('b8MhLvjoBTs', 'title 2 goes here');">video 2</button> 

另見the updated example。

=== UPDATE ===

也許這個免費;-)例子可以幫助你：

HTML：

<div id="youtube-player"> 
    <div class="youtube-player-video"> 
     <div class="youtube-player-object"> 
      You need Flash player 8+ and JavaScript enabled to view this video. 
     </div> 
    </div> 
</div> 

<button type="button" id="videoBtn1" onclick="loadYouTube('3qQWibGlfb0', 'title 1 goes here');">video 1</button> 
<button type="button" id="videoBtn2" onclick="loadYouTube('b8MhLvjoBTs', 'title 2 goes here');">video 2</button> 

JS：

var player = null; 
var playlist = { 
    title: 'Random videos', 
    videos: [] 
}; 

function loadYouTube(id, title) { 
    // check if player isn't already loaded 
    if (typeof $('#youtube-player').data('jquery-youtube-player') == 'undefined') { 
     // add video to playlist 
     playlist.videos.push({id: id, title: title}); 
     // load player 
     player = $('#youtube-player') 
      .show() 
      .player({ 
       repeatPlaylist: 1, 
       showTime: 1, 
       height: 356, 
       toolbar: 'play,prev,next,shuffle,repeat,mute', 
       playlist: playlist 
      }); 
    } 
    // if player is active 
    else { 
     var bFound = false; 
     // search if video is already in playlist 
     for (var i = 0; i < playlist.videos.length; i++) { 
      if (playlist.videos[i].id == id) { 
       bFound = true; 
       break; 
      } 
     } 
     if (!bFound) {      
      // add video to playlist 
      playlist.videos.push({id: id, title: title}); 
      // load updated playlist 
      player.player('loadPlaylist', playlist); 
     } 
     // show current video 
     player.player('cueVideo', id); 
    } 
} 

另請參閱這updated jsfiddle。

Answer 2

你可以在這裏使用一些不同的方法。但主要的主題是每個按鈕都使用一個標識符來告訴腳本要做什麼。

你可以建立一個配置對象爲每個按鈕：

var btn_config = { myBtn1: { youtubeId: 1, title: 'abc' }, myBtn2: { youtubeId: 2, title: 'abc' }}; 
// And have each btn html element have the same id. And get the config like: 
$('a').click(function (e) { 
    var self = $(this), 
     currentConfig = btn_config[self.attr('id')]; 
    // currentConfig.youtubeId 
}); 

你也可以使用HTML5數據屬性（這些都是jQuery的皮卡）：

// A html element with data-attribute 
<a href="#" data-youtube-id="1" data-youtube-title="some title">Button</a> 
// And to pick it up with jquery 
$('a').click(function (e) { 
    var self = $(this), 
     youtubeId = self.data('youtubeId'); 
}); 

我會建議數據屬性的方式，因爲它給了一些更簡單的方法來添加新的按鈕。

這裏有一個快速的jsfiddle：http://jsfiddle.net/68csa/

..fredrik