注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

仁恕教育

路漫漫其修远兮,吾将上下而求索!

 
 
 

日志

 
 

几款漂亮的播放器(转帖)  

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 style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; BORDER-LEFT: #000000 3px dashed; BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0 bgColor=#00000>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD><P align=center><EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="- 1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

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


 

 

代码如下
 

<TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP: #ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted; BORDER-BOTTOM: #ff69b4 3px dotted" cellSpacing=0 cellPadding=0 align=center bgColor=white>
<TBODY>
<TR>
<TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5 border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="-1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

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

 

 

 

代码如下:
<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/

  评论这张
 
阅读(361)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017