你的位置:首页 > 软件开发 > Java > 记录下jplayer的简单demo

记录下jplayer的简单demo

发布时间:2017-09-13 17:00:09
jplay一个播放器的工具包,依赖于jquery或者zepto,有zepto所以相当于是PC和移动都支持。它的官方文档为 ><!doctype html><html> <head> <meta charset="utf- ...

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

它的官方文档为 ><!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='/images/loading.gif' data-original='http://www.jplayer.cn/demos/lib/jquery.min.js'></script> <script type="text/javascript" src='/images/loading.gif' data-original='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 = ""; var nextMusicUrl = ""; $("#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>

 

 

就这样啦!!!记录下jplayer的简单demo

原标题:记录下jplayer的简单demo

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录