Question

我已经下载了Jplayer并在网站上使用了Jplayer视频播放列表。现在我使用一些div作为拇指。关键是我无法在拇指点击上播放视频。例如。如果我点击thumb1 id，那么第一个视频应播放，如果第二个视频播放。这是我的播放列表代码。

//<![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
        });

});

//]] GT;

现在，请你告诉我，我很困惑，如何做到这一点。我的播放列表的名称是什么？感谢。

Answer 1

jPlayer播放列表与当前播放列表的曲目编号一起使用...因此，如果您想播放“Incredibles Teaser”歌曲，您可以这样做：

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

});

以下是此jPlayer插件的文档：http://jplayer.org/latest/demo-02-jPlayerPlaylist/

点击一个div，Jplayer播放播放列表中的视频

1 个答案: