网页播放器安装祥解

▽ 第１步：进行解压缩
└──────────
在网络上下载回来的 ExoBUD MP(II) 繁体中文版应是以 zip 为扩展名的压缩档。
您可以使用您惯用的解压缩程序 (例如: WinZip) 来压开这个档案。
请将所有的档案都解压缩到您 (自己计算机内) 网站数据夹下的一个新资料夹。
(里面没有任何档案或子数据夹)
假设您的网站数据夹是 C:\www
您可以将压缩档解开至 C:\www\exobud_mp 这个位置。
因为压缩文件内容是包含数据夹名称的，所以您在解压缩时要注意是否正确将所有的
档案都解开至适当位置：程序"根目录"应包括*.htm,*.js,*.css的原始码档案，而
img,sample分别是程序图文件和范例视讯档案的数据夹。(请参考上面的"档案说明")
解压缩完毕后，您便可以立即点两下 exobud.htm ，执行这个档案，抢鲜测试一下
这支超炫的播放程序！^^

▽ 第２步：准备媒体档案
└───────────
如果您要把这个播放器放到网站上，您当然不会使用预设的「样本播放清单」吧。
这个时候，您需要准备一些媒体档案。这些音讯或视讯档案的来源，可以是您硬盘
里面的档案，也可以是网络上的串流处理媒体档案连结。
如果您硬盘里面的媒体档案都是动辄几MB甚至几十MB的 mp3,wav,avi,mpg... 相信
您也不会将这些狂吃容量的档案上传到FTP服务器吧！ 此时您就需要一个编码器，
例如微软的 Windows Media Encoder (建议使用v7.x或以上的版本) ，将这些档案
都转换成体积比较小的串流媒体档案(asf,wma,wmv)，然后才上传到 FTP 服务器。
(若您是自行架设串流媒体服务站，请将档案上传到您的 MMS 服务器)
媒体档案的命名也值得我们注意。因为不是在所有语系、所有操作系统和浏览器的
环境下，都可以正确读取以繁体中文 (或其它双字节语系) 来命名的文件名称的，
所以请您最好不要使用含汉字字符的档名，同时也应尽量避免在文件名称里使用像
半角空白、百分比(%) 这些特殊字符。文件名称在网络上的使用仍是以全英文小写
为最保险。(您可以使用底线字符 _ 来代替空白的)
假如您坚持要使用像 mp3,wav 这些非串流媒体档案格式， 请确保档案不会太大，
致使浏览者需要一段时间才下载完成整个档案，因为本程序不能对这类档案做缓冲
处理(Buffering)，而是要等到接收完毕整个档案后才会播放的。
如果您想要使用播放器的字幕功能，您还需要准备对应媒体档案的SMIL字幕档案，
并且要将这个SMIL档放置在与对应的 asf,wma 媒体档案相同的数据夹。
※ 因为本程序是利用微软的 Windows Media Player 做为后台播放程序，所以
并不支援以 .ra .rm .rv .ram 等这些由 RealNetworks 制订的媒体格式来
播放音讯或视讯内容。
※ 虽然本程序可支持微软最新开发的 「Windows Media 播放清单」 档案格式
(扩展名为.wpl)，但是因为此格式尚未开发成熟，而本程序对此格式的支持
可能不够完全，所以建议使用者应避免使用这种档案来制作播放清单，除非
您是本程序的开发人员／面板制作者，或对程序运作已有深入了解。

══════════════════════════════════════
■ 设定播放程序
══════════════════════════════════════
这个部份会向您说明如何设定播放程序，包括基本设定及播放清单内容：

▽ 第３步：检查播放程序
└───────────
以 Internet Explorer 浏览器开启 exobud.htm 这个档案， 然后点一下【播放】
按钮(除非预设是自动播放)，此时您应该可以听到声音。假如没有听到任何声音，
请检查一下您的扬声器是否已开启、Windows Media Player和IE的版本是否兼容。
目前正在播放的就是样本播放清单所设定的项目。
※ 繁体中文版本的 ExoBUD MP 播放器，已设定了页面的显示语系是 "big5"，
假如因为某些原因而在播放面板上出现乱码，请尝试手动变更页面的语系。
(在IE变更页面编码的方法：点一下选单列的 [检视] → [编码]，再点选
正确的语系 [繁体中文 (Big5)] 即可)

▽ 第４步：设定播放程序
└───────────
接下来，我们需要编辑 exobudset.js 这个 JavaScript 原始码档案，此档包含了
播放程序所有基本设定内容。您可以不用关闭浏览器窗口，一边进行原始码编辑，
同时在另一边的浏览器，您可以按[F5]键重新整理页面，测试一下原始码在修改后
的执行结果是否正常。
现在，请使用您惯用的纯文字编辑器 (例如: EditPlus/EmEditor/记事本) ，打开
exobudset.js 这个档案，编辑原始码内容。 因为在档案里面已经写有相当详细的
说明，解释各个设定项目的用法，所以在这里不再赘述一遍。
※ 所有项目的设定值只可以设为 true (是) 或 false (否)，请注意这两个
英文单字必须使用全小写半角字母，亦不能写错字。

▽ 第５步：设定播放清单内容
└─────────────
当您修改「播放程序的基本设定」完毕，接下来我们就要设定播放清单的内容，将
已存在于网络上的媒体档案，一个一个的「登录」在播放清单上，这样播放程序才
可以知道要播放什么媒体、媒体的档案位置在哪里。
繁体中文版本的 ExoBUD MP 播放器，有别于原韩文版的设定方式， 设定播放清单
内容的部份是写在一个独立的档案 (exobudpl.js)，而非播放面板 HTML 页面档案
(exobud.htm)，这是为了方便修改和管理播放清单而作出的改动。
现在，请使用您惯用的纯文字编辑器 (例如: EditPlus/EmEditor/记事本) ，打开
exobudpl.js 这个档案，编辑原始码内容。(这是一个 JavaScript 的原始码档案)
因为在里面已经有相当详细的说明， 解释如何设定 ExoBUD MP 专用的播放清单，
所以在这里不再赘述一遍。
※ 完成设定您的播放清单后，必须重新整理播放器的页面，播放清单的修改
才会正式生效。此外，亦建议您将刚修改好的播放清单完整的测试一遍，
确保播放清单上的所有媒体项目都能够正常播放。

══════════════════════════════════════
■ 将播放器嵌入网站
══════════════════════════════════════
当播放程序的基本设定和播放清单都搞定了以后，您便可以将播放器嵌入网站了！请将
您所修改过的播放程序档案 (包括所有程序需要用到的档案和图文件数据夹) ，使用 FTP
程序上传到您网站的服务器、一个对应的空白数据夹，例如 exobud_mp 。
※ 如果不是做为测试用途，并且已在播放清单上删除或批注掉「样本播放清单」
的设定项目，您可以不必上传"sample"这个存放了范例视讯档案的数据夹。

现在，您可以使用页面框架 (frameset) 或内嵌框架 (iframe) 的方式，将播放器嵌入
到您的网站里去了！下面分别提供了以这两种方式嵌入播放器的 HTML 语法让您参考：
▼使用页面框架 (frameset) 方式的嵌入法范例：


scrolling="no" noresize>

▼使用内嵌框架 (iframe) 方式的嵌入法范例：

※ 以上设定框架大小的数值仅供参考。一般来说，长条形状的播放器会占用面积
大约为 640~760px(像素) 的宽度乘以 20~25px(像素) 的高度。
(若使用字幕功能，需额外增加 60px 的高度)

进行播放器嵌入网站的动作时，请注意：
1. 您必须了解HTML的框架语法如何应用，以及懂得利用纯文字编辑器来设定框架
语法。若您仍未掌握框架语法的写法，请先在网络上搜寻有关数据了解一下。
2. 无论使用任何方式的语法 (包括JavaScript等) 将播放器嵌入网站，您都必须
确保当浏览者转换页面时，不会同时整理播放器所在的页面，因而影响播放器
的动作。
3. 如果您不熟悉HTML语法，最好不要使用以内嵌框架 (iframe) 的方式将播放器
嵌入网站，除非您已明白您的网站版面设计适合使用以此方式嵌入播放器。
4. 以上说明使用框架 (frameset或iframe) 的方式将播放器嵌入网站，并不适用
于以弹出式窗口 (Pop-up Window) 启动的播放器。

══════════════════════════════════════
■ 播放器的进阶设定法：修改样式表设定项目
══════════════════════════════════════
除了播放程序的基本设定和播放清单内容以外，在播放程序的原始码里面还「隐藏」了
不少可供个人化修改的样式表(Style Sheet)设定项目！您可以凭自己对CSS样式表语法
的认识，加入其它更具创意的设定值。
以下有一些预设可供修改样式的地方，让您参考：
(请注意这些地方可能会因为不同面板而有大小差异)

▽ ａ）播放面板的基本样式表设定 (exobud.css)
└──────────────────────
在 exobud.css 这个 CSS 样式表档案里面，您可以找到基本样式表的设定内容。
▼以下是其中几个样式项目的设定：
body { margin-top: 0px; margin-right: 0px; ← 不保留边界的设定
margin-bottom: 0px; margin-left: 0px;
cursor: crosshair; ← 鼠标光标呈十字形
overflow: hidden; } ← 不显示窗口卷动轴
body,td { font-family: 'Tahoma','Verdana','Arial'; ← 字形名称
font-size: 9pt; } ← 字形大小
/* 显示媒体标题的样式表设定 */ (此乃 精简版 播放器的设定)
.title { border-width: 1px; ← 框线粗幼度(像素)
border-style: solid; ← 框线形式
border-color: silver; ← 框线颜色
background-color: white; ← 背景颜色
color: black; ← 文字(前景)颜色
font-family: 'Tahoma','Verdana','Arial'; ← 字形名称
font-size: 9pt; } ← 字形大小
/* 显示时间长度的样式表设定 */ (此乃 精简版 播放器的设定)
.time { border-width: 1px; ← 框线粗幼度(像素)
border-style: solid; ← 框线形式
border-color: silver; ← 框线颜色
background-color: white; ← 背景颜色
color: black; ← 文字(前景)颜色
font-family: 'Tahoma','Verdana','Arial'; ← 字形名称
font-size: 9pt; } ← 字形大小
(注：箭嘴 "←" 所示的地方是为了方便说明才加上去的，实际编辑时请不要加入)
※ 您可以在 body 样式里面加入 background 属性来设定背景颜色或图档，例如：
background-color: aliceblue; 或 background-image: url(./bg.gif);
※ .title 和 .time 两个样式，分别是显示媒体标题和时间长度的样式设定项目。
您可以根据自己的个人喜好来修改字形名称/大小/颜色、框线粗幼度/颜色/模式
等的设定值。

▽ ｂ）字幕框的样式设定 (exobud.htm)
└──────────────────
▼在 exobud.htm 这个 HTML 档案，接近最底部的地方， 可以找到这段 DIV 语法：
(这里定义了一个区块，其 ID 应为 "capText")

▽ ｃ）播放清单上的 body 样式设定 (exobudpl.css)
└────────────────────────
在另一个用来设定播放清单 CSS 样式表的 exobudpl.css 档案里面，您亦可以
找到基本样式表的设定内容。
▼以下是 body 样式项目的设定：
body { margin-top: 0px; margin-right: 0px; ← 不保留边界的设定
margin-bottom: 0px; margin-left: 0px;
background-color: #8498A3; ← 背景颜色
background-image: url(./img/pl_skin.jpg); ← 背景图档(*)
background-repeat: no-repeat; ← 背景图是不重复的(*)
background-attachment: fixed; ← 背景图是固定位置(*)
background-position: bottom right; ← 背景图放底部*右(*)
cursor: crosshair; } ← 鼠标光标呈十字形
(*) 这些属性是为了方便让大家参考才加上去的。
※ 如果面板所使用的播放清单，有需要显示卷动轴的话，body样式里面可能已经
加入了关于卷动轴的属性设定。
※ 以上所示 body 的样式设定仅供参考，因为每款面板所显示的播放清单，也会
使用不同的样式设定。如果您想更进一步了解 body 的样式设定法，请在网上
搜寻有关资料。

▽ ｄ）播放清单上的连结样式设定 (exobudpl.css)
└───────────────────────
同样在 exobudpl.css 这个「播放清单样式表」档案里面，您还可以设定不同
类型的连结的颜色。
▼以下是包含 anchor (即 "A" 语法) 样式项目的设定：
a,a:link { color: #334455; text-decoration: none; }
a:visited { color: #223344; text-decoration: none; }
a:active { color: #334455; text-decoration: none; }
a:hover { color: gold; text-decoration: none; }
浏览器是如何决定什么类型的连结，以什么样式来显示？
a,a:link : 在指定时间之内，未曾到访过的连结
a:visited : 在指定时间之内，已经到访过的连结
a:active : 您正在到访的连结
a:hover : 您将鼠标移到其上的连结(实时变色)
※ 通常我们都会以连结的文字颜色(color)来区分不同类型的连结的。但也会同时
辅以底线 (text-decoration: underline;) 来加以区别。