作者:不详 来源:网络
▽ 第1步:进行解压缩
└──────────
在网络上下载回来的 ExoBUD MP(II) 繁体中文版应是以 zip 为扩展名的压缩档。
您可以使用您惯用的解压缩程序 (例如: WinZip) 来压开这个档案。
请将所有的档案都解压缩到您 (自己计算机内) 网站数据夹下的一个新资料夹。
(里面没有任何档案或子数据夹)
假设您的网站数据夹是 C:\www
您可以将压缩档解开至 C:\www\exobud_mp 这个位置。
因为压缩文件内容是包含数据夹名称的,所以您在解压缩时要注意是否正确将所有的
档案都解开至适当位置:程序"根目录"应包括*.htm,*.js,*.css的原始码档案,而
img,sample分别是程序图文件和范例视讯档案的数据夹。(请参考上面的"档案说明")
解压缩完毕后,您便可以立即点两下 exobud.htm ,执行这个档案,抢鲜测试一下
这支超炫的播放程序!^^
▽ 第2步:准备媒体档案
└───────────
如果您要把这个播放器放到网站上,您当然不会使用预设的「样本播放清单」吧。
这个时候,您需要准备一些媒体档案。这些音讯或视讯档案的来源,可以是您硬盘
里面的档案,也可以是网络上的串流处理媒体档案连结。
如果您硬盘里面的媒体档案都是动辄几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),但是因为此格式尚未开发成熟,而本程序对此格式的支持
可能不够完全,所以建议使用者应避免使用这种档案来制作播放清单,除非
您是本程序的开发人员/面板制作者,或对程序运作已有深入了解。
══════════════════════════════════════
■ 设定播放程序
══════════════════════════════════════
这个部份会向您说明如何设定播放程序,包括基本设定及播放清单内容:
▽ 第3步:检查播放程序
└───────────
以 Internet Explorer 浏览器开启 exobud.htm 这个档案, 然后点一下【播放】
按钮(除非预设是自动播放),此时您应该可以听到声音。假如没有听到任何声音,
请检查一下您的扬声器是否已开启、Windows Media Player和IE的版本是否兼容。
目前正在播放的就是样本播放清单所设定的项目。
※ 繁体中文版本的 ExoBUD MP 播放器,已设定了页面的显示语系是 "big5",
假如因为某些原因而在播放面板上出现乱码,请尝试手动变更页面的语系。
(在IE变更页面编码的方法:点一下选单列的 [检视] → [编码],再点选
正确的语系 [繁体中文 (Big5)] 即可)
▽ 第4步:设定播放程序
└───────────
接下来,我们需要编辑 exobudset.js 这个 JavaScript 原始码档案,此档包含了
播放程序所有基本设定内容。您可以不用关闭浏览器窗口,一边进行原始码编辑,
同时在另一边的浏览器,您可以按[F5]键重新整理页面,测试一下原始码在修改后
的执行结果是否正常。
现在,请使用您惯用的纯文字编辑器 (例如: EditPlus/EmEditor/记事本) ,打开
exobudset.js 这个档案,编辑原始码内容。 因为在档案里面已经写有相当详细的
说明,解释各个设定项目的用法,所以在这里不再赘述一遍。
※ 所有项目的设定值只可以设为 true (是) 或 false (否),请注意这两个
英文单字必须使用全小写半角字母,亦不能写错字。
▽ 第5步:设定播放清单内容
└─────────────
当您修改「播放程序的基本设定」完毕,接下来我们就要设定播放清单的内容,将
已存在于网络上的媒体档案,一个一个的「登录」在播放清单上,这样播放程序才
可以知道要播放什么媒体、媒体的档案位置在哪里。
繁体中文版本的 ExoBUD MP 播放器,有别于原韩文版的设定方式, 设定播放清单
内容的部份是写在一个独立的档案 (exobudpl.js),而非播放面板 HTML 页面档案
(exobud.htm),这是为了方便修改和管理播放清单而作出的改动。
现在,请使用您惯用的纯文字编辑器 (例如: EditPlus/EmEditor/记事本) ,打开
exobudpl.js 这个档案,编辑原始码内容。(这是一个 JavaScript 的原始码档案)
因为在里面已经有相当详细的说明, 解释如何设定 ExoBUD MP 专用的播放清单,
所以在这里不再赘述一遍。
※ 完成设定您的播放清单后,必须重新整理播放器的页面,播放清单的修改
才会正式生效。此外,亦建议您将刚修改好的播放清单完整的测试一遍,
确保播放清单上的所有媒体项目都能够正常播放。
══════════════════════════════════════
■ 将播放器嵌入网站
══════════════════════════════════════
当播放程序的基本设定和播放清单都搞定了以后,您便可以将播放器嵌入网站了!请将
您所修改过的播放程序档案 (包括所有程序需要用到的档案和图文件数据夹) ,使用 FTP
程序上传到您网站的服务器、一个对应的空白数据夹,例如 exobud_mp 。
※ 如果不是做为测试用途,并且已在播放清单上删除或批注掉「样本播放清单」
的设定项目,您可以不必上传"sample"这个存放了范例视讯档案的数据夹。
现在,您可以使用页面框架 (frameset) 或内嵌框架 (iframe) 的方式,将播放器嵌入
到您的网站里去了!下面分别提供了以这两种方式嵌入播放器的 HTML 语法让您参考:
▼使用页面框架 (frameset) 方式的嵌入法范例:
<frameset rows="*,25" framespacing="0" border="0" frameborder="0">
<frame name="content" src="main.php" noresize>
<frame name="exobud_mp" src="exobud_mp/exobud.htm"
scrolling="no" noresize>
</frameset>
▼使用内嵌框架 (iframe) 方式的嵌入法范例:
<iframe name="exobud_mp" src="exobud_mp/exobud.htm"
width="640" height="25" marginwidth="0" marginheight="0"
border="0" frameborder="0" scrolling="no"></iframe>
※ 以上设定框架大小的数值仅供参考。一般来说,长条形状的播放器会占用面积
大约为 640~760px(像素) 的宽度乘以 20~25px(像素) 的高度。
(若使用字幕功能,需额外增加 60px 的高度)
进行播放器嵌入网站的动作时,请注意:
1. 您必须了解HTML的框架语法如何应用,以及懂得利用纯文字编辑器来设定框架
语法。若您仍未掌握框架语法的写法,请先在网络上搜寻有关数据了解一下。
2. 无论使用任何方式的语法 (包括JavaScript等) 将播放器嵌入网站,您都必须
确保当浏览者转换页面时,不会同时整理播放器所在的页面,因而影响播放器
的动作。
3. 如果您不熟悉HTML语法,最好不要使用以内嵌框架 (iframe) 的方式将播放器
嵌入网站,除非您已明白您的网站版面设计适合使用以此方式嵌入播放器。
4. 以上说明使用框架 (frameset或iframe) 的方式将播放器嵌入网站,并不适用
于以弹出式窗口 (Pop-up Window) 启动的播放器。
══════════════════════════════════════
■ 播放器的进阶设定法:修改样式表设定项目
══════════════════════════════════════
除了播放程序的基本设定和播放清单内容以外,在播放程序的原始码里面还「隐藏」了
不少可供个人化修改的样式表(Style Sheet)设定项目!您可以凭自己对CSS样式表语法
的认识,加入其它更具创意的设定值。
以下有一些预设可供修改样式的地方,让您参考:
(请注意这些地方可能会因为不同面板而有大小差异)
▽ a)播放面板的基本样式表设定 (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 两个样式,分别是显示媒体标题和时间长度的样式设定项目。
您可以根据自己的个人喜好来修改字形名称/大小/颜色、框线粗幼度/颜色/模式
等的设定值。
▽ b)字幕框的样式设定 (exobud.htm)
└──────────────────
▼在 exobud.htm 这个 HTML 档案,接近最底部的地方, 可以找到这段 DIV 语法:
(这里定义了一个区块,其 ID 应为 "capText")
<div id="capText" style="width:100%;height:60;color:white;
background-color:#555555;display:none">ExoBUD MP(II) Captioning(SMI)</div>
※ 您可以将字幕框放在播放面板上的任何位置,宽度(width)和高度(height)都
可以修改的。同样地,您也可以根据自己的喜好 修改/增删 其它样式属性的
设定,例如您可以加入 font-size 的属性来设定字幕框文字的大小。
※ 字幕框的部份,通常会以特别的颜色来显示,用以突出其与播放器其它部份的
分别;预设的面板就是以深色的底色作背景颜色、以白色作文字(前景)颜色。
※ 无论您是否使用字幕功能,也必须保留这段 DIV 语法,否则会导致播放程序
无法正常运作。(区块的 ID 是不能更改的)
※ 只有在 "blnUseSmi" 设定值为 true 的情况下(使用字幕功能),字幕框才会
显示出来。
▽ c)播放清单上的 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 的样式设定法,请在网上
搜寻有关资料。
▽ d)播放清单上的连结样式设定 (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;) 来加以区别。
▽ e)播放清单上的文字样式设定 (exobudpl.css)
└───────────────────────
播放清单上的文字,包括媒体标题及项目编号等,您都可以自行设定喜爱的样式。
▼以下是基本样式表中,关于文字样式的设定:
body,td { font-family: 'Tahoma','Verdana','Arial'; ← 字形名称
font-size: 9pt; color: #B0C0D0; } ← 字形大小及颜色
※ 因为播放清单上所显示的媒体标题,本身都是页面上的连结,所以您在这里
设定的文字颜色,只会对项目编号有效,而不会适用于媒体标题。