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>
就这样啦！！！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。