jQuery可拖动的播放进度条插件

使用方法：

引入jquery-PlayBar.js或者jquery-playBar.min.js

引入barstyle.css

<link  href="css/barstyle.css" rel="stylesheet">
<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery-PlayBar.min.js"></script>

插件初始化、参数配置

<script>
$(function(){
    var action=true;
    $('.contral').click(function(){
        if(action){
            $.playBar.Stop();
            action=false;
            $(this).html("开始");
            }else{
                $.playBar.Begin();
                action=true;
                $(this).html("停止");
                }
        });
    $.playBar.addBar($('.test'),1000*60);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
    $.playBar.changeBarColor("#72dfff");//设置进度条颜色
    
    });
</script>

HTML结构

<div class="contral">停止</div>
<div class="test"></div>

配置说明：

$.playBar.addBar($('.test'),1000*64);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
$.playBar.changeBarColor("#F60");//设置进度条颜色
$.playBar.changeFontColor("#fff")//设置时间颜色
$.playBar.stop()//进度条停止
$.playBar.Begin()//进度条开始
$.playBar.restTime(1000)//重新设置时间，并重新开始播放
var t=$.playBar.getTheTime()//获得当前的时间