js+css音频播放器,可设置收费试听模式(jPlayer.js)

来源:互联网 发布:b612星球 知乎 编辑:程序博客网 时间:2024/04/29 11:38

最近项目遇到音频试听模式开发需求,要求未付费会员免费试听3分钟,而且要求兼容主流的浏览器,经过搜索筛选,最好确定使用jPlayer.js+css实现的播放器;


优点:

1)功能齐全;

2)css编写样式,易于修改;

3)js实现功能,便于根据自己的需求修改;


使用过程,在网上的源代码默认打开自动播放,不能设置断点(免费试听时长限制):

注:网上有很多源码资源,我是在“站长素材”上面找到的


修改:

1)限制打开自动播放

ready:function (event){   $("#list").get(0).selectedIndex=0;   $("#list").trigger("change");   $("#player").jPlayer("stop");//新加的代码},

新加的代码是用来限制自动播放的:

 $("#player").jPlayer("stop");


2)设置免费播放时长限制:

timeupdate:function(event){    var percent = (event.jPlayer.status.currentTime / event.jPlayer.status.duration) *100;    //新加限制时长的语句    if(event.jPlayer.status.currentTime>10){       $("#player").jPlayer("stop");    }        $(".seek-bar").css("width",percent + "%");    $("#duration").html($.jPlayer.convertTime(event.jPlayer.status.duration));},

代码中的if语句,就是限制时长的条件里面的数字“10”是限制的秒数;

最终效果是:播放10秒自动停止播放


文章来源:http://www.lejuxx.com/index.php/Home/Index/main/article_id/6.html(乐聚学习)

0 0
原创粉丝点击