合肥水性涂料公司: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 IIT-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）。但不要死搬书，具体要依据你自己博客结构自行调整。
内嵌机制的源代码如下：

其中，绿色部分就改成你自己的网页播放器所在的地址罢——就是前一步骤让你记住的，在浏览器里调试过，能够读出播放器页面来的那个地址；width和height的具体数值需要你自己依据实际情况自行调整。
（如果不懂这些基本的代码涵义，你上搜索引擎去查一下罢。我就不在这里罗嗦了）
把这段代码放在你博中已经预留出来的那部分空间对应的代码区域里，保存后，重新打开你自己的博（有些博需要重新发布才能看到效果，比如blogbus），看到BloG页面上出现一个漂亮的网页播放器了吗，同时是不是听到音箱里一阵传来悦耳的音乐声了呢？
很激动罢……祝贺你，成功了呵呵：）
风之眼眸  Wrote aT  18:05:00 | Read iT | CommenT(90) | Trackback(1) | EdiT
 二区：最新日志列表
风之眼眸网页播放器插入Blog教程详解