仁恕教育

路漫漫其修远兮，吾将上下而求索！

日志

关于我

阿杰

文章分类

几款漂亮的播放器（转帖）

2010-08-17 17:06:55| 分类：博客技巧 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

很多博友问我如何在页面中加入播放器？网易博客自带的播放器确实很单一，尤其改版后可能由于系统问题我居然没找到换皮肤的地方，千篇一律的款式是不是会让人久而生厌呢？其实，要想让你自己的网页变得生动，一款漂亮的，合乎页面整体设计的播放器就显得极其重要了。现在为你推荐一些漂亮的播放器，你只需复制代码放入你的模块里，就可以使用了。

一、几款最常用的播放器

代码如下
<EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg loop="-1" autostart="FALSE" volume="0">

代码如下
<EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true">

代码如下
<EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0">

< p >

代码如下
<EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45 type=audio/mpeg loop="-1" autostart="true" volume="0">

重要提示：
1 WIDTH代表播放器宽度，HEIGHT代表高度，后面的数值可依自己喜好进行调整，如果要隐藏播放器，把width和height的数值改成0或者1就可以了（隐藏时一定要选择自动播放）。
2 AUTOSTART="TRUE" 这里TRUE代表自动播放，如果换成FALSE则代表手动播放，loop=2 表示重复两次。　

二、装饰美化你的播放器

有了基本的款式后，我们就可以根据自己的想象力，巧用表格等根据自己的图片素材，装饰美化自己的播放器啦。只要你有足够的创意，调整代码，就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。

首先我们可以为黑色播放器加上一个边缘
(中间绿底的部分为原黑色播放器代码)　

当然也可以为蓝色播放器加上粉色边缘
(中间粉底部分为原蓝色播放器代码)

　

代码如下
　

还可以将播放器置于一个单独的表格里，并加上表格的透明特效，播放器上的花纹就是表格的底图。(中间紫底部分的为原蓝色播放器代码)

　

代码如下:
<TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE>

还可以利用动态的GIF背景做成动态播放器
(中间紫底部分为原来的灰色播放器代码

　

代码如下:
<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif border=2>
<TBODY>
<TR>
<TD>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=60,style=3)">
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY> </TABLE>

甚至还可以将动态背景只在播放器底部运行
中间棕底字体为原灰色播放器代码

　

代码如下
<TABLE height=40 cellSpacing=0 cellPadding=0 width=300 background=http://bbs.guqu.net/UploadFile/2005-4/20054302075888035.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Chroma (Color='#000000')" height=40 cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=40 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE></TD>< /TR></TBODY></TABLE>

以上代码加入首页模块的方法是：

1、登陆自己的博客。

2、在编辑状态下，点最上方“预览我的博客”右边的工具条。

顺序打开 "排版设置——内容模板——自定义模板——添加自定义HTML（变成有颜色的）"

3、"添加自定义HTML"将显示出现在网页左下角

4、复制上面的代码到"自定义HTML"模板中”

5、根据喜好替换代码中的“歌曲地址”（不过这里只能放一个地址，即只能播放一首歌曲，想要多首歌曲顺序播放，麻烦一些：先将你喜欢的mp3格式的音乐地址放一起，复制到记事本，保存为文件名.m3u格式，所得文件要有提供上传的空间，推荐一个永久免费上传的网址http://upload.topchinesenews.com/把所得地址像当成一个普通歌曲地址，替换代码中的地址就行了，有兴趣的话可以试试）

6、点击"预览"查看效果,调试满意后点击"新增"保存,记得给你的模板起个名字后点“保存”

7、用鼠标拖动你添加的模块上方的编辑横条，把模块放到你喜欢的位置

8、点击网页右上角“保存”

9、"预览我的博客"，就可以看到出现在你的博客上了。

这么多五彩缤纷的播放器是不是很吸引你呢？只要你肯花心思，你可以用表格做成两层或三层的播放器来，呈现你自己不同于他人的特色。

转自：http://blog.163.com/yajun119@126/blog/static/8735727200741852624823/

评论这张

转发至微博

阅读(417)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_081064093083085074080085087095093080084064086094087068',
              blogTitle:'几款漂亮的播放器（转帖）',
              blogAbstract:'<FONT color=\"#330000\" size=\"2\" \>   很多博友问我如何在页面中加入播放器？网易博客自带的播放器确实很单一，尤其改版后可能由于系统问题我居然没找到换皮肤的地方，千篇一律的款式是不是会让人久而生厌呢？其实，要想让你自己的网页变得生动，一款漂亮的，合乎页面整体设计的播放器就显得极其重要了。现在为你推荐一些漂亮的播放器，你只需复制代码放入你的模块里，就可以使用了。</FONT\>  <P align=\"left\" \><FONT color=\"#330000\" size=\"2\" \>一、几款最常用的播放器<BR\><BR\>                         </FONT\></P\>',
              blogTag:'',
              blogUrl:'blog/static/9653281720107175655295',
              isPublished:1,
              istop:false,
              type:1,
              modifyTime:1317098198020,
              publishTime:1282036015295,
              permalink:'blog/static/9653281720107175655295',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:1,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/9653281720107175655295">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

仁恕教育

导航

日志

几款漂亮的播放器（转帖）

历史上的今天

最近读者

热度

评论

页脚