轉(zhuǎn)載：原文出處無跡可尋，若本文是您的原創(chuàng)文章請聯(lián)系我并提供證明，本人轉(zhuǎn)載盡量注明出處
如果你不總是用 Windows 上的 Internet Explorer 來上網(wǎng)的話，你可能會(huì)注意到，許多網(wǎng)站上的視頻點(diǎn)播之類的多媒體內(nèi)容，你無法直接在 Internet Explorer 以外的其它瀏覽器中觀看，比如明明已經(jīng)安裝了插件卻提示缺少插件，或者什么都不提示出現(xiàn)空的框框，或者顯示了播放器插件卻始終連不上打不開之類的問題，而在 Internet Explorer 上卻能夠正確的打開并播放。顯然這不是由于網(wǎng)絡(luò)不通或者媒體不存在造成的，而是由于網(wǎng)頁內(nèi)的代碼有問題。你可能覺得這無關(guān)緊要，因?yàn)槟阋呀?jīng)習(xí)慣用 Internet Explorer 來瀏覽它們了；也可能你曾為此而頭疼，如果你是一個(gè) Linux 用戶。可是不管怎么樣，如果能在所有操作系統(tǒng)平臺(tái)的所有瀏覽器上都能正常播放這些多媒體內(nèi)容，總是一件好的事情。本文就是來解決這些問題的。
本文將介紹如何在網(wǎng)頁中內(nèi)嵌 Windows Media、RealPlayer、Quicktime 和 Flash 的完美方法。這些方法適用于 Windows、Linux、Mac OS X 等操作系統(tǒng)平臺(tái)上的 Internet Explorer、Mozilla、Firefox、NetScape、Opera 等多種瀏覽器。
完美內(nèi)嵌 Windows Media
客戶端要求：
對(duì)于 Windows 用戶，需要安裝 Windows Media Player 7 以上的版本，Windows Media Player 6 不支持 WMV/WMA，推薦安裝 Windows Media Player 10。對(duì)于非 Internet Explorer 用戶，還需要安裝Windows Media Player Plug-in for Netscape Navigator。
對(duì)于 Mac OS X 用戶，需要 Windows Media Player 9 for Mac OS X，對(duì)于 Mac OS 8.1-9x，需要安裝Windows Media Player 7.1 for for Mac OS 8.1-9x。
對(duì)于 Linux 以及 FreeBSD、Solaris 等 Unix 系統(tǒng)用戶，需要 VLC media player及其瀏覽器插件或者 MPlayer 及其瀏覽器插件。VLC media player 0.80 及其以上的版本支持 WMV/WMA。
實(shí)現(xiàn)代碼：
<object width="420" height="360" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="filename" value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf" />
<embed width="420" height="360" type="application/x-mplayer2" src="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf"></embed>
</object>
也可以用下面這段代碼：
<object width="420" height="360" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf" />
<embed width="420" height="360" type="application/x-mplayer2" src="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf"></embed>
</object>
要點(diǎn)分析：
這兩段代碼的區(qū)別主要是針對(duì) Internet Explorer 的。這兩段代碼使用了兩個(gè)不同的 Media Player 對(duì)象，第一個(gè)是 MediaPlayer.MediaPlayer，第二個(gè)是 WMPlayer.OCX。這兩個(gè) ActiveX 對(duì)象都是針對(duì) Internet Explorer 的，因此它們不影響 Firefox、Opera 等瀏覽器。這兩個(gè)對(duì)象在 Internet Explorer 上的顯示效果是不一樣的，第一個(gè)對(duì)象的顯示效果跟在 Windows 上的 Firefox、Opera 內(nèi)的顯示效果是一樣的，而第二個(gè)對(duì)象在 Internet Explorer 上的顯示效果是采用 Windows Media Player 本身的皮膚效果，如果你安裝了 Windows Media Player 10，采用第二種寫法，你在 Internet Explorer 上將會(huì)看到 Windows Media Player 10 那種晶瑩剔透的皮膚效果。
Firefox 不支持 object 中 classid 屬性，只支持 type 屬性，而如果發(fā)現(xiàn) object 有 classid 屬性以后，它將不理會(huì) object，而只執(zhí)行 embed。而對(duì)于 Opera 則很有趣，它既支持 object，又支持 embed，但是因?yàn)?embed 是嵌入到 object 中的，如果它能正確識(shí)別 object，它就不再理會(huì) embed，如果它不能識(shí)別 object，則執(zhí)行 embed。因此它不會(huì)顯示兩個(gè)播放器。至少我是用的 8.5 版的 Opera 是這樣的。而 Internet Explorer 則只識(shí)別 object 中的 classid 屬性。因此在 object 中，我們不需要指定 type 屬性。
對(duì)于 embed 標(biāo)簽，我們指定它的 type 為 application/x-mplayer2，在安裝了 Windows Media Player 的系統(tǒng)上，它對(duì)應(yīng)于所有 Windows Media Player 能識(shí)別的類型，因此你可以任意指定 asf，asx，wmv，wma，avi，mp3 等類型的媒體，而在沒有 Windows Media Player，卻安裝了 VLC media player（或 MPlayer）的系統(tǒng)上，它對(duì)應(yīng)于所有 VLC media player（或 MPlayer）能識(shí)別的類型，Windows Media Player 支持的媒體類型 VLC media player（或 MPlayer）均能支持，甚至 VLC media player（或 MPlayer）支持的媒體類型比 Windows Media Player 更多，因此上面這種寫法是完全支持多平臺(tái)多瀏覽器的。
對(duì)于上面兩個(gè)不同的 ojbect，指定播放文件的參數(shù)是不一樣，第一個(gè)是用 filename 來指定，第二個(gè)是用 url 來指定。而 embed 中指定播放文件的參數(shù)是 src，雖然用 filename 也可以，但是 src 更標(biāo)準(zhǔn)一些。
embed 中的文件名必須是完整的 url 路徑，否則 VLC media player 不能正確識(shí)別，另外要對(duì)文件路徑進(jìn)行 url 編碼，否則如果文件路徑中如果有中文或者其他非英文文字的話，在非 Internet Explorer 瀏覽器中也無法正確識(shí)別。不要對(duì) “協(xié)議://域名/” 部分進(jìn)行 url 編碼，否則所有的瀏覽器都不能識(shí)別。呵呵。
對(duì)文件路徑進(jìn)行 url 編碼，在 php 中可以使用 rawurlencode 函數(shù)，在 asp 中可以使用 Server.URLencode 函數(shù)。
完美內(nèi)嵌 RealPlayer (RealMedia)
客戶端要求：
對(duì)于 Windows，Linux 和 Mac OS X，可以安裝 Realplayer 播放器及其瀏覽器插件，也可以安裝帶有 RealPlayer 解碼器及其瀏覽器插件的其他播放器，例如 Windows 上可以安裝暴風(fēng)影音。
實(shí)現(xiàn)代碼：
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="420" height="310">
<param name="src" value="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" />
<param name="controls" value="Imagewindow" />
<param name="console" value="clip1" />
<param name="autostart" value="true" />
<embed src="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" type="audio/x-pn-realaudio-plugin" autostart="true" console="clip1" controls="Imagewindow" width="420" height="310">
</embed>
</object>
<br />
<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="420" height="44">
<param name="src" value="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" />
<param name="controls" value="ControlPanel" />
<param name="console" value="clip1" />
<param name="autostart" value="true" />
<embed src="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm" type="audio/x-pn-realaudio-plugin" autostart="true" console="clip1" controls="ControlPanel" width="420" height="44">
</embed>
</object>
link.php
<?php
echo (get_magic_quotes_gpc() ? stripslashes($_GET['link']) : $_GET['link']);
?>
要點(diǎn)分析：
上面的代碼實(shí)現(xiàn)了的效果是在任何安裝了 realplayer 插件的瀏覽器上，都可以看到一個(gè)播放窗口和一個(gè)播放控制欄，并且媒體被自動(dòng)加載播放。對(duì)于 object 一段，這里就不做詳細(xì)解釋了，因?yàn)樗轻槍?duì) Internet Explorer 的，相信大部分寫過這種代碼的人都能看得懂。我們重點(diǎn)來說一下 embed 一段，它是針對(duì) Firefox 和 Opera 等瀏覽器的。
大部分人在使用 Firefox 和 Opera 時(shí)經(jīng)常會(huì)遇到一個(gè)問題，就是安裝了 RealPlayer 及其瀏覽器插件以后，仍然不能觀看嵌入到網(wǎng)頁中的 rm 或 rmvb 流媒體，提示找不到插件，或者顯示空白，或者顯示了內(nèi)嵌的播放器卻不能播放，這是什么原因造成的呢？
如果你在 Firefox 和 Opera 的地址欄中鍵入：about:plugins ，可以看到你所安裝的所有插件。不管你的系統(tǒng)里是否安裝的是真的 RealPlayer 播放器，只要你看到下面的內(nèi)容，
Windows
RealPlayer(tm) G2 LiveConnect-Enabled Plug-In (32-bit)
- 文件名： nppl3260.dll
- RealPlayer(tm) LiveConnect-Enabled Plug-In
| MIME 類型 |
描述 |
后綴 |
已啟用 |
| audio/x-pn-realaudio-plugin |
RealPlayer(tm) as Plug-in |
rpm |
是 |
Linux
Helix DNA Plugin: RealPlayer G2 Plug-In Compatible
- 文件名： nphelix.so
- Helix DNA Plugin: RealPlayer G2 Plug-In Compatible version 0.4.0.552 built
with gcc 3.2.0 on May 13 2005
| MIME 類型 |
描述 |
后綴 |
已啟用 |
| audio/x-pn-realaudio-plugin |
RealPlayer Plugin Metafile |
rpm |
是 |
就說明你已經(jīng)安裝好了 RealPlayer 的插件。不能夠播放的原因就是他沒有像我上面那樣寫代碼。
從上面的插件信息里我們可以看到，RealPlayer 插件只提供了一種 rpm 格式的媒體類型可以播放，而其他諸如 rm，rmvb 等類型卻好像沒有提供支持。是這樣嗎？可以說是也可以說不是。
比如你如果在 embed 里指定 type 為 audio/x-pn-realaudio 類型，這個(gè)是正確的 mime 類型，但是你會(huì)發(fā)現(xiàn)你的瀏覽器將不能播放，而會(huì)讓你安裝插件，即使你已經(jīng)安裝了 RealPlayer 插件。因?yàn)?RealPlayer 插件不能識(shí)別這種正確的 mime 類型。
于是有的人認(rèn)為只要指定 type 為 audio/x-pn-realaudio-plugin，然后后面直接指定 rm 或者 rmvb 等 RealPlayer 媒體類型的文件就可以了。是這樣嗎？也不是。這樣做的話，你可以看到內(nèi)嵌的播放器，但是你會(huì)發(fā)現(xiàn)播放器始終無法連接到服務(wù)器并播放你所指定的媒體。因?yàn)槟闼付ǖ念愋筒⒉皇?audio/x-pn-realaudio-plugin 所對(duì)應(yīng)的類型。
于是有人說 RealNetworks 已經(jīng)將非 IE 的瀏覽器給放棄了，其實(shí)這樣說是不對(duì)的。雖然存在上面的種種情況，但那是因?yàn)槟切┚帉懢W(wǎng)頁代碼的人沒有理解 RealNetworks 的真正意圖， RealNetworks 不但沒有放棄在非 IE 瀏覽器中嵌入 RealMedia，反而是提供了一種通用的方式，讓你可以所有瀏覽器中都能內(nèi)嵌播放所有的 RealMedia。因?yàn)槲业拇a就能夠如我所說的這樣工作。
首先我們必須要先知道一件事情，那就是 rpm 是一種什么文件。從上面 Linux 上的插件的信息中我們可以得知，它是 RealPlayer 插件元文件（RealPlayer Plugin Metafile）。因此它不是媒體內(nèi)容文件，更不是紅帽的安裝包文件。它里面的內(nèi)容是實(shí)際媒體的位置信息（url）。這樣我們就很容易理解 RealNetworks 為什么要這樣做了，因?yàn)檫@樣只要指定一種 type，就能夠播放所有的 Real 媒體了。這不是很方便嗎？
在這里需要注意的一點(diǎn)是，embed 的 src 屬性里指定的路徑不需要是完整的 url，相對(duì)路徑就可以了，而且也不一定是 rpm 后綴的文件，因此上面的代碼中，src 中指定的是一個(gè)程序 link.php，而這個(gè)程序的結(jié)果就是一個(gè) rpm 格式的文件，因此它能夠被正確的播放。這個(gè) link 程序很簡單，它只是把傳入的參數(shù) link 以文件內(nèi)容的形式返回就行了。
雖然 embed 的 src 屬性不需要完整的 url，但是 link.php 的參數(shù) link 是需要實(shí)際媒體的完整 url 的， 并且參數(shù) link 要以 url 編碼形式進(jìn)行編碼，否則 RealPlayer 插件不能夠識(shí)別帶有非英文的路徑。但是返回的 rpm 文件內(nèi)容中的 url 無需編碼了，RealPlayer 能夠識(shí)別 rpm 文件內(nèi)容中的非英文編碼的路徑，如果你實(shí)在不放心，也可以對(duì)它進(jìn)行 url 編碼，但是仍然不要對(duì) “協(xié)議://域名/” 部分進(jìn)行 url 編碼，否則 RealPlayer 插件就不能識(shí)別了。
PHP 程序中的 $_GET 中的變量，如果 php 配置文件中 magic_quotes_gpc 設(shè)為 true 的話（默認(rèn)配置），它會(huì)對(duì)某些特殊字符加上反斜杠，這樣做是為了避免數(shù)據(jù)庫注入漏洞，但這里我們不寫數(shù)據(jù)庫，因此這里我們需要根據(jù) magic_quotes_gpc 的狀態(tài)來判斷是否去掉多出來的反斜杠。否則輸出的文件內(nèi)容可能是錯(cuò)誤的。
如果用 ASP，則不需這么麻煩，只需要一行代碼就搞定了：
完美內(nèi)嵌 Quicktime
客戶端要求：
對(duì)于 Windows 用戶和 Mac OS X 用戶，安裝相應(yīng)版本的 QuickTime 播放器即可。Windows 版下載 QuickTimeinstaller.exe，Mac OS X 版下載 QuickTimeinstaller.exe
Windows 用戶也可以安裝暴風(fēng)影音等帶有 QuickTime 解碼器和瀏覽器插件的其他播放器，例如暴風(fēng)影音。
對(duì)于 Linux 以及 FreeBSD、Solaris 等 Unix 系統(tǒng)用戶，需要 VLC media player及其瀏覽器插件或者 MPlayer 及其瀏覽器插件。
實(shí)現(xiàn)代碼：
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="420" height="360">
<param name="autoplay" value="true" />
<param name="src" value="mov%2F%B2%E2%CA%D4%2Emov" />
<embed src="mov%2F%B2%E2%CA%D4%2Emov" type="video/quicktime" autoplay="true" width="420" height="360">
</embed>
</object>
要點(diǎn)分析：
QuickTime 格式的內(nèi)嵌比較簡單，像上面那樣寫就可以了，基本上沒有什么要注意的地方。媒體路徑 src 的值，可以是完整地址，也可以是相對(duì)地址，可以用 url 編碼，也可以不編碼，QuickTime 插件和 VLC 插件都能正確的支持，當(dāng)然為了保險(xiǎn)起見，最好還是采用 url 編碼方式里寫媒體路徑。
雖然 embed 中指定的是 video/quicktime 類型，但是即使鏈接的媒體是 mp3 仍然能播放。對(duì)于 QuickTime 支持的其他類型的沒有進(jìn)行測試，但我想應(yīng)該也是可以的。
完美內(nèi)嵌 Flash
客戶端要求：
安裝你所使用的瀏覽器的 Flash 插件。
實(shí)現(xiàn)代碼：
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="420" height="320">
<param name="movie" value="flash/打電話記.swf" />
<param name="quality" value="high" />
<embed src="flash/打電話記.swf" quality="high" type="application/x-shockwave-flash" width="420" height="320"></embed>
</object>
要點(diǎn)分析：
對(duì)于 Flash 似乎沒什么好說的，因?yàn)檫@個(gè)用的很普遍。在這里寫下來只是為了查閱方便，算是湊數(shù)吧。呵呵。
讓內(nèi)嵌多媒體通過 XHTML 驗(yàn)證
問題：
上面的所有的代碼，雖然能夠完美的在各個(gè)瀏覽器上很好的播放了，但是還有一點(diǎn)美中不足，那就是這樣的頁面無法通過 XHTML 驗(yàn)證。原因是 embed 標(biāo)簽從來都不是 HTML 標(biāo)準(zhǔn)中的標(biāo)簽，因此 XHTML 中也沒有它。
解決：
如果你不在乎你的網(wǎng)頁是否符合標(biāo)準(zhǔn)，那照上面那樣做就可以了。如果你還想追求更加完美，請看下面的解決方案：
下面以 flash 為例來介紹，方法同樣適用于其他類型的多媒體內(nèi)容。
我們知道 W3C 推薦使用的是 object 標(biāo)簽，但用法卻不是 Internet Explorer 那種用 classid 來區(qū)分控件類型，而是采用 type 來指定 MIME 類型。現(xiàn)在的 Mozilla、Firefox 和 Opera 都支持這種用法，雖然 IE 目前的版本也支持這種用法，不過很可惜的是，IE 還是有 bug，那就是只有全部下載完畢才能播放。而且還不是所有的情況下都能用。在某些 IE 瀏覽器上還顯示空白。所以單純用 W3C 推薦的 object 標(biāo)簽用法還是不夠的。但是我們可以作一下變通，如果是用戶瀏覽器是 IE 的話，我們就用 IE 的 object 的用法，如果是其他瀏覽器，我們就采用 W3C 的用法。這樣就可以兩全其美了。也許此刻，你覺得我們該用到腳本了。不，我們不需要腳本。我們只需要用 IE 所特有的條件注釋和 CSS 就可以做到了。例子如下：
<style type="text/css">
.mozilla {
display:block;
}
</style>
<!--[if IE]>
<style type="text/css">
.mozilla {
display:none;
}
</style>
<![endif]-->
<object
data="flashdatei.swf"
type="application/x-shockwave-flash"
height="275"
width="256"
class="mozilla">
<param name="autoplay" value="true">
</object>
<!--[if IE]>
<object
classid="cclsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="256"
height="275">
<param name="src" value=""flashdatei.swf">
</object>
<![endif]-->
你會(huì)發(fā)現(xiàn)其實(shí)就是把 embed 替換成了 object，而且位置也從 IE 的 object 中移出來了。embed 標(biāo)簽里的 src 屬性在 object 中變成了 data 屬性。而 firefox 等非 IE 瀏覽器因?yàn)椴徽J(rèn)識(shí) <!–[if IE]> 標(biāo)簽，所以其中的部分都當(dāng)作注釋忽略了。而 IE 因?yàn)閳?zhí)行了 <!–[if IE]> 中的內(nèi)容，所以 firefox 中可以識(shí)別的那個(gè) object 因?yàn)?css 被重新定義而被隱藏了。
好了，現(xiàn)在不但可以完美播放，而且可以通過 XHTML 驗(yàn)證了！太酷了！
參考文獻(xiàn)