▽ 第1步:進(jìn)行解壓縮 └────────── 在網(wǎng)絡(luò)上下載回來(lái)的 ExoBUD MP(II) 繁體中文版應(yīng)是以 zip 為擴(kuò)展名的壓縮檔。 您可以使用您慣用的解壓縮程序 (例如: WinZip) 來(lái)壓開這個(gè)檔案。 請(qǐng)將所有的檔案都解壓縮到您 (自己計(jì)算機(jī)內(nèi)) 網(wǎng)站數(shù)據(jù)夾下的一個(gè)新資料夾。 (里面沒(méi)有任何檔案或子數(shù)據(jù)夾) 假設(shè)您的網(wǎng)站數(shù)據(jù)夾是 C:\www 您可以將壓縮檔解開至 C:\www\exobud_mp 這個(gè)位置。 因?yàn)閴嚎s文件內(nèi)容是包含數(shù)據(jù)夾名稱的,所以您在解壓縮時(shí)要注意是否正確將所有的 檔案都解開至適當(dāng)位置:程序"根目錄"應(yīng)包括*.htm,*.js,*.css的原始碼檔案,而 img,sample分別是程序圖文件和范例視訊檔案的數(shù)據(jù)夾。(請(qǐng)參考上面的"檔案說(shuō)明") 解壓縮完畢后,您便可以立即點(diǎn)兩下 exobud.htm ,執(zhí)行這個(gè)檔案,搶鮮測(cè)試一下 這支超炫的播放程序!^^
▽ 第2步:準(zhǔn)備媒體檔案 └─────────── 如果您要把這個(gè)播放器放到網(wǎng)站上,您當(dāng)然不會(huì)使用預(yù)設(shè)的「樣本播放清單」吧。 這個(gè)時(shí)候,您需要準(zhǔn)備一些媒體檔案。這些音訊或視訊檔案的來(lái)源,可以是您硬盤 里面的檔案,也可以是網(wǎng)絡(luò)上的串流處理媒體檔案連結(jié)。 如果您硬盤里面的媒體檔案都是動(dòng)輒幾MB甚至幾十MB的 mp3,wav,avi,mpg... 相信 您也不會(huì)將這些狂吃容量的檔案上傳到FTP服務(wù)器吧! 此時(shí)您就需要一個(gè)編碼器, 例如微軟的 Windows Media Encoder (建議使用v7.x或以上的版本) ,將這些檔案 都轉(zhuǎn)換成體積比較小的串流媒體檔案(asf,wma,wmv),然后才上傳到 FTP 服務(wù)器。 (若您是自行架設(shè)串流媒體服務(wù)站,請(qǐng)將檔案上傳到您的 MMS 服務(wù)器) 媒體檔案的命名也值得我們注意。因?yàn)椴皇窃谒姓Z(yǔ)系、所有操作系統(tǒng)和瀏覽器的 環(huán)境下,都可以正確讀取以繁體中文 (或其它雙字節(jié)語(yǔ)系) 來(lái)命名的文件名稱的, 所以請(qǐng)您最好不要使用含漢字字符的檔名,同時(shí)也應(yīng)盡量避免在文件名稱里使用像 半角空白、百分比(%) 這些特殊字符。文件名稱在網(wǎng)絡(luò)上的使用仍是以全英文小寫 為最保險(xiǎn)。(您可以使用底線字符 _ 來(lái)代替空白的) 假如您堅(jiān)持要使用像 mp3,wav 這些非串流媒體檔案格式, 請(qǐng)確保檔案不會(huì)太大, 致使瀏覽者需要一段時(shí)間才下載完成整個(gè)檔案,因?yàn)楸境绦虿荒軐?duì)這類檔案做緩沖 處理(Buffering),而是要等到接收完畢整個(gè)檔案后才會(huì)播放的。 如果您想要使用播放器的字幕功能,您還需要準(zhǔn)備對(duì)應(yīng)媒體檔案的SMIL字幕檔案, 并且要將這個(gè)SMIL檔放置在與對(duì)應(yīng)的 asf,wma 媒體檔案相同的數(shù)據(jù)夾。 ※ 因?yàn)楸境绦蚴抢梦④浀?Windows Media Player 做為后臺(tái)播放程序,所以 并不支援以 .ra .rm .rv .ram 等這些由 RealNetworks 制訂的媒體格式來(lái) 播放音訊或視訊內(nèi)容。 ※ 雖然本程序可支持微軟最新開發(fā)的 「Windows Media 播放清單」 檔案格式 (擴(kuò)展名為.wpl),但是因?yàn)榇烁袷缴形撮_發(fā)成熟,而本程序?qū)Υ烁袷降闹С?br>可能不夠完全,所以建議使用者應(yīng)避免使用這種檔案來(lái)制作播放清單,除非 您是本程序的開發(fā)人員/面板制作者,或?qū)Τ绦蜻\(yùn)作已有深入了解。
══════════════════════════════════════ ■ 設(shè)定播放程序 ══════════════════════════════════════ 這個(gè)部份會(huì)向您說(shuō)明如何設(shè)定播放程序,包括基本設(shè)定及播放清單內(nèi)容:
▽ 第3步:檢查播放程序 └─────────── 以 Internet Explorer 瀏覽器開啟 exobud.htm 這個(gè)檔案, 然后點(diǎn)一下【播放】 按鈕(除非預(yù)設(shè)是自動(dòng)播放),此時(shí)您應(yīng)該可以聽到聲音。假如沒(méi)有聽到任何聲音, 請(qǐng)檢查一下您的揚(yáng)聲器是否已開啟、Windows Media Player和IE的版本是否兼容。 目前正在播放的就是樣本播放清單所設(shè)定的項(xiàng)目。 ※ 繁體中文版本的 ExoBUD MP 播放器,已設(shè)定了頁(yè)面的顯示語(yǔ)系是 "big5", 假如因?yàn)槟承┰蚨诓シ琶姘迳铣霈F(xiàn)亂碼,請(qǐng)嘗試手動(dòng)變更頁(yè)面的語(yǔ)系。 (在IE變更頁(yè)面編碼的方法:點(diǎn)一下選單列的 [檢視] → [編碼],再點(diǎn)選 正確的語(yǔ)系 [繁體中文 (Big5)] 即可)
▽ 第4步:設(shè)定播放程序 └─────────── 接下來(lái),我們需要編輯 exobudset.js 這個(gè) JavaScript 原始碼檔案,此檔包含了 播放程序所有基本設(shè)定內(nèi)容。您可以不用關(guān)閉瀏覽器窗口,一邊進(jìn)行原始碼編輯, 同時(shí)在另一邊的瀏覽器,您可以按[F5]鍵重新整理頁(yè)面,測(cè)試一下原始碼在修改后 的執(zhí)行結(jié)果是否正常。 現(xiàn)在,請(qǐng)使用您慣用的純文字編輯器 (例如: EditPlus/EmEditor/記事本) ,打開 exobudset.js 這個(gè)檔案,編輯原始碼內(nèi)容。 因?yàn)樵跈n案里面已經(jīng)寫有相當(dāng)詳細(xì)的 說(shuō)明,解釋各個(gè)設(shè)定項(xiàng)目的用法,所以在這里不再贅述一遍。 ※ 所有項(xiàng)目的設(shè)定值只可以設(shè)為 true (是) 或 false (否),請(qǐng)注意這兩個(gè) 英文單字必須使用全小寫半角字母,亦不能寫錯(cuò)字。
▽ 第5步:設(shè)定播放清單內(nèi)容 └───────────── 當(dāng)您修改「播放程序的基本設(shè)定」完畢,接下來(lái)我們就要設(shè)定播放清單的內(nèi)容,將 已存在于網(wǎng)絡(luò)上的媒體檔案,一個(gè)一個(gè)的「登錄」在播放清單上,這樣播放程序才 可以知道要播放什么媒體、媒體的檔案位置在哪里。 繁體中文版本的 ExoBUD MP 播放器,有別于原韓文版的設(shè)定方式, 設(shè)定播放清單 內(nèi)容的部份是寫在一個(gè)獨(dú)立的檔案 (exobudpl.js),而非播放面板 HTML 頁(yè)面檔案 (exobud.htm),這是為了方便修改和管理播放清單而作出的改動(dòng)。 現(xiàn)在,請(qǐng)使用您慣用的純文字編輯器 (例如: EditPlus/EmEditor/記事本) ,打開 exobudpl.js 這個(gè)檔案,編輯原始碼內(nèi)容。(這是一個(gè) JavaScript 的原始碼檔案) 因?yàn)樵诶锩嬉呀?jīng)有相當(dāng)詳細(xì)的說(shuō)明, 解釋如何設(shè)定 ExoBUD MP 專用的播放清單, 所以在這里不再贅述一遍。 ※ 完成設(shè)定您的播放清單后,必須重新整理播放器的頁(yè)面,播放清單的修改 才會(huì)正式生效。此外,亦建議您將剛修改好的播放清單完整的測(cè)試一遍, 確保播放清單上的所有媒體項(xiàng)目都能夠正常播放。
══════════════════════════════════════ ■ 將播放器嵌入網(wǎng)站 ══════════════════════════════════════ 當(dāng)播放程序的基本設(shè)定和播放清單都搞定了以后,您便可以將播放器嵌入網(wǎng)站了!請(qǐng)將 您所修改過(guò)的播放程序檔案 (包括所有程序需要用到的檔案和圖文件數(shù)據(jù)夾) ,使用 FTP 程序上傳到您網(wǎng)站的服務(wù)器、一個(gè)對(duì)應(yīng)的空白數(shù)據(jù)夾,例如 exobud_mp 。 ※ 如果不是做為測(cè)試用途,并且已在播放清單上刪除或批注掉「樣本播放清單」 的設(shè)定項(xiàng)目,您可以不必上傳"sample"這個(gè)存放了范例視訊檔案的數(shù)據(jù)夾。
現(xiàn)在,您可以使用頁(yè)面框架 (frameset) 或內(nèi)嵌框架 (iframe) 的方式,將播放器嵌入 到您的網(wǎng)站里去了!下面分別提供了以這兩種方式嵌入播放器的 HTML 語(yǔ)法讓您參考: ▼使用頁(yè)面框架 (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> ▼使用內(nèi)嵌框架 (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> ※ 以上設(shè)定框架大小的數(shù)值僅供參考。一般來(lái)說(shuō),長(zhǎng)條形狀的播放器會(huì)占用面積 大約為 640~760px(像素) 的寬度乘以 20~25px(像素) 的高度。 (若使用字幕功能,需額外增加 60px 的高度)
進(jìn)行播放器嵌入網(wǎng)站的動(dòng)作時(shí),請(qǐng)注意: 1. 您必須了解HTML的框架語(yǔ)法如何應(yīng)用,以及懂得利用純文字編輯器來(lái)設(shè)定框架 語(yǔ)法。若您仍未掌握框架語(yǔ)法的寫法,請(qǐng)先在網(wǎng)絡(luò)上搜尋有關(guān)數(shù)據(jù)了解一下。 2. 無(wú)論使用任何方式的語(yǔ)法 (包括JavaScript等) 將播放器嵌入網(wǎng)站,您都必須 確保當(dāng)瀏覽者轉(zhuǎn)換頁(yè)面時(shí),不會(huì)同時(shí)整理播放器所在的頁(yè)面,因而影響播放器 的動(dòng)作。 3. 如果您不熟悉HTML語(yǔ)法,最好不要使用以內(nèi)嵌框架 (iframe) 的方式將播放器 嵌入網(wǎng)站,除非您已明白您的網(wǎng)站版面設(shè)計(jì)適合使用以此方式嵌入播放器。 4. 以上說(shuō)明使用框架 (frameset或iframe) 的方式將播放器嵌入網(wǎng)站,并不適用 于以彈出式窗口 (Pop-up Window) 啟動(dòng)的播放器。
══════════════════════════════════════ ■ 播放器的進(jìn)階設(shè)定法:修改樣式表設(shè)定項(xiàng)目 ══════════════════════════════════════ 除了播放程序的基本設(shè)定和播放清單內(nèi)容以外,在播放程序的原始碼里面還「隱藏」了 不少可供個(gè)人化修改的樣式表(Style Sheet)設(shè)定項(xiàng)目!您可以憑自己對(duì)CSS樣式表語(yǔ)法 的認(rèn)識(shí),加入其它更具創(chuàng)意的設(shè)定值。 以下有一些預(yù)設(shè)可供修改樣式的地方,讓您參考: (請(qǐng)注意這些地方可能會(huì)因?yàn)椴煌姘宥写笮〔町?
▽ a)播放面板的基本樣式表設(shè)定 (exobud.css) └────────────────────── 在 exobud.css 這個(gè) CSS 樣式表檔案里面,您可以找到基本樣式表的設(shè)定內(nèi)容。 ▼以下是其中幾個(gè)樣式項(xiàng)目的設(shè)定: body { margin-top: 0px; margin-right: 0px; ← 不保留邊界的設(shè)定 margin-bottom: 0px; margin-left: 0px; cursor: crosshair; ← 鼠標(biāo)光標(biāo)呈十字形 overflow: hidden; } ← 不顯示窗口卷動(dòng)軸 body,td { font-family: 'Tahoma','Verdana','Arial'; ← 字形名稱 font-size: 9pt; } ← 字形大小 /* 顯示媒體標(biāo)題的樣式表設(shè)定 */ (此乃 精簡(jiǎn)版 播放器的設(shè)定) .title { border-width: 1px; ← 框線粗幼度(像素) border-style: solid; ← 框線形式 border-color: silver; ← 框線顏色 background-color: white; ← 背景顏色 color: black; ← 文字(前景)顏色 font-family: 'Tahoma','Verdana','Arial'; ← 字形名稱 font-size: 9pt; } ← 字形大小 /* 顯示時(shí)間長(zhǎng)度的樣式表設(shè)定 */ (此乃 精簡(jiǎn)版 播放器的設(shè)定) .time { border-width: 1px; ← 框線粗幼度(像素) border-style: solid; ← 框線形式 border-color: silver; ← 框線顏色 background-color: white; ← 背景顏色 color: black; ← 文字(前景)顏色 font-family: 'Tahoma','Verdana','Arial'; ← 字形名稱 font-size: 9pt; } ← 字形大小 (注:箭嘴 "←" 所示的地方是為了方便說(shuō)明才加上去的,實(shí)際編輯時(shí)請(qǐng)不要加入) ※ 您可以在 body 樣式里面加入 background 屬性來(lái)設(shè)定背景顏色或圖檔,例如: background-color: aliceblue; 或 background-image: url(./bg.gif); ※ .title 和 .time 兩個(gè)樣式,分別是顯示媒體標(biāo)題和時(shí)間長(zhǎng)度的樣式設(shè)定項(xiàng)目。 您可以根據(jù)自己的個(gè)人喜好來(lái)修改字形名稱/大小/顏色、框線粗幼度/顏色/模式 等的設(shè)定值。
▽ b)字幕框的樣式設(shè)定 (exobud.htm) └────────────────── ▼在 exobud.htm 這個(gè) HTML 檔案,接近最底部的地方, 可以找到這段 DIV 語(yǔ)法: (這里定義了一個(gè)區(qū)塊,其 ID 應(yīng)為 "capText") <div id="capText" style="width:100%;height:60;color:white; background-color:#555555;display:none">ExoBUD MP(II) Captioning(SMI)</div> ※ 您可以將字幕框放在播放面板上的任何位置,寬度(width)和高度(height)都 可以修改的。同樣地,您也可以根據(jù)自己的喜好 修改/增刪 其它樣式屬性的 設(shè)定,例如您可以加入 font-size 的屬性來(lái)設(shè)定字幕框文字的大小。 ※ 字幕框的部份,通常會(huì)以特別的顏色來(lái)顯示,用以突出其與播放器其它部份的 分別;預(yù)設(shè)的面板就是以深色的底色作背景顏色、以白色作文字(前景)顏色。 ※ 無(wú)論您是否使用字幕功能,也必須保留這段 DIV 語(yǔ)法,否則會(huì)導(dǎo)致播放程序 無(wú)法正常運(yùn)作。(區(qū)塊的 ID 是不能更改的) ※ 只有在 "blnUseSmi" 設(shè)定值為 true 的情況下(使用字幕功能),字幕框才會(huì) 顯示出來(lái)。
▽ c)播放清單上的 body 樣式設(shè)定 (exobudpl.css) └──────────────────────── 在另一個(gè)用來(lái)設(shè)定播放清單 CSS 樣式表的 exobudpl.css 檔案里面,您亦可以 找到基本樣式表的設(shè)定內(nèi)容。 ▼以下是 body 樣式項(xiàng)目的設(shè)定: body { margin-top: 0px; margin-right: 0px; ← 不保留邊界的設(shè)定 margin-bottom: 0px; margin-left: 0px; background-color: #8498A3; ← 背景顏色 background-image: url(./img/pl_skin.jpg); ← 背景圖檔(*) background-repeat: no-repeat; ← 背景圖是不重復(fù)的(*) background-attachment: fixed; ← 背景圖是固定位置(*) background-position: bottom right; ← 背景圖放底部*右(*) cursor: crosshair; } ← 鼠標(biāo)光標(biāo)呈十字形 (*) 這些屬性是為了方便讓大家參考才加上去的。 ※ 如果面板所使用的播放清單,有需要顯示卷動(dòng)軸的話,body樣式里面可能已經(jīng) 加入了關(guān)于卷動(dòng)軸的屬性設(shè)定。 ※ 以上所示 body 的樣式設(shè)定僅供參考,因?yàn)槊靠蠲姘逅@示的播放清單,也會(huì) 使用不同的樣式設(shè)定。如果您想更進(jìn)一步了解 body 的樣式設(shè)定法,請(qǐng)?jiān)诰W(wǎng)上 搜尋有關(guān)資料。
▽ d)播放清單上的連結(jié)樣式設(shè)定 (exobudpl.css) └─────────────────────── 同樣在 exobudpl.css 這個(gè)「播放清單樣式表」檔案里面,您還可以設(shè)定不同 類型的連結(jié)的顏色。 ▼以下是包含 anchor (即 "A" 語(yǔ)法) 樣式項(xiàng)目的設(shè)定: 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; } 瀏覽器是如何決定什么類型的連結(jié),以什么樣式來(lái)顯示? a,a:link : 在指定時(shí)間之內(nèi),未曾到訪過(guò)的連結(jié) a:visited : 在指定時(shí)間之內(nèi),已經(jīng)到訪過(guò)的連結(jié) a:active : 您正在到訪的連結(jié) a:hover : 您將鼠標(biāo)移到其上的連結(jié)(實(shí)時(shí)變色) ※ 通常我們都會(huì)以連結(jié)的文字顏色(color)來(lái)區(qū)分不同類型的連結(jié)的。但也會(huì)同時(shí) 輔以底線 (text-decoration: underline;) 來(lái)加以區(qū)別。
▽ e)播放清單上的文字樣式設(shè)定 (exobudpl.css) └─────────────────────── 播放清單上的文字,包括媒體標(biāo)題及項(xiàng)目編號(hào)等,您都可以自行設(shè)定喜愛的樣式。 ▼以下是基本樣式表中,關(guān)于文字樣式的設(shè)定: body,td { font-family: 'Tahoma','Verdana','Arial'; ← 字形名稱 font-size: 9pt; color: #B0C0D0; } ← 字形大小及顏色 ※ 因?yàn)椴シ徘鍐紊纤@示的媒體標(biāo)題,本身都是頁(yè)面上的連結(jié),所以您在這里 設(shè)定的文字顏色,只會(huì)對(duì)項(xiàng)目編號(hào)有效,而不會(huì)適用于媒體標(biāo)題。
══════════════════════════════════════
|