embed 是個很簡便的語法,可用來播放影音檔,通常是用來播放 Windows Media Player 支援的格式,但也可用來播放一些其他格式,只是要注意更多細節,本文最後再略微提一下其他格式,主要還是討論 Windows Media Player 支援的格式。(如 WMA、WMV、ASF、MPG、AVI)

註1. 本文針對 IE 環境討論,若使用別的瀏覽器如 Firefox、Opera... 等,語法所產生的效果可能不盡相同,甚至無法操作。另外,電腦裡各種播放軟體 (Windows Media Player、Real Player、QuickTime Player... 等) 的版本若不同,語法產生的效果也可能不同,建議各種播放軟體盡量使用較新的版本。

註2. 本文會出現很多「*** = 0」「*** = 1」之類的語法範例,請注意是阿拉伯數字的「零」「壹」,不是英文字母的「大寫 O」「小寫 L」。

<embed src="檔案位址" />

上面這便是 embed 最簡單的寫法,只要這樣寫便可播放影音檔,以下再開始討論各注意事項及設定參數。


關於尺寸:

如上的最簡潔寫法,尺寸完全不設定,這是最理想的。播放音樂檔時,會自動呈現一條完整的播放 Bar,如右圖所示 (Windows Media Player 版本若不同播放 Bar 外觀也可能不同)。播放影片時 (WMV、ASF、MPG、AVI),除了播放 Bar,還會以影片的原始尺寸播放出畫面,畫面大小會自動調整。

如果因各種因素而想設定尺寸,例如想刻意拉大縮小影片的畫面,或是想改變播放 Bar 的大小,只要加進尺寸參數 width="寬度" height="高度" 即可,範例如下:

<embed src="檔案位址" width="寬度" height="高度" />

尺寸設定是連播放 Bar 也算在內的,例如你若設定 height="300",播放出來時所謂的高度300是「畫面高度和播放 Bar 高度」加起來總共300。


關於自動播放:

如上的最簡潔寫法,預設會自動播放。如果不想自動播放,加入參數 autostart="0" 即可,範例如下:

<embed src="檔案位址" autostart="0" />


關於循環播放:

如上的最簡潔寫法,預設不會循環播放。如果要循環播放,加入參數 loop="1" 即可,範例如下:

<embed src="檔案位址" loop="1" />


關於 Tracker:

嗯,Tracker,中文要怎麼翻譯啊?反正如果加進這句參數 ShowTracker="0",播放 Bar 就會變成像右圖那樣,應該有看出少了什麼東西吧。語法範例如下:

<embed src="檔案位址" ShowTracker="0" />


關於 Position Controls:

嗯,跟上一篇一樣,不會翻譯啦,反正只要加入這句參數 ShowPositionControls="0",播放 Bar 就會變成如右圖那樣,看出少了什麼東西了嗎?語法範例如下:

<embed src="檔案位址" ShowPositionControls="0" />


關於 Audio Controls:

只要加入此參數 ShowAudioControls="0",控制音量的 tracker 跟靜音鈕都會消失。語法範例如下:

<embed src="檔案位址" ShowAudioControls="0" />


關於預設的音量大小:

在語法裡面如果沒有設定音量大小,播放時預設音量大小如右上圖,大約是50%的音量。

如果希望一開始播放就是100%最大音量,可以加入這句參數 Volume="0",播放情況如右下圖,語法範例如下:

<embed src="檔案位址" Volume="0" />

但若是用 embed 語法播放 MOV 影片檔,這句音量語法反而會使預設音量變成靜音。沒辦法,很難面面俱到所有情況。


關於資訊視窗 (part 1):

只要加進這句參數 ShowStatusBar="1",播放 Bar 下方便會多出一行資訊視窗,如右圖。語法範例如下:

<embed src="檔案位址" ShowStatusBar="1" />

這個參數是非常實用的,因為這行資訊視窗會秀出很多有用資訊如下載進度、播放進度、曲名、藝人名稱... 等等。秀出下載進度、播放進度尤其體貼,可以讓瀏覽者大概掌握到底要等多久才會開始播放,不用癡癡望著螢幕像個傻子一樣。我建議用 embed 語法播放影音檔時最好都加上這句參數。


關於資訊視窗 (part 2):

還有另外一種秀出資訊視窗的參數 ShowDisplay="1",會一口氣秀出四行資訊,每行各秀出一種資訊,如右圖。語法範例如下:

<embed src="檔案位址" ShowDisplay="1" />

這個參數我認為很無謂!首先,這語法不會顯示最有用的下載進度、播放進度等資訊。再則,它所秀出的資訊,上一個參數 ShowStatusBar="1" 便可全部呈現出來,差別只不過在於 ShowStatusBar="1" 是採用單行交替顯示,ShowDisplay="1" 是多行同時列出來。總之我認為這個 ShowDisplay="1" 語法大而不當。


關於防右鍵:

各位可以試試在播放 Bar上按右鍵看內容,便可看到檔案的真實位址!或是在播放影片時也可以在畫面上按右鍵看內容,也可看到檔案真實位址。加上這句參數 EnableContextMenu="0" 便可防止在播放 Bar 或影片畫面上按右鍵。語法範例如下:

<embed src="檔案位址" EnableContextMenu="0" />

可是這語法有點無謂,因為光是在播放面版上防堵意義不大,還要搭配整個頁面的防堵才能收到效果。所以,自己看著辦吧。


關於隱藏面版 (part 1):

只要加上這句參數 hidden="true",整個播放面版就會不見,什麼都看不到,就算你是播放影片也看不到任何畫面。但是歌曲還是會播放 (只要你沒取消自動播放),就是只能聽得到聲音,而看不到任何東西。語法範例如下:

<embed src="檔案位址" hidden="true" />

什麼東西都沒有,卻又會播放歌曲,想到什麼了嗎?沒錯,就是最傳統的背景音樂語法 <bgsound src="檔案位址">!embed 加上 hidden="true" 後,看不到播放面版卻可以播歌,表面上的確和 bgsound 語法一模一樣,兩者可以互相取代。但在功能上,兩者還是有差別的!

用 bgsound 語法播放歌曲沒有串流功能,即使播 WMA 也沒有,一定要檔案完全下載完畢才會開始播放。embed 加 hidden="true" 就有串流功能。有串流就比較好嗎?不見得!是會比較快開始播放歌曲沒錯,但如果網路繁忙或連線速度慢,播放就會斷斷續續的。bgsound 語法要整首下載完才播放,等比較久才聽的到,但開始播後就保證不會斷斷續續的。

所以,現在頁面要播背景音樂有兩種選擇了,就看你要不要串流功能。


關於隱藏面版 (part 2):

上面「隱藏面版 part 1」是讓所有東西都看不見,就算播影片的話連畫面都看不到;而這裡「隱藏面版 part 2」要隱藏的只是播放的控制 BAR,就是前頭各範例圖片那條藍色的控制 BAR,它是可以整個被隱藏起來的,只要加上這句參數 ShowControls="0" 就可以了。完整語法範例如下:

<embed src="檔案位址" ShowControls="0" />

如果是播音樂,音樂本來就沒有畫面,若再加上這句語法把控制 BAR 隱藏起來,那情況就跟「隱藏面版 part 1」完全一樣了。

但播影片就不一樣了。加上這句 ShowControls="0" 語法只是把控制 BAR 隱藏起來,但影片的畫面還是看得到,也就是只有畫面而沒有其他任何東西。這樣的話很適合版面美化處理,例如可以在影片周圍加上一些邊框圖片,讓整個看起來像是一台電視機或銀幕。


播放清單檔:

embed 並非只能直接播放影音檔,它也可以播放清單檔如 M3U、ASX、WPL 等,這樣就可以用一句 embed 語法播放多首歌曲。語法範例如下:

<embed src="清單檔檔名.m3u" />

當然,想這樣運用自己就得多費心製作清單檔,影音檔跟清單檔上傳時也要注意其相對位置都要擺正確。

並非所有電腦環境都支援播放各式清單檔,如果 Windows Media Player 版本不夠新,可能就無法播放一些清單檔。還有如果你電腦預設使用其他軟體來播放清單檔 (非 Media Player),也可能無法支援用 embed 播放清單檔,得將檔案格式連結回 Media Player 才行。

播放清單檔功能如果搭配上述的隱藏面版功能就很有趣了,什麼都沒看到,卻會自動播放多首背景音樂。不過這無法讓瀏覽者做任何控制,強迫接受多首歌曲,很霸道!


播放 MP3:

用 embed 可以播放 MP3,但有一點要注意,通常大家電腦裡不見得是預設用 Windows Media Player 來播放 MP3,很多人是預設 MusicMatch Jukebox、WinAmp... 等等,總之只要不是預設用 Media Player,embed 在播放 MP3 便會呼叫別的軟體來播放,如 QuickTime Player 或 Real Player,而這樣播放面版都會很小或甚至看不到,所以一定要設尺寸才可以。

只有電腦裡預設用 Media Player 播放 MP3,embed 才會呼叫 Media Player 來播放 MP3,也才會是那個熟悉的 Media Player style 的播放面版,各種設定也較為方便。語法範例如下:

<embed src="檔名.mp3" />


播放 Flash 檔案 SWF:

embed 可以播放 SWF,事實上 SWF 好像一定要用 embed 才能播放出來。要注意播放時一定要設定尺寸,否則畫面會只有 200*200。語法範例如下:

<embed src="檔名.swf" width="寬度" height="高度" />

播放 SWF 不會出現任何播放 Bar (除非 SWF 檔案本身有做一個),因為播放 SWF 並非呼叫 Media Player 來播放,而是直接用IE播放。


播放 Quicktime 影片檔案 MOV 及 QT:

embed 可以播放 MOV 及 QT 影片檔,但是電腦裡必須有 QuickTime Player,而且版本要夠新,最好是6.3以上,這樣才能看到用 embed 播的 MOV 或 QT 檔。另外,播放時一定要設定尺寸,否則畫面會變很小或甚至看不到。語法範例如下:

<embed src="檔名.mov" width="寬度" height="高度" />

播放 MOV 或 QT 會有播放 Bar,是 QuickTime style 的播放 Bar,尺寸設定亦是將播放 Bar 算在內的,多嘗試幾次便能掌握合適的尺寸。


播放 Real 音樂檔 RA:

先談播放 Real 音樂檔。第一,用 embed 播放 Real 音樂檔一定要寫尺寸大小,否則播放面版會很小或甚至看不到。第二,關於「自動播放」若什麼都不寫不去設定,預設是「不會自動播放」,若要自動播放就要加入這句參數 autostart="1"。整個綜合起來語法範例如下:(圖示如右)

<embed src="檔名.ra" autostart="1" width="寬度" height="高度">

還有一個秀出播放面版的語法 controls="ControlPanel",若加這句進去,面版會變成像右圖這樣。這句有點雞婆,多加一句話,秀出的東西卻比上面那個圖示還少,如果就是想讓面版簡潔些,就可用這句語法。高度可以設小一點啦,不見得要像右圖這麼高。語法範例如下:

<embed src="檔名.ra" autostart="1" width="寬度" height="高度" controls="ControlPanel" />


播放 Real 影片檔 RM:(狀況1)

如果 RealPlayer 版本夠新的話 (確切的需要第幾版以上我也不清楚),要用 embed 語法播放 Real 影片就很簡單,就是上述播放 Real 音樂檔的語法就可以了 (不需寫 controls="ControlPanel")。

要注意之處還是一樣:一定要設定自動播放 autostart="1",一定要設定尺寸。尺寸就看影片畫面大小是多少,再設定個合理的尺寸,注意尺寸是連播放 Bar 都包括進去一起算的。

語法範例如下:(圖示如右)

<embed src="檔名.rm" autostart="1" width="寬度" height="高度" controls="ControlPanel" />


播放 Real 影片檔 RM:(狀況2)

如果因為 Real Player 版本較舊或其他因素,使用上述簡單語法播放 Real 影片時只能聽到聲音,看不到畫面 (只有看到播放 Bar),那就要加上這句參數 controls="ImageWindow" 才能看到畫面。當然,尺寸還是要寫,關於自動播放的設定也同上述。語法範例如下:

<embed src="檔名.rm" autostart="1" width="寬度" height="高度" controls="ImageWindow" />

用這語法播放影片,畫面先是 Real Player 的標誌,下方會顯示檔案下載進度,開始播放後就只有畫面,沒有任何控制面版,整個情況如右圖所示。所以,用這語法播放 Real 影片一定要設為自動播放,否則沒有播放面版根本無法控制。

那如果想要播放出畫面又要有控制面版呢?可以,有個特殊寫法可以辦的到。

原理簡單來說是將整組 embed 語法寫兩次,兩組語法用 <br> 隔開。上面那組語法加入 controls="ImageWindow" 參數播出畫面,沒有控制面版。下面那組語法不要多加參數 (或是加入 controls="controlpanel"),就只有控制面版,看不到畫面。然後兩組語法都要加入一個重要參數 console="_master"!有這句,兩組語法的播放才會同步並互相關連,操作下面那組語法的面版亦可控制上面那組語法的播放。整個語法範例如下:

<embed src="檔名.ram" autostart="1" width="影片畫面寬度" height="影片畫面高度" controls="ImageWindow" console="_master" />
<br>
<embed src="檔名.ram" autostart="1" width="控制面版寬度" height="控制面版高度" controls="controlpanel" console="_master" />

上面這範例,兩組 embed 語法以及 <br> 之間我都有換行讓它呈現的更清楚,各位自行寫的時候請把它們通通連起來成為一行很長的語法,這樣呈現出來的才會如右圖,畫面下面緊接著是控制面版。如果像上面範例這樣有換行,畫面跟控制面版之間會有空行間隔出現。