?? exobud.txt
字號:
如果您硬盤里面的媒體檔案都是動輒幾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; } ← 字形大小及顏色
※ 因為播放清單上所顯示的媒體標題,本身都是頁面上的連結,所以您在這里
設定的文字顏色,只會對項目編號有效,而不會適用于媒體標題。
══════════════════════════════════════
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -