T-Eye 第3只眼  
一直很用心很用心,用主赐予我的第三只眼睛,打量一切  
你笑盈盈的,在水一方,朝我微微招手——佛说,百世修得同舟渡

     本站导航

     链接事项      致谢事宜      纸条中心      每日E乐      搞笑趣图      求助通道
     博客素材      美博技巧      天籁之音      精华日志      祈愿漂流      风颖相册      管理入口
 

   

网页播放器插入Blog教程详解   【教程 音乐 美博技巧 源代码 网页播放器 】    2005-08-08

(本文系作者原创,转载请注明出自T-Eye 第三只眼 http://bobotalk.blogbus.com)

在此之前,风曾专门写过一篇日志——《系列教程之三:关于PP播放器》——专门讨论网页中插入播放器的问题。但由于时间的关系,那篇日志介绍的过于简陋了,以至于许多朋友看过以后心理仍然没什么概念。特此,就如何在博客中插入漂亮的播放器这一专题,T-Eye在此作进一步的讨论,也顺便跟大家共享一下在自己博客中插入播放器的经验。

首先需要声明的几点是:

1、本文中提及的网页播放器均为ExoBUD MP(II)。其原创作者为韩国作者庾珍雄(Jinwoong Yu),简体中文化作者为雨网国际liyu(yune_lee)。在此向他们的辛勤劳动表示感谢!如有使用简体中文版的ExoBUD MP(II),请尽可能保留这两位作者的信息。

2、本文仅探讨在博客(BloG中,如何插入网页播放器。与个人网站不同的是,目前大部分国内BloG托管商都不提供完全的首页定制上传,而只是提供模板让你修改——因此,以页面框架方式插入播放器变得不可行(如果有朋友找到此种插入方法,请不吝共享);所以,本文所讨论的插入网页播放器的办法是以内嵌框架机制(iframe)实现的

3、为了方便朋友们,T-Eye在此提供5种风格的播放器下载——前四种是横条方式的,主要应用于页面顶部或者底部以横条方式插入;第五种是在RUBY面版的基础上,风修改成的折叠式,便于在侧栏狭小的空间插入。需要说明的是,在此只是为了方便大家才提供下载;如由此而涉及版权问题,敬请告知。下表为网页播放器下载地址和效果演示地址: 

名称

下载地址

效果演示

Exobud MP的标准版本

点击下载 

演示地址

Exobud MP II 苹果Mac

点击下载 

演示地址

Exobud MP II CSS自由创作版

点击下载 

演示地址

Exobud MP II RUBY

点击下载 

演示地址

Exobud MP II T-Eye修改版

点击下载 

演示地址

 咋看起来在博客中插入播放器蛮复杂的,其实不会的,只要稍微懂些基本的html知识就行(不懂也没关系,碰上了上Google搜索就是了)。但最初因找不到简易的教程,倒也走了不少弯路。因此,为了给大家提供借鉴,让更多的人能够顺利的在自己的博上插入漂亮的播放器,风把自己摸索出来的经验总结如下:

一、做好前提工作

(一)下载播放器

本文已经提供了播放器的下载及演示地址。大家下载之前,可以先行点击演示地址预览各种风格的播放器效果。选择你需要的那一款,点击下载地址Down到你自己的硬盘上就是了。下载下来后看看,这个压缩文件的名字是一串数字吧?把它名字改成exobud_mp 。然后解压缩,产生一个名为exobud_mp的文件夹,里边有多个文件,找到这个文件——exobud.htm——双击它,就可以在浏览器中预览效果了呵呵。

(二)申请好放置播放器的空间

目前国内比较稳定的是中联,有100M的免费空间,而且没有任何广告,支持ftp,大家可以到中联免费主页空间这个申请页面去申请。申请后要注意记住自己的用户名密码。它审核挺快的,但是根据我的经验好像审核完毕后不会主动给你发邮件通知,所以你要主动的上去查看是否已经申请通过了。如果通过了,请牢记它提供给你的主页空间的访问地址,比如我申请下来的主页地址是:http://lamble.go3.icpcn.com/ ——后面就派上用场啦

二、个性化播放器

(一)播放参数设置

在你刚才解压的那个文件夹里找到exobudset.js这个文件,用记事本打开。打开之后有一大堆文字对吧,不要慌。从上往下仔细看,它是按照各个功能条目进行解释的。因为具体的各个功能条目已经在里边解释的非常清楚了,在此就不再赘言。

需要提醒的是,只有形如“var blnAutoStart = true;”之类的语句才会起作用,你需要做的只是按照上面的解释修改“=”号后面的值——“true 或者是“false”——就这么简单。

还有点需要指出的是,smi的歌词并不普及,若非特殊需要,可将字幕功能那一行值设为“false”。

(二)播放清单设置

在你刚才解压的那个文件夹里找到exobudpl.js这个文件,用记事本打开。老实说,这个文件里边作者的解释写的有些乱,风当时费老劲才搞明白。其实没那么复杂。因为之前不推荐大家使用字幕功能,因此,在这里就省了许多事。大家按照那里边的一般设定格式设定播放清单就行了。

举个例子:mkList("http://88ba.nease.net/dandan/sg.mp3","Secret Garden-半生缘");

这条语句的意思就是说:这首歌的标题是“Secret Garden-半生缘”;播放这首歌时,播放器会到你指定的歌曲存放地址“http://88ba.nease.net/dandan/sg.mp3”去读取——如此设定,你的播放清单里就有“Secret Garden-半生缘”这首歌了。

因此,相应的,把你想要设定的歌曲网址和名字放在mklist后括号里边引号里的对应位置就行了。歌曲的网址在百度sogua.com上都可以搜索到(选取地址的原则是,在不影响音质的情况下,尽量选容量比较小的,wmv的一般会更适合;midi也行)。

现在就动手做你自己的清单罢:用记事本打开exobudpl.js这个文件,把原来文档里的文字从<!--后的第二行起全部删除,然后按照mkList("http://88ba.nease.net/dandan/sg.mp3","Secret Garden-半生缘");这种格式逐一添加你要的歌曲。所有的歌曲(mklist行)添加完毕之后,你在最底下一行加上//-->表示结束——注意,我这里为了强调,都打上了后色引号(“”),实际操作的时候要把这对红引号去掉。

注:后来风重新做了一个播放清单样本文件,已经整合到在日志中提供下载的播放器压缩包中了,修改后的样本清单(exobudpl.js)条理很清楚,相信大家一看就明白了!照那个格式写就错不了的呵呵

附:一般免费空间都不让你上传容量较大的文件,而一般的mp3都有3m左右,所以最好是在网上找地址放进去;当然,如果你有比较小的音乐文件,那可以把它放入解压文件夹下的music文件夹。假设你放入music里的是一首标题为“Only Time”,文件名称为“onlytime .wmv”的歌,那么它的调用格式是:mkList("./music/onlytime.wmv ","Only Time"); 其他依此类推。

(三)修改播放器及播放清单面板(这一步仅针对熟悉HtmL源代码的朋友,不熟悉者可跳过不看)

如果你觉得此处提供下载的播放器面板仍然不符合你自己的页面要求——比如播放器太长或者太短、颜色太暗或者太艳等无法跟博客风格合一,或者说你自己有更好的面板配色方案。那么你可以自行动手修改播放器面板——你可以用网页编辑器打开刚才解压的那个文件夹里的exobud.htm这个文件,进行细细的修改。这个文件引用的图片都放在解压文件夹下的img文件夹里边。播放器面板——无论是图案还是颜色或者大小,都是可以调整的——但操作起来比较麻烦,修改的时候要注意随时预览并保存。因此建议对代码不熟悉的朋友采取现成的播放器面板。

同理,你也可以修改播放清单的面板布局——用网页编辑器打开刚才解压的那个文件夹里的exobudpl.htm这个文件。还是那个建议,对代码不熟悉的朋友最好采取现成的播放器清单面板。

三、如何在博客中插入网页播放器

当你前面的工作已经全部做好之后,那么先双击exobud.htm在浏览器中预览一下,如果没有问题,那么就可以进行这关键的最后一步了;如果出现网页错误之类的提示,那请再仔细检查一下哪一步出现了问题,把问题找出来消灭掉。一般而言,如果没有去修改播放器面板,即第二部分第三步涉及的问题,预览都是不会出现问题的。好了,检查完毕,我们就进行下一步:

(一)上传到已经申请好的主页空间

如果该空间能够允许你用ftp上传,那么最好不过了。用服务商提供给你的ftp用户名和密码,把刚才解压并修改好文件的那个文件夹(exobud_mp)整个上传上去。因为文件都很小,很快就可以传完。传完之后,我们需要预览一下在远程的效果如何。如果远程能够预览,那么就可以进行下一步了。

预览的方式是这样子的:在浏览器地址栏里输入你所申请的主页空间访问地址,比如我的是http://lamble.go3.icpcn.com/ ,然后在最后面加上后面引号里的内容“exobud_mp/exobud.htm”——这个用于定位你主页空间里的网页播放器文件位置——因此,完整的预览地址就是 http://lamble.go3.icpcn.com/exobud_mp/exobud.htm ;如果在浏览器里,能够顺利的读取出你自己的播放器页面来,那么你距离成功仅有一步之遥了,记住该读取地址,比如我的就是“http://lamble.go3.icpcn.com/exobud_mp/exobud.htm

(二)在Blog中插入网页播放器

这个地方需要你具有一些基础的HtmL知识,不过不会也没有非常大的关系,尝试一下就都出来了呵呵

先在你的Blog里找准你要将播放器插入的确切位置,对应到该位置所在的源代码。然后在这个位置为播放器页面留出一定的空间,这个空间可以用层(div)或者表格形式来实现,一般而言,长条形状的播放器会需要你留出640~760px(像素) 的宽度(也就是width640px760px),20~25px(像素) 的高度(也就是说height20px25px)。但不要死搬书,具体要依据你自己博客结构自行调整。

内嵌机制的源代码如下:

<IFRAME id=iframe1 name=iframe1 marginWidth=0 marginHeight=0 src="http://lamble.go3.icpcn.com/exobud_mp/exobud.htm" frameBorder=0 width=195px scrolling=no height=90></IFRAME>

其中,绿色部分就改成你自己的网页播放器所在的地址罢——就是前一步骤让你记住的,在浏览器里调试过,能够读出播放器页面来的那个地址;widthheight的具体数值需要你自己依据实际情况自行调整。

(如果不懂这些基本的代码涵义,你上搜索引擎去查一下罢。我就不在这里罗嗦了)

把这段代码放在你博中已经预留出来的那部分空间对应的代码区域里,保存后,重新打开你自己的博(有些博需要重新发布才能看到效果,比如blogbus),看到BloG页面上出现一个漂亮的网页播放器了吗,同时是不是听到音箱里一阵传来悦耳的音乐声了呢?

很激动罢……祝贺你,成功了呵呵:)







风之眼眸   Wroted aT   18:05:00  TrackbacK(1) | EdiT | 提示:如需摘录此文,请点击下列通道

  天天网摘我摘网摘天极网摘博采中心新浪ViVi人人网摘和讯网摘
     


AttentioN

            T-Eye竭诚欢迎朋友们的到来——留言提示~_O:
    如果您是针对某篇日志的具体评论,请在该日志页右侧的“To Say SomethinG”区留言
    如果您是对整个网站进行评价,或者与风、颖个人的交流,请在纸条中心留言
    如果您是希望与T-Eye交换友情链接,请到链接事项,参照相应说明进行留言
    如果您遇到某些问题,需要T-Eye的帮忙,请到求助通道留言,我们很乐意帮您解决困难


CommenT

11
11 (http://11)   发表于  2007-08-15 22:28:51

怎么不能用ftp 登陆我的空间啊?

老是连接不上啊。
Leocoxo ()   发表于  2007-02-23 12:56:01

想问一个问题,你的flash导航菜单很漂亮,但是能不能做成竖版的?
kugelRoo ()   发表于  2006-12-15 15:30:29

我做好了请大家来看看http://aibubian2.home.sunbo.net
sfg (http://fgsdf)   发表于  2006-10-20 17:08:25

你好!我不知道如何在我的博客里插入播放器,我是在网上申请的播放器,它给了我代码,但是我更改了面板后加入代码预览时有效果,提交后却没有播放器,再进去后又看不到刚加的代码了,这是怎么回事?我要把代码加到哪里才好?我的面板里的代码是如下显示的<DIV class=sideblock id=userlink>

<H3>友情链接</H3>{{userlink}} </DIV>

<DIV class=sideblock id=guestbook>

<H3>最新留言</H3>{{newguestbook}} </DIV><!--{if music}-->

<DIV class=sideblock id=music>{{music}}

<H3>音乐播放</H3>{{music}} </DIV><!--{/if}-->

<DIV class=sideblock id=sideicons>

http://space.bleachcn.net/html/32/32.html这是我的博客,你能帮我看看吗?我的QQ:79080249
砂糖 (http://173.st020.com/file1/4055/6.wma)   发表于  2006-10-07 22:26:01

如和才能把一些空间代码放上去啊?
we ()   发表于  2006-10-02 22:28:45

如和才能把一些空间代码放上去啊?
we ()   发表于  2006-10-02 22:28:34

可以用哈..搞错了
PP ()   发表于  2006-09-17 17:06:37

许多网站都屏蔽icpcn.com因此没办法在网页中加入播放器,我可以预览但没办法保存..烦
PP (http://我来补充)   发表于  2006-09-11 18:49:10

帮我看看,谢谢http://aibubian2.home.sunbo.net/xfile.php?xname=K3G9H01&fname=/xcvx/exobud.htm
心蓝 (http://我的出来边行了)   发表于  2006-08-25 16:11:40

asd
dsa (http://dsa)   发表于  2006-08-17 00:11:32

哥哥,什么时候来个远程协助吧,我好不容易上传了,而且好不容易终于也进了那预览网址,可是那上面按建成灰白状态,鼠标移到那有显示,也可用。但是说无法播放,因为播放清单上没有可播放的曲目。
马马 (http://ygdtt.blog.com.cn/)   发表于  2006-08-02 12:29:30

风大哥,我在这里下的播放器,我在1152乘864的分辨率下做的好好的,怎么看怎么舒服!!!可是在800乘600的分辨率下看时,狂晕~~~~没有滚动条,一整个网页就显示了一半,下面的看不到~~没有滚动条啊,风大哥,叫你大哥,救命啊~~~~~~~~~SOS~~SOS!!!
风大哥,救命 (http://jqrmtvwfn)   发表于  2006-08-02 10:10:04

你好,我已经上传了你好,我现在按教程上传了文件到中联那个空间上,可是我打不开预览地址,看不到远程效果 ,可以帮我解答这个问题吗,谢谢。

马马 (http://ygdtt.blog.com.cn/)   发表于  2006-08-01 11:07:13

你好我照你的做了。但是歌诃还是不能行。/欢迎指点。http://www.e0831.cn
e0831.cn (http://e0831.cn)   发表于  2006-07-10 13:32:29

555
5 (http://5)   发表于  2006-06-23 09:23:57

555
5 (http://5)   发表于  2006-06-23 09:23:52

哥哥,到底怎么上传啊,我已经申请完了,但不会上传,你要看见了请第一时间回答我,到时候亲你2口,虽然我是男的....
zhaibincs (http://zhaibincs.bokee.com)   发表于  2006-06-20 02:19:40

你好,根据你的教程我已经成功插入了播放器,但问题是我从预览开始就发现各个按钮的图片都是红叉叉,我确定已经完全把整个文件传上去了,不知道是怎么回事,期盼回音~

但是在我的电脑里播放就正常.为什么?

QQ:417715204
许李峰 (http://123)   发表于  2006-05-28 14:31:34

想找个个性化的blog播放器

QQ121461204
gaming (http://gming.3133.com)   发表于  2006-05-16 13:45:17

您好:)我是新手,,用了你的播放器,是在本地网络上是使用的,都可以听,但是出现一些问题,需要您的帮助。就是我将播放器改为长条行的,结果,暂停和播放按妞当都在使用的时候是显示没有图片的,停止按妞是不能使用的,还有最前的那个音乐图标也是没有变化的,时间是要人工按的才能够自己跳动,最后就是按妞区和音乐图标上方会出现白条。这是什么原因啊???期待你的回答
youhanxi7221020@163.com ()   发表于  2006-05-08 12:38:40

风哥,你好!

琢磨了几个小时.结合你给网友门的留言

终于把大部分都搞明白了

今天 来是特别来感谢你的

真的...真的非常感谢
精彩一瞬间 (http://free.icpcn.com/user/logininfo.asp)   发表于  2006-05-07 16:34:28

风哥 你好!

看了不这个收获真是不少啊 真是感谢

不过不懂的也不少1怎样把整个文件夹上传上去啊.想图片这样一张一张的传太麻烦了一不小心就漏了 2.http://lamble.go3.icpcn.com/exobud_mp/exobud.htm这个网页怎么打不开啊

我自己的也是
精彩一瞬间 (http://free.icpcn.com/user/logininfo.asp)   发表于  2006-05-06 22:40:54

风哥 你好!

看了不这个收获真是不少啊 真是感谢

不过不懂的也不少1怎样把整个文件夹上传上去啊.想图片这样一张一张的传太麻烦了一不小心就漏了 2.http://lamble.go3.icpcn.com/exobud_mp/exobud.htm这个网页怎么打不开啊

我自己的也是
精彩一瞬间 (http://free.icpcn.com/user/logininfo.asp)   发表于  2006-05-06 22:40:45

风哥 你好!

看了不这个收获真是不少啊 真是感谢

不过不懂的也不少1怎样把整个文件夹上传上去啊.想图片这样一张一张的传太麻烦了一不小心就漏了 2.http://lamble.go3.icpcn.com/exobud_mp/exobud.htm这个网页怎么打不开啊

我自己的也是
精彩一瞬间 (http://free.icpcn.com/user/logininfo.asp)   发表于  2006-05-06 22:40:34

风哥 你好!

看了不这个收获真是不少啊 真是感谢

不过不懂的也不少1怎样把整个文件夹上传上去啊.想图片这样一张一张的传太麻烦了一不小心就漏了 2.http://lamble.go3.icpcn.com/exobud_mp/exobud.htm这个网页怎么打不开啊

我自己的也是
精彩一瞬间 (http://free.icpcn.com/user/logininfo.asp)   发表于  2006-05-06 22:40:14

谢谢你的播放器,呵呵

太感谢了
Ash-Sky ()   发表于  2006-04-29 14:21:03

QQ空间提升人气补丁 让你的人气直线狂升!



黑客基地最新会员作品!!



http://free.ys168.com/?pyllis
baobao ()   发表于  2006-04-27 00:11:30

QQ空间提升人气补丁 让你的人气直线狂升!



黑客基地最新会员作品!!



http://free.ys168.com/?pyllis
baobao ()   发表于  2006-04-27 00:10:04

QQ空间提升人气补丁 让你的人气直线狂升!



黑客基地最新会员作品!!



http://free.ys168.com/?pyllis
baobao ()   发表于  2006-04-27 00:09:42

  • 评论分页:共5页 1 2 3 4 5 下一页 最后一页
  • UpdatinG


    To say somethinG

    Your namE:

    Your bloG:

    Your commenT: