T

来源: BlogBus 原始链接: http://bobotalk.blogbus.com:80/s1030161/ 存档链接: https://web.archive.org/web/20061103024803id_/http://bobotalk.blogbus.com:80/s1030161/

T-Eye 第3只眼一直很用心很用心，用主赐予我的第三只眼睛，打量一切你笑盈盈的，在水一方，朝我微微招手——佛说，百世修得同舟渡本站导航链接事项致谢事宜纸条中心每日Ｅ乐搞笑趣图求助通道博客素材美博技巧天籁之音精华日志祈愿漂流风颖相册管理入口 [首页] [短消息] [ 即时通话 ] [分页] : 一区：历史日志回顾网页播放器插入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 这个文件，把原来文档里的文字从 “

” 表示结束——注意，我这里为了强调，都打上了后色引号（ “” ），实际操作的时候要把这对红引号去掉。注：后来风重新做了一个播放清单样本文件，已经整合到在日志中提供下载的播放器压缩包中了，修改后的样本清单（ 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( 像素 ) 的宽度（也就是 width 为 640px ～ 760px ）， 20~~25px( 像素 ) 的高度（也就是说 height 为 20px 到 25px ）。但不要死搬书，具体要依据你自己博客结构自行调整。内嵌机制的源代码如下：