【问题标题】:how to make a jQuery click function play a song in jPlayer?如何让 jQuery 点击函数在 jPlayer 中播放歌曲?
【发布时间】:2012-10-25 15:57:30
【问题描述】:

是否可以创建一个 jQuery click 函数来播放 jPlayer 播放列表中的第一首歌曲?

我一直在参考这里的文档:

http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

还有一个显示“播放”的链接示例,单击该链接会播放播放列表中的第一首曲目,但我不确定这是如何触发的。

文档稍后参考:

play([index:Number]) : Void

播放播放列表中的项目。如果没有给出参数,则播放当前项目。正索引从播放列表的开头播放项目,而负索引从结尾播放项目。

// Examples of usage:
myPlaylist.play(); // Plays the currently selected item
myPlaylist.play(0); // Plays the 1st item
myPlaylist.play(1); // Plays the 2nd item
myPlaylist.play(-1); // Plays the last item

所以我的问题是,这个功能可以通过 jQuery 中的点击函数来触发吗?如果可以的话,有人可以就所需的基本语法提出建议吗?

谢谢。

更新:

为了提供更多上下文和我正在尝试的示例,在头部区域有现有的点击功能,我也尝试在此处添加播放曲目的指令,例如:

<script>
$(document).ready(function(){
$(".open_doors").click(function(){
$("#leftdoor_inner").animate({"left": "-=164px"}, 'slow');
// etc ....
// here is attempt to trigger jPlayer
myPlaylist.play(0); 
});
</script>

这是头部区域中定义的播放列表:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1",
verticalVolume: "true",
}, [
{
title:"Cro Magnon Man",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
},
{
title:"Your Face",
mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
}
], {
swfPath: "js",
supplied: "oga, mp3",
wmode: "window"
});
});
//]]>
</script>

所以这个设置目前不起作用,我不确定我是否在 jQuery click 函数中正确引用了播放列表。

谢谢。

更新,解决方案:

好的,我想出了一个解决方案,我必须在脚本区域中添加代码,以下列方式定义播放列表(见上文):

{
swfPath: "js",
supplied: "oga, mp3",
wmode: "window"
});
$(".open_doors").click(function() {
myPlaylist.play(0);
});

【问题讨论】:

    标签: jquery click jplayer


    【解决方案1】:

    这似乎是一个太简单的答案,如果我遗漏了什么,请原谅我,但是你尝试过这种事情吗? (将“元素”替换为适合您用例的选择器。)

    $("element").click(function(){
        myPlaylist.play(0);
    });
    

    【讨论】:

    • 你好,我认为它就是这么简单,但我只是不确定要使用的语法。我已经在上面添加了我的尝试,谢谢。
    • 供您参考,我想出了上面发布的解决方案,再次感谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-03
    • 2018-07-17
    相关资源
    最近更新 更多