Jplayer学习
来源：互联网 发布：当兵对网络教育学籍 编辑：程序博客网 时间：2024/06/02 03:58
Jplayer介绍：
JPlayer是一个用于控制和播放mp3文件的jQuery插件，官方宣称The jQuery HTML5 Audio /Video Library。它在后台使用Flash来播放mp3文件，前台播放器外观完全可以使用 XHML/CSS自定义，并有充分的api可供调用，网上很多大神基于Jplayer开发了很多播放器。Janus最初是从城落电台看到专辑列表播放模式 好奇开始搜寻，在这里提供的是在官方基础上稍微修改的Jpalyer，主要特点有：完美支持中文现实；Blue/Red双色供选；五种播放模式。
官网：http://www.jplayer.org/
文档：http://www.jplayer.org/latest/developer-guide/
下载：http://www.jplayer.org/download/
例子：http://www.jplayer.org/latest/demos/
jplayer的使用上官网看看文档或者上网找找资料也就OK了。
注意：好像播放mp3要有服务器环境。
Jplay播放Mp3一个自定义播放器外观例子，该例子没有经过验证
效果http://dj520.92game.net/
<script language="javascript" type="text/javascript"> var play_mode = "rand"; var loop_mode = "list"; $(document.body).ready(function() { $.jPlayer.timeFormat.showHour = true; $("#player").jPlayer({ ready: function(event) { $("#list").get(0).selectedIndex = 0; $("#list").trigger("change") }, play: function(event) { $(".song-name").html(event.jPlayer.status.media.title); varid = event.jPlayer.status.media.id; varsrc = event.jPlayer.status.src; if (id != "undefined") { $("#download").attr("target", "_blank"); $("#download").attr("href", src) } else { $("#download").attr("target", ""); $("#download").attr("href", "#"); returnfalse } }, ended: function(event) { $(".song-name").html("播放完毕"); if (play_mode == "single" && loop_mode == "single") { varindex = $("#list").get(0).selectedIndex; $("#list").get(0).selectedIndex = index; $("#list").trigger("change") } elseif(play_mode == "rand") { varmax = document.getElementById("list").options.length; vartargetIndex = GetRandomNum(0, max); $("#list").get(0).selectedIndex = targetIndex; $("#list").trigger("change") } $(".song-name").html("欢迎使用DJ前卫音乐网播放器!") }, timeupdate: function(event) { varpercent = (event.jPlayer.status.currentTime / event.jPlayer.status.duration) * 100; $(".seek-bar").css("width", percent + "%"); $("#duration").html($.jPlayer.convertTime(event.jPlayer.status.duration)) }, supplied: "m4a", swfPath: "js", wmode: "window", loop: false, volume: 1, cssSelectorAncestor: "", cssSelector: { currentTime: "#playtime", duration: "#totaltime", seekBar: ".download-bar", playBar: ".seek-bar", play: ".play", pause: ".pause", mute: ".mute", unmute: ".unmute", volumeBar: "#volumn", volumeBarValue: ".volumn-bar" } }); $(".btn-stop").click(function() { $("#playing-state").html("播放停止"); $("#playing-songname").html("欢迎使用DJ前卫音乐网播放器!"); $("#player").jPlayer("stop"); return false }); $("#list").change(function() { varurl = $("#list").find("option:selected").val(); varsongname = $("#list").find("option:selected").text(); varid = $("#list").find("option:selected").attr("downloadid"); $("#player").jPlayer("setMedia", { title: songname, m4a: url, id: id }).jPlayer("play") }); $(".pre,.next").click(function() { vartargetIndex = -1; varindex = $("#list").get(0).selectedIndex; varmode = null; varstate = $("#playing-state").html(); mode = play_mode; switch (mode) { case "rand": { varmax = document.getElementById("list").options.length; if (loop_mode == "single") { targetIndex = index } else { if (this.className == "premode-bg") { if (index == 0) { targetIndex == document.getElementById("list").options.length - 1 } else { targetIndex = index - 1 } } elseif(this.className == "next mode-bg") { if (index == document.getElementById("list").options.length - 1) { targetIndex = 0 } else { targetIndex = index + 1 } } } break } case "single": { if (this.className == "premode-bg") { if (index == 0) { targetIndex = document.getElementById("list").options.length - 1 } else { targetIndex = index - 1 } } elseif(this.className == "next mode-bg") { if (index == document.getElementById("list").options.length - 1) { targetIndex = 0 } else { targetIndex = index + 1 } } break } case "order": { if (loop_mode == "single") { targetIndex = index } else { if (this.className == "premode-bg") { if (index == 0) { if (loop_mode == "list") { targetIndex = document.getElementById("list").options.length - 1 } elseif(loop_mode == "none") { $(".btn-stop").trigger("click") } } else { targetIndex = index - 1 } } elseif(this.className == "next mode-bg") { if (index == document.getElementById("list").options.length - 1) { if (loop_mode == "list") { targetIndex = 0 } elseif(loop_mode == "none") { $(".btn-stop").trigger("click") } } else { targetIndex = index + 1 } } else { returnfalse } } break } } if (targetIndex != -1) { $("#list").get(0).selectedIndex = targetIndex; $("#list").trigger("change") } returnfalse }); $(".controlsspan a").click(function() { $(".controlsspan a.order-mode").removeClass("order-mode-select"); $(".controlsspan a.random-mode").removeClass("random-mode-select"); $(".controlsspan a.single-mode").removeClass("single-mode-select"); varcurrent_classname = $(this).attr("class").split(" ")[0]; $(this).addClass(current_classname + "-select"); switch (current_classname) { case "order-mode": { play_mode = "order"; loop_mode = "list"; break } case "single-mode": { play_mode = "single"; loop_mode = "single"; break } case "random-mode": { play_mode = "rand"; loop_mode = "list"; break } } returnfalse }) });</script>
该代码没有经过验证，只是提供一种自定义播放器外观的方法
效果http://dj520.92game.net/
- JPlayer 学习
- Jplayer学习
- jPlayer使用指南
- jPlayer使用指南
- jPlayer使用指南
- JPLAYER使用手记
- jPlayer 详解
- jPlayer使用指南
- JPLAYER使用手记
- jPlayer使用指南
- jplayer 实战
- jPlayer使用指南
- jPlayer使用指南
- jplayer详解
- jPlayer实例
- jplayer自动播放
- jplayer实现滚动歌词
- jplayer 播放器二次开发
- 将VIM作为简易IDE
- ruby run case
- ZOJ 3702 Gibonacci number
- IBM X3850 M4装MS SERVER 2008 standard 64 细节事项
- hdu3081 最大流
- Jplayer学习
- python中文件读取模式
- Debian安装配置nginx,php,mysql,wordpress教程
- 图像处理之K-Means算法演示
- Installing MySQL Server on Debian
- Linux 接口地址的获取-暨获取本地IP地址（所有地址，包括IPv4，IPV6，MAC 地址）
- Reverse a Road 最短路
- solr查询参数使用说明
- windows用bat命令启动程序并传递参数
