记录下jplayer的简单demo

2017-09-13 20:32:15来源:cnblogs.com作者:骨月枫人点击

分享

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>

就这样啦!!!

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台