注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的绿色软件、网络笔记仓库

 
 
 

日志

 
 

网页播放器安装祥解  

2010-01-25 17:34:11|  分类: 知识应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

▽ 第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; } ← 字形大小及颜色

※ 因为播放清单上所显示的媒体标题,本身都是页面上的连结,所以您在这里

设定的文字颜色,只会对项目编号有效,而不会适用于媒体标题。


══════════════════════════════════════

  评论这张
 
阅读(456)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017