将值加载到jQuery插件中的按钮

我正在使用以下Jquery youtube播放器插件：

该插件允许您指定要播放的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视频，而不刷新页面

---

我不知道怎么做。我花了好几个小时想弄明白，但一点运气都没有。任何帮助都将是巨大的。非常感谢

您可以在这里使用一些不同的方法。但主要的主题是让每个按钮都使用一个标识符来告诉脚本要做什么

您可以为每个按钮构建一个配置对象：

您还可以使用html5数据属性（这些属性由jQuery拾取）：

//具有数据属性的html元素
//并使用jquery获取它
$（'a'）。单击（函数（e）{
var self=$（此），
youtubeId=self.data（'youtubeId'）；
});

我建议使用数据属性方式，因为它提供了一些更简单的方法来添加新按钮

下面是一个简单的JSFIDLE：

…弗雷德里克

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>

视频1
视频2

js:

函数加载YouTube（id、标题）{
//使用参数id和标题创建您的配置
变量配置={
重复播放列表：1，
演出时间:1,，
身高：356，
工具栏：“播放、上一个、下一个、洗牌、重复、静音”，
//自定义播放列表
播放列表：{
标题：“随机视频”，
视频：[{id:id，title:title}]
}
};
//用空的YouTube插件html代码替换html元素
$（'.youtube player'）。替换为（$（'您需要启用Flash player 8+和JavaScript才能查看此视频'）；
//启动youtube插件
$（'.youtube播放器'）.player（配置）；
}
//单击处理程序
$（'#videoBtn1'）。单击（函数（）{
loadYouTube（'3QWIBGLFB0'，'title 1在这里'）；
});
$（'#videoBtn2'）。单击（函数（）{
loadYouTube（'b8MhLvjoBTs'，'title 2在这里'）；
});

另见

==更新===

将事件处理程序调用放入按钮的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>

video 1
视频2

另见

==更新===

也许这是免费的；-）示例可以帮助您：

html:

您需要启用Flash player 8+和JavaScript才能查看此视频。
视频1
视频2

js:

var-player=null；
var播放列表={
标题：“随机视频”，
视频：[]
};
函数loadYouTube（id、标题）{
//检查播放机是否尚未加载
if（typeof$（'#youtube-player'）.data（'jquery-youtube-player'）=='undefined'）{
//将视频添加到播放列表
playlist.videos.push（{id:id，title:title}）；
//装载机
播放器=$（“#youtube播放器”）
.show（）
.玩家({
重复播放列表：1，
演出时间:1,，
身高：356，
工具栏：“播放、上一个、下一个、洗牌、重复、静音”，
播放列表：播放列表
});
}
//如果玩家处于活动状态
否则{
var bFound=假；
//搜索视频是否已在播放列表中
对于（var i=0；i

---

另请参见此图。

谢谢您的回复。如何在上面的jQuery代码中插入ID和标题？对不起，我对这一点很陌生。如果你看我的第二个建议，你可以直接在html元素中添加id和标题。谢谢你的回复。我真的很感激。我已经在这上面呆了好几天了，您的代码示例将对我有很大帮助。是否可以将手柄移到JS之外？并使用html输入youtube id和标题？谢谢！你以前用过这个插件吗？我在上面的解决方案中遇到了一个问题。我希望当按下按钮#1时，视频#1被添加到播放列表中。如果按下按钮2，视频也将添加到播放列表中。然后用户可以选择在视频之间来回移动，并使用插件的一些其他功能（洗牌、重复）。类似于播放列表中有多个视频，可以切换到下一个视频、重复、洗牌等。如果我要求太多，请告诉我。有点像是添加到播放列表中的视频队列。非常感谢您抽出时间帮助我！我真的很喜欢它！再次感谢！！！

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

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');
});

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

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

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);
    }
}