jPlayer网页播放器皮肤、代码基本完成

最近在做的一个项目，直接上代码，主要用到开源网页播放器jplayer，这个播放器浏览器兼容性没得说，很棒！老外写的东西就是专业！下载地址：http://www.jplayer.org

先发我做的效果图，看图不爽的话，那在线试听下儿吧：http://www.szphpwebdesign.com/jplayer/player.html 嘻嘻~~~

 

<div><a href="http://b207.photo.store.qq.com/http_imgload.cgi?/rurl4_b=173b5422e7a0528e4afe14b8debece8e8350a4eeb7bc50650d57d8987c12d02096264b6d308f8a99770e0a751820006519def461ac5bd23bcf7bb28fec883a2c47e335de2f694b418765a32c01dfb1feaa0e4573&a=207&b=207" target="_blank">

</a></div>

下面是代码部分，暂时还没有用PHP+MySQL+JQuery+AJAX+JSON从后台取数据生成动态播放列表哈，加上这个就完美了，嘿嘿：

=====================================================================================================

<div><!DOCTYPE html PUBLIC "-//W3C//DTD  XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></div>

<div><html  xmlns="http://www.w3.org/1999/xhtml"></div>

<div><head></div>

<div><meta http-equiv="Content-Type"  content="text/html; charset=utf-8" /></div>

<div><meta name="description"  content="" /></div>

<div><meta name="keywords" content=""  /></div>

<div><title>jPlayer网页播放器测试代码</title></div>

<div><link rel="stylesheet"  type="text/css" href="reset.css" /></div>

<div><script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></div>

<div><script type="text/javascript"  src="js/jquery.jplayer.min.js"></script></div>

<div><style  type="text/css"></div>

<div>body{font:12px/1.5  tahoma,arial,\5b8b\4f53,sans-serif;}</div>

<div>#player{margin:20px auto  0;width:186px;padding:35px 6px 0 7px;height:439px;background:url(paihang_bg.jpg)  no-repeat;}</div>

<div>div.jp-jplayer{width:0px;height:0px;}</div>

<div>div.jp-audio{font:12px/1.5  tahoma,arial,\5b8b\4f53,sans-serif;}</div>

<div>div.jp-audio div.jp-type-playlist  div.jp-interface{width:186px;height:60px;position:relative;}</div>

<div>div.jp-interface ul.jp-controls  li{display:inline;}</div>

<div>div.jp-interface ul.jp-controls  a{position:absolute;overflow:hidden;text-indent:-9999px;}</div>

<div>a.jp-play,a.jp-pause{width:29px;height:29px;z-index:1;}</div>

<div>div.jp-audio div.jp-type-playlist  a.jp-play,div.jp-audio div.jp-type-playlist  a.jp-pause{top:18px;left:30px;}</div>

<div>a.jp-play{background:url("play.png")  no-repeat;}</div>

<div>a.jp-play:hover{background:url("play.png")  no-repeat;}</div>

<div>a.jp-pause{background:url("pause.png")  no-repeat;display: none;}</div>

<div>a.jp-pause:hover{background:url("pause.png")  no-repeat;}</div>

<div>div.jp-audio div.jp-type-playlist  a.jp-stop{top:24px;left:61px;}</div>

<div>a.jp-stop{background: url("stop.png")  no-repeat;width:18px;height:18px;z-index:1;}</div>

<div>a.jp-stop:hover{background:  url("stop_hover.png") no-repeat;}</div>

<div>div.jp-audio div.jp-type-playlist  a.jp-previous{left:10px;top:24px;}</div>

<div>a.jp-previous{background:  url("prev.png") no-repeat;width:18px;height:18px;z-index:1;}</div>

<div>a.jp-previous:hover{background:  url("prev_hover.png") no-repeat;}</div>

<div>div.jp-audio div.jp-type-playlist  a.jp-next{top:24px;left:81px;}</div>

<div>a.jp-next{background: url("next.png")  no-repeat;width:18px;height:18px;z-index:1;}</div>

<div>a.jp-next:hover{background:  url("next_hover.png") no-repeat;}</div>

<div>div.jp-progress{position:absolute;overflow:hidden;background-color:#000;}</div>

<div>div.jp-audio div.jp-type-playlist  div.jp-progress {top:52px;left:35px;width:117px;height:3px;}</div>

<div>div.jp-seek-bar{background:#000;width:0px;height:100%;cursor:pointer;}</div>

<div>div.jp-play-bar{background:#e721b9;width:0px;height:100%;}</div>

<div>div.jp-seeking-bg{background:url("pbar-ani.gif");}</div>

<div>a.jp-mute,a.jp-unmute{width:9px;height:10px;}</div>

<div>div.jp-audio div.jp-type-playlist  a.jp-mute,div.jp-audio div.jp-type-playlist  a.jp-unmute{top:28px;left:112px;}</div>

<div>a.jp-mute{background:url("volume1.png")  no-repeat;}</div>

<div>a.jp-mute:hover{background:url("volume1_hover.png")  no-repeat;}</div>

<div>a.jp-unmute{background:url("unvolume1.png")  no-repeat;display:none;}</div>

<div>a.jp-unmute:hover{background:url("unvolume1_hover.png")  no-repeat;}</div>

<div>div.jp-volume-bar{position:absolute;overflow:hidden;background:url("volume2.png")  repeat-x;width:49px;height:10px;cursor:pointer;}</div>

<div>div.jp-audio div.jp-type-playlist  div.jp-volume-bar{top:28px;left:127px;}</div>

<div>div.jp-volume-bar-value{background:url("volume3.png")  repeat-x;width:0px;height:10px;}</div>

<div>div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique;}</div>

<div>div.jp-duration{text-align:right;}</div>

<div>div.jp-audio div.jp-type-playlist  div.jp-current-time,div.jp-audio div.jp-type-playlist  div.jp-duration{top:48px;left:10px;width:165px;}</div>

<div>div.jp-playlist{width:186px;height:368px;margin-top:1px;}</div>

<div>div.jp-playlist  div{width:186px;height:368px;}</div>

<div>div.jp-playlist div  ul{width:186px;height:29px;line-height:29px;}</div>

<div>div.jp-playlist div  ul#playlist-tit{width:186px;height:23px;line-height:23px;}</div>

<div>div.jp-playlist div ul  li{float:left;}</div>

<div>div.jp-playlist div ul#playlist-tit  li.col1{width:25px;background:none;}</div>

<div>div.jp-playlist div ul#playlist-tit  li.col2{width:106px;}</div>

<div>div.jp-playlist div ul#playlist-tit  li.col3{width:55px;}</div>

<div>div.jp-playlist div ul  li.col1{width:25px;text-align:center;color:#fff;background:url(sort4.gif) center  center no-repeat;}</div>

<div>div.jp-playlist div ul  li.col2{width:107px;overflow:hidden;}</div>

<div>div.jp-playlist div ul  li.col3{width:54px;text-align:center;}</div>

<div>div.jp-playlist div ul  li#col1{background:url(sort1.gif) center center no-repeat;}</div>

<div>div.jp-playlist div ul  li#col2{background:url(sort2.gif) center center no-repeat;}</div>

<div>div.jp-playlist div ul  li#col3{background:url(sort3.gif) center center no-repeat;}</div>

<div>div.jp-playlist div ul li.col2  a.jp-playlist-current{color:#e721b9;font-weight:bold;}</div>

<div></style></div>

<div></head></div>

<div><body></div>

<div><div id="player"></div>

<div><div  id="jquery_jplayer_1"></div></div>

<div><div  class="jp-audio"></div>

<div><div  class="jp-type-playlist"></div>

<div><div  id="jp_interface_1"></div>

<div><ul  class="jp-controls"></div>

<div><li><a  href="#" tabindex="1">play</a></li></div>

<div><li><a  href="#"  tabindex="1">pause</a></li></div>

<div><li><a  href="#" tabindex="1">stop</a></li></div>

<div><li><a  href="#" tabindex="1">mute</a></li></div>

<div><li><a  href="#"  tabindex="1">unmute</a></li></div>

<div><li><a  href="#"  tabindex="1">previous</a></li></div>

<div><li><a  href="#" tabindex="1">next</a></li></div>

<div></ul></div>

<div><div  class="jp-progress"><div><div  class="jp-play-bar"></div></div></div></div>

<div><div  class="jp-volume-bar"><div  class="jp-volume-bar-value"></div></div></div>

<div><div  class="jp-current-time"></div></div>

<div><div  class="jp-duration"></div></div>

<div></div></div>

<div><div  id="jp_playlist_1"></div>

<div><div><ul><li></li></ul></div></div>

<div></div></div>

<div></div></div>

<div></div></div>

<div></div></div>

<div><script  type="text/javascript"></div>

//<![CDATA[

<div>$(document).ready(function(){</div>

<div>var  Playlist = function(instance, playlist, options) {</div>

<div>var  self = this;</div>

<div>this.instance  = instance;</div>

<div>this.playlist  = playlist;</div>

<div>this.options  = options;</div>

<div>this.current  = 0;</div>

<div>this.cssId  = {</div>

jPlayer: “jquery_jplayer_”,

interface: “jp_interface_”,

playlist: “jp_playlist_”

<div>};</div>

<div>this.cssSelector  = {};</div>

<div>$.each(this.cssId,  function(entity, id) {</div>

<div>self.cssSelector[entity]  = "#" + id + self.instance;</div>

<div>});</div>

<div>if(!this.options.cssSelectorAncestor)  {</div>

<div>this.options.cssSelectorAncestor  = this.cssSelector.interface;</div>

<div>}</div>

<div>$(this.cssSelector.jPlayer).jPlayer(this.options);</div>

<div>$(this.cssSelector.interface  + " .jp-previous").click(function() {</div>

<div>self.playlistPrev();</div>

<div>$(this).blur();</div>

<div>return  false;</div>

<div>});</div>

<div>$(this.cssSelector.interface  + " .jp-next").click(function() {</div>

<div>self.playlistNext();</div>

<div>$(this).blur();</div>

<div>return  false;</div>

<div>});</div>

<div>};</div>

<div>Playlist.prototype  = {</div>

<div>displayPlaylist:  function() {</div>

<div>var  self = this;</div>

var listItemStart = “<ul id=\”playlist-tit\” class=\”clearfix\”><li class=\”col1\”> </li><li class=\”col2\”>名称</li><li class=\”col3\”>下载次数</li></ul>”;

<div>$(this.cssSelector.playlist  + " div").empty().append(listItemStart);</div>

<div>for  (i=0; i < this.playlist.length; i++) {</div>

<div>var  listItem = "<ul class=\"clearfix\">";</div>

<div>listItem  += "<li class=\"col1\" id=\"col" + (1+i) + "\">" + (1+i) +  "</li>";</div>

<div>listItem  += (i === this.playlist.length-1) ? "<li class='jp-playlist-last col2'>" :  "<li class=\"col2\">";</div>

<div>listItem  += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i  +"' tabindex='1'>"+ this.playlist[i].name +"</a>";</div>

<div>listItem  += "</li>";</div>

<div>listItem  += "<li class=\"col3\">" + this.playlist[i].download +  "</li>";</div>

<div>listItem  += "</ul>";</div>

<div>$(this.cssSelector.playlist  + " div").append(listItem);</div>

<div>$(this.cssSelector.playlist  + "_item_" + i).data("index", i).click(function() {</div>

<div>var  index = $(this).data("index");</div>

<div>if(self.current  !== index) {</div>

<div>self.playlistChange(index);</div>

<div>}  else {</div>

<div>$(self.cssSelector.jPlayer).jPlayer("play");</div>

<div>}</div>

<div>$(this).blur();</div>

<div>return  false;</div>

<div>});</div>

<div>}</div>

<div>playlistInit:  function(autoplay) {</div>

<div>if(autoplay)  {</div>

<div>this.playlistChange(this.current);</div>

<div>}  else {</div>

<div>this.playlistConfig(this.current);</div>

<div>}</div>

<div>playlistConfig:  function(index) {</div>

<div>$(this.cssSelector.playlist  + "_item_" +  this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");</div>

<div>$(this.cssSelector.playlist  + "_item_" +  index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");</div>

<div>this.current  = index;</div>

<div>$(this.cssSelector.jPlayer).jPlayer("setMedia",  this.playlist[this.current]);</div>

<div>playlistChange:  function(index) {</div>

<div>this.playlistConfig(index);</div>

<div>$(this.cssSelector.jPlayer).jPlayer("play");</div>

<div>playlistNext:  function() {</div>

<div>var  index = (this.current + 1 < this.playlist.length) ? this.current + 1 :  0;</div>

<div>this.playlistChange(index);</div>

<div>playlistPrev:  function() {</div>

<div>var  index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length -  1;</div>

<div>this.playlistChange(index);</div>

<div>}</div>

<div>};</div>

//下面的数据格式（绿色部分）是不是有些像JSON数据格式呢？对，就是把下面数据部分换成AJAX从后台取数据生成JSON数据格式就可以了，不过要看清楚JSON数据格式和js数组对象格式的区别O(∩_∩)O哈！

var audioPlaylist = new Playlist(“1”, [

{

name:”Tempered Song”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg”,

download:9999

{

name:”Hidden”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg”,

download:8888

{

name:”Lentement”,

free:true,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg”,

download:7777

{

name:”Lismore”,

free:true,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg”,

download:6666

{

name:”The Separation”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg”,

download:5555

{

name:”Beside Me”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-06-Beside-me.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-06-Beside-me.ogg”,

download:4444

{

name:”Bubble”,

free:true,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg”,

download:3333

{

name:”Stirring of a Fool”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg”,

download:2222

{

name:”Partir”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg”,

download:1111

{

name:”Thin Ice”,

free:true,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg”,

download:1000

{

name:”Stirring of a Fool”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-08-Stirring-of-a-fool.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg”,

download:999

{

name:”Partir”,

mp3:”http://www.jplayer.org/audio/mp3/Miaow-09-Partir.mp3″,

oga:”http://www.jplayer.org/audio/ogg/Miaow-09-Partir.ogg”,

download:888

}],

<div>{</div>

<div>ready:  function() {</div>

<div>audioPlaylist.displayPlaylist();</div>

<div>audioPlaylist.playlistInit(false);</div>

<div>ended:  function() {</div>

<div>audioPlaylist.playlistNext();</div>

<div>play:  function() {</div>

<div>$(this).jPlayer("pauseOthers");</div>

swfPath: “js”,

supplied: “oga, mp3”

<div>});</div>

<div>});</div>

<div>//]]></div>

<div></script></div>

<div></body></div>

<div></html></div>

</div>

</div>

 



</div>

1 条评论

小冷说道：

2011年6月26日上午8:52

哈哈～～哥们，最近工作情况咋样啊？

评论已关闭。

相关文章

1 条评论