记录下jplayer的简单demo

jplay一个播放器的工具包，依赖于jquery或者zepto，有zepto所以相当于是PC和移动都支持。

它的官方文档为：http://www.jplayer.cn/

同时也推出的react的支持包，具体参考：https://github.com/jplayer/react-jPlaylist

所以还是蛮好用的一个工具

以下是自己要使用时，写的个小demo，自己留存以便以后参考

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script type="text/javascript" src='http://www.jplayer.cn/demos/lib/jquery.min.js'></script>
        <script type="text/javascript" src='http://www.jplayer.cn/demos/dist/jplayer/jquery.jplayer.min.js'></script>
    </head>
    <body>
        <div id="test"></div>
        <div>
            <button id="play">play</button>
            <button id="pause">pause</button>
            <button id="next">next</button>
            <button id="goEnd">goEnd</button>
            <p id="progress">0</p>
        </div>
        <script>
            var musicUrl = "http://ws.stream.qqmusic.qq.com/108709929.m4a?fromtag=46";
            var nextMusicUrl = "http://ws.stream.qqmusic.qq.com/108029927.m4a?fromtag=46";
            $("#test").jPlayer({            //配置音乐源文件，并自动播放
                ready: function() {
                    $(this).jPlayer("setMedia", {
                        mp3: musicUrl
                    }).jPlayer("play");
                } ,
                ended: function() {             //当前音乐结束后触发事件
                    console.log("play end");
                    $(this).jPlayer("setMedia", {
                        mp3: nextMusicUrl
                    }).jPlayer("play");
                } ,
                timeupdate : function(e){        //播放时间更新事件
                    $("#progress").text(parseInt(e.jPlayer.status.currentTime));
                }
            })
            $("#pause").bind("click" , function(){        //暂停
                $("#test").jPlayer("pause");
            });
            $("#play").bind("click" , function(){        //播放
                $("#test").jPlayer("play");
            });
            $("#next").bind("click" , function(){        //下一首
                $("#test").jPlayer("setMedia", {
                            mp3: nextMusicUrl
                        }).jPlayer("play");
            });
            $("#play").bind("click" , function(){        //播放
                $("#test").jPlayer("play");
            });
            $("#goEnd").bind("click" , function(){        //跳转到95%的位置播放
                $("#test").jPlayer("playHead", 95);
            });
        </script>
    </body>
</html>

 

 

就这样啦！！！

posted @ 2017-09-13 15:59  骨月枫🍁  阅读(540)  评论(0)  编辑  收藏  举报