Кнопка, которая загружает значения в плагин jQuery

Question

Я использую плагин Jquery для YouTube, найденный здесь: http://badsyntax.github.com/jquery-youtube-player/

Плагин позволяет указать заголовок для видео YouTube, которое вы хотите воспроизвести, и идентификатор видео YouTube. Вот фрагмент кода:

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 и заголовок видео. При нажатии я хотел бы, чтобы эти значения использовались для загрузки видео на YouTube с помощью плагина jQuery выше без обновления страницы .

Понятия не имею, как это сделать. Я потратил часы, пытаясь понять это без какой-либо удачи. Любая помощь будет очень. цениться

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

Также см. этот пример .

=== ОБНОВЛЕНИЕ ===

Поместите вызовы обработчика событий в атрибут 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>

Также см. обновленный пример .

=== ОБНОВЛЕНИЕ ===

Может быть, этот бесплатный пример ;-) может помочь вам:

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

Также смотрите это обновленный 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/

.. Фредрик