Jplayer play a video from playlist on clicking a div

Question

i have download Jplayer and used Jplayer video playlist on the site. Now i am using some divs as thumbs. the point is i am not able to play the videos on thumbs click. eg. if i click thumb1 id then the first video should play and if second the second video. Here is my playlist code.

//<![CDATA[
$(document).ready(function () {
    var currentpath = "";
    new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title: "Big Buck Bunny Trailer",
                artist: "Blender Foundation",
                free: true,
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
                webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
            },
            {
                title: "Finding Nemo Teaser",
                artist: "Pixar",
                m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
                webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
                poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
            },
            {
                title: "Incredibles Teaser",
                artist: "Pixar",
                m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
                webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
                poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
            }
        ], {
            swfPath: "js",
            supplied: "webmv, ogv, m4v",
            smoothPlayBar: true,
            keyEnabled: true
        });

});

//]]>

Now can you please tell me i am confused like how to do it. And what is the name of my playlist. thanks.

Answer 1

jPlayer playlist works with the number of the track of the current playlist... so if you want to play "Incredibles Teaser" song you can either do :

$(document).ready(function () {
    var currentpath = "";
    var myPlaylist = new jPlayerPlaylist({ // Don't forget to create a var containing the playlist object
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title: "Big Buck Bunny Trailer",
                artist: "Blender Foundation",
                free: true,
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
                webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
            },
            {
                title: "Finding Nemo Teaser",
                artist: "Pixar",
                m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
                webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
                poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
            },
            {
                title: "Incredibles Teaser",
                artist: "Pixar",
                m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
                webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
                poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
            }
        ], {
            swfPath: "js",
            supplied: "webmv, ogv, m4v",
            smoothPlayBar: true,
            keyEnabled: true
        });

    myPlaylist.play(2); // Option 1 : Plays the 3rd item
    myPlaylist.play(-1); // Option 2 : Plays the last item

    // Now, if you want to click on a div to play something :
    $('#myDivID').on('click', function(){
        myPlaylist.play(2); // Option 1 : Plays the 3rd item
    });

});

Here is the doc for this jPlayer plugin : http://jplayer.org/latest/demo-02-jPlayerPlaylist/