網頁內嵌多媒體 IE,Mozilla、Firefox、NetScape、Opera

來源：http://www.phpchina.com/54842/viewspace_31724.html

如果你不總是用Windows上的InternetExplorer 來上網的話，你可能會注意到，許多網站上的視頻點播之類的多媒體內容，你無法直接在 Internet Explorer 以外的其它瀏覽器中觀看，比如明明已經安裝了插件卻提示缺少插件，或者什麼都不提示出現空的框框，或者顯示了播放器插件卻始終連不上打不開之類的問題，而在 Internet Explorer 上卻能夠正確的打開並播放。顯然這不是由於網絡不通或者媒體不存在造成的，而是由於網頁內的代碼有問題。你可能覺得這無關緊要，因爲你已經習慣用 Internet Explorer 來瀏覽它們了；也可能你曾爲此而頭疼，如果你是一個Linux用戶。可是不管怎麼樣，如果能在所有操作系統平臺的所有瀏覽器上都能正常播放這些多媒體內容，總是一件好的事情。本文就是來解決這些問題的。

本文將介紹如何在網頁中內嵌 Windows Media、RealPlayer、Quicktime 和 Flash 的完美方法。這些方法適用於 Windows、Linux、Mac OS X 等操作系統平臺上的 Internet Explorer、Mozilla、Firefox、NetScape、Opera 等多種瀏覽器。

完美內嵌 Windows Media

客戶端要求：

對於 Windows 用戶，需要安裝 Windows Media Player 7 以上的版本，Windows Media Player 6 不支持 WMV/WMA，推薦安裝Windows Media Player 10。對於非 Internet Explorer 用戶，還需要安裝Windows Media Player Plug-in for Netscape Navigator。

對於 Mac OS X 用戶，需要Windows Media Player 9 for Mac OS X，對於 Mac OS 8.1-9x，需要安裝Windows Media Player 7.1 for for Mac OS 8.1-9x。

對於 Linux 以及FreeBSD、Solaris 等 Unix 系統用戶，需要VLC media player及其瀏覽器插件或者MPlayer及其瀏覽器插件。VLC media player 0.80 及其以上的版本支持 WMV/WMA。

實現代碼：

<objectwidth="420"height="360"classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<paramname="filename"value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf"/>
<embedwidth="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>

也可以用下面這段代碼：

<objectwidth="420"height="360"classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<paramname="url"value="http://vod.ujn.edu.cn/movies%2Fasf%2F%B6%AC%CC%EC%C1%B5%B8%E8%2Easf"/>
<embedwidth="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>

要點分析：

這兩段代碼的區別主要是針對 Internet Explorer 的。這兩段代碼使用了兩個不同的 Media Player對象，第一個是 MediaPlayer.MediaPlayer，第二個是 WMPlayer.OCX。這兩個 ActiveX 對象都是針對 Internet Explorer 的，因此它們不影響 Firefox、Opera 等瀏覽器。這兩個對象在 Internet Explorer 上的顯示效果是不一樣的，第一個對象的顯示效果跟在 Windows 上的 Firefox、Opera 內的顯示效果是一樣的，而第二個對象在 Internet Explorer 上的顯示效果是採用 Windows Media Player 本身的皮膚效果，如果你安裝了 Windows Media Player 10，採用第二種寫法，你在 Internet Explorer 上將會看到 Windows Media Player 10 那種晶瑩剔透的皮膚效果。

Firefox 不支持 object 中 classid 屬性，只支持 type 屬性，而如果發現 object 有 classid 屬性以後，它將不理會 object，而只執行 embed。而對於 Opera 則很有趣，它既支持 object，又支持 embed，但是因爲 embed 是嵌入到 object 中的，如果它能正確識別 object，它就不再理會 embed，如果它不能識別 object，則執行 embed。因此它不會顯示兩個播放器。至少我是用的 8.5 版的 Opera 是這樣的。而 Internet Explorer 則只識別 object 中的 classid 屬性。因此在 object 中，我們不需要指定 type 屬性。

對於 embed 標籤，我們指定它的 type 爲 application/x-mplayer2，在安裝了 Windows Media Player 的系統上，它對應於所有 Windows Media Player 能識別的類型，因此你可以任意指定 asf，asx，wmv，wma，avi，mp3 等類型的媒體，而在沒有 Windows Media Player，卻安裝了 VLC media player（或 MPlayer）的系統上，它對應於所有 VLC media player（或 MPlayer）能識別的類型，Windows Media Player 支持的媒體類型 VLC media player（或 MPlayer）均能支持，甚至 VLC media player（或 MPlayer）支持的媒體類型比 Windows Media Player 更多，因此上面這種寫法是完全支持多平臺多瀏覽器的。

對於上面兩個不同的 ojbect，指定播放文件的參數是不一樣，第一個是用 filename 來指定，第二個是用 url 來指定。而 embed 中指定播放文件的參數是 src，雖然用 filename 也可以，但是 src 更標準一些。

embed 中的文件名必須是完整的 url 路徑，否則 VLC media player 不能正確識別，另外要對文件路徑進行 url 編碼，否則如果文件路徑中如果有中文或者其他非英文文字的話，在非 Internet Explorer 瀏覽器中也無法正確識別。不要對 “協議://域名/” 部分進行 url 編碼，否則所有的瀏覽器都不能識別。呵呵。

對文件路徑進行 url 編碼，在php中可以使用 rawurlencode 函數，在 asp 中可以使用 Server.URLencode 函數。

完美內嵌 RealPlayer (RealMedia)

客戶端要求：

對於 Windows，Linux 和 Mac OS X，可以安裝 Realplayer 播放器及其瀏覽器插件，也可以安裝帶有 RealPlayer 解碼器及其瀏覽器插件的其他播放器，例如 Windows 上可以安裝暴風影音。

實現代碼：

<objectclassid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"width="420"height="310">
   <paramname="src"value="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm"/>
   <paramname="controls"value="Imagewindow"/>
   <paramname="console"value="clip1"/>
   <paramname="autostart"value="true"/>
   <embedsrc="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/>
<objectclassid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"width="420"height="44">
   <paramname="src"value="link.php?link=rtsp%3A%2F%2Fvod%2Eujn%2Eedu%2Ecn%2F%D0%C2%D4%FA%CA%A6%C3%C3%2F1%2Erm"/>
   <paramname="controls"value="ControlPanel"/>
   <paramname="console"value="clip1"/>
   <paramname="autostart"value="true"/>
   <embedsrc="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']);
?>

要點分析：

上面的代碼實現了的效果是在任何安裝了 realplayer 插件的瀏覽器上，都可以看到一個播放窗口和一個播放控制欄，並且媒體被自動加載播放。對於 object 一段，這裏就不做詳細解釋了，因爲它是針對 Internet Explorer 的，相信大部分寫過這種代碼的人都能看得懂。我們重點來說一下 embed 一段，它是針對 Firefox 和 Opera 等瀏覽器的。

大部分人在使用 Firefox 和 Opera 時經常會遇到一個問題，就是安裝了 RealPlayer 及其瀏覽器插件以後，仍然不能觀看嵌入到網頁中的 rm 或 rmvb 流媒體，提示找不到插件，或者顯示空白，或者顯示了內嵌的播放器卻不能播放，這是什麼原因造成的呢？

如果你在 Firefox 和 Opera 的地址欄中鍵入：about:plugins ，可以看到你所安裝的所有插件。不管你的系統裏是否安裝的是真的 RealPlayer 播放器，只要你看到下面的內容，

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 是

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 是

MIME 類型	描述	後綴	已啓用
audio/x-pn-realaudio-plugin	RealPlayer Plugin Metafile	rpm	是

就說明你已經安裝好了 RealPlayer 的插件。不能夠播放的原因就是他沒有像我上面那樣寫代碼。

從上面的插件信息裏我們可以看到，RealPlayer 插件只提供了一種 rpm 格式的媒體類型可以播放，而其他諸如 rm，rmvb 等類型卻好像沒有提供支持。是這樣嗎？可以說是也可以說不是。

比如你如果在 embed 裏指定 type 爲 audio/x-pn-realaudio 類型，這個是正確的 mime 類型，但是你會發現你的瀏覽器將不能播放，而會讓你安裝插件，即使你已經安裝了 RealPlayer 插件。因爲 RealPlayer 插件不能識別這種正確的 mime 類型。

於是有的人認爲只要指定 type 爲 audio/x-pn-realaudio-plugin，然後後面直接指定 rm 或者 rmvb 等 RealPlayer 媒體類型的文件就可以了。是這樣嗎？也不是。這樣做的話，你可以看到內嵌的播放器，但是你會發現播放器始終無法連接到服務器並播放你所指定的媒體。因爲你所指定的類型並不是 audio/x-pn-realaudio-plugin 所對應的類型。

於是有人說 RealNetworks 已經將非 IE 的瀏覽器給放棄了，其實這樣說是不對的。雖然存在上面的種種情況，但那是因爲那些編寫網頁代碼的人沒有理解 RealNetworks 的真正意圖， RealNetworks 不但沒有放棄在非 IE 瀏覽器中嵌入 RealMedia，反而是提供了一種通用的方式，讓你可以所有瀏覽器中都能內嵌播放所有的 RealMedia。因爲我的代碼就能夠如我所說的這樣工作。

首先我們必須要先知道一件事情，那就是 rpm 是一種什麼文件。從上面 Linux 上的插件的信息中我們可以得知，它是 RealPlayer 插件元文件（RealPlayer Plugin Metafile）。因此它不是媒體內容文件，更不是紅帽的安裝包文件。它裏面的內容是實際媒體的位置信息（url）。這樣我們就很容易理解 RealNetworks 爲什麼要這樣做了，因爲這樣只要指定一種 type，就能夠播放所有的 Real 媒體了。這不是很方便嗎？

在這裏需要注意的一點是，embed 的 src 屬性裏指定的路徑不需要是完整的 url，相對路徑就可以了，而且也不一定是 rpm 後綴的文件，因此上面的代碼中，src 中指定的是一個程序 link.php，而這個程序的結果就是一個 rpm 格式的文件，因此它能夠被正確的播放。這個 link 程序很簡單，它只是把傳入的參數 link 以文件內容的形式返回就行了。

雖然 embed 的 src 屬性不需要完整的 url，但是 link.php 的參數 link 是需要實際媒體的完整 url 的，並且參數 link 要以 url 編碼形式進行編碼，否則 RealPlayer 插件不能夠識別帶有非英文的路徑。但是返回的 rpm 文件內容中的 url 無需編碼了，RealPlayer 能夠識別 rpm 文件內容中的非英文編碼的路徑，如果你實在不放心，也可以對它進行 url 編碼，但是仍然不要對 “協議://域名/” 部分進行 url 編碼，否則 RealPlayer 插件就不能識別了。

PHP 程序中的 $_GET 中的變量，如果 php 配置文件中 magic_quotes_gpc 設爲 true 的話（默認配置），它會對某些特殊字符加上反斜槓，這樣做是爲了避免數據庫注入漏洞，但這裏我們不寫數據庫，因此這裏我們需要根據 magic_quotes_gpc 的狀態來判斷是否去掉多出來的反斜槓。否則輸出的文件內容可能是錯誤的。

如果用 ASP，則不需這麼麻煩，只需要一行代碼就搞定了：

<%=Request("link")%>

完美內嵌 Quicktime

客戶端要求：

對於 Windows 用戶和 Mac OS X 用戶，安裝相應版本的 QuickTime 播放器即可。Windows 版下載QuickTimeinstaller.exe，Mac OS X 版下載QuickTimeinstaller.exe

Windows 用戶也可以安裝暴風影音等帶有 QuickTime 解碼器和瀏覽器插件的其他播放器，例如暴風影音。

對於 Linux 以及 FreeBSD、Solaris 等 Unix 系統用戶，需要VLC media player及其瀏覽器插件或者MPlayer及其瀏覽器插件。

實現代碼：

<objectclassid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"codebase="http://www.apple.com/qtactivex/qtplugin.cab"width="420"height="360">
   <paramname="autoplay"value="true"/>
   <paramname="src"value="mov%2F%B2%E2%CA%D4%2Emov"/>
   <embedsrc="mov%2F%B2%E2%CA%D4%2Emov"type="video/quicktime"autoplay="true"width="420"height="360">
   </embed>
</object>

要點分析：

QuickTime 格式的內嵌比較簡單，像上面那樣寫就可以了，基本上沒有什麼要注意的地方。媒體路徑 src 的值，可以是完整地址，也可以是相對地址，可以用 url 編碼，也可以不編碼，QuickTime 插件和 VLC 插件都能正確的支持，當然爲了保險起見，最好還是採用 url 編碼方式裏寫媒體路徑。

雖然 embed 中指定的是 video/quicktime 類型，但是即使鏈接的媒體是 mp3 仍然能播放。對於 QuickTime 支持的其他類型的沒有進行測試，但我想應該也是可以的。

完美內嵌 Flash

客戶端要求：

安裝你所使用的瀏覽器的 Flash 插件。

實現代碼：

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="420"height="320">
   <paramname="movie"value="flash/打電話記.swf"/>
   <paramname="quality"value="high"/>
   <embedsrc="flash/打電話記.swf"quality="high"type="application/x-shockwave-flash"width="420"height="320"></embed>
</object>

要點分析：

對於 Flash 似乎沒什麼好說的，因爲這個用的很普遍。在這裏寫下來只是爲了查閱方便，算是湊數吧。呵呵。

讓內嵌多媒體通過 XHTML 驗證

問題：

上面的所有的代碼，雖然能夠完美的在各個瀏覽器上很好的播放了，但是還有一點美中不足，那就是這樣的頁面無法通過 XHTML 驗證。原因是 embed 標籤從來都不是HTML標準中的標籤，因此 XHTML 中也沒有它。

解決：

如果你不在乎你的網頁是否符合標準，那照上面那樣做就可以了。如果你還想追求更加完美，請看下面的解決方案：

下面以 flash 爲例來介紹，方法同樣適用於其他類型的多媒體內容。

我們知道 W3C 推薦使用的是 object 標籤，但用法卻不是 Internet Explorer 那種用 classid 來區分控件類型，而是採用 type 來指定 MIME 類型。現在的 Mozilla、Firefox 和 Opera 都支持這種用法，雖然 IE 目前的版本也支持這種用法，不過很可惜的是，IE 還是有 bug，那就是隻有全部下載完畢才能播放。而且還不是所有的情況下都能用。在某些 IE 瀏覽器上還顯示空白。所以單純用 W3C 推薦的 object 標籤用法還是不夠的。但是我們可以作一下變通，如果是用戶瀏覽器是 IE 的話，我們就用 IE 的 object 的用法，如果是其他瀏覽器，我們就採用 W3C 的用法。這樣就可以兩全其美了。也許此刻，你覺得我們該用到腳本了。不，我們不需要腳本。我們只需要用 IE 所特有的條件註釋和CSS就可以做到了。例子如下：

<styletype="text/css">
.mozilla {
display:block;
}
</style>


<object
data="flashdatei.swf"
type="application/x-shockwave-flash"
height="275"
width="256"
class="mozilla">
<paramname="autoplay"value="true">
</object>

你會發現其實就是把 embed 替換成了 object，而且位置也從 IE 的 object 中移出來了。embed 標籤裏的 src 屬性在 object 中變成了 data 屬性。而 firefox 等非 IE 瀏覽器因爲不認識 <!–[if IE]> 標籤，所以其中的部分都當作註釋忽略了。而 IE 因爲執行了 <!–[if IE]> 中的內容，所以 firefox 中可以識別的那個 object 因爲 css 被重新定義而被隱藏了。

yjfkpyu

發佈了25 篇原創文章 · 獲贊 0 · 訪問量 15萬+

私信關注

網頁內嵌多媒體 IE,Mozilla、Firefox、NetScape、Opera

完美內嵌 Windows Media

客戶端要求：

實現代碼：

要點分析：

完美內嵌 RealPlayer (RealMedia)

客戶端要求：

實現代碼：

link.php

要點分析：

Windows

Linux

完美內嵌 Quicktime

客戶端要求：

實現代碼：

要點分析：

完美內嵌 Flash

客戶端要求：

實現代碼：

要點分析：

讓內嵌多媒體通過 XHTML 驗證

問題：

解決：

Wireshark 安裝+使用（一）

Firefox關聯mplayer打開mms的方法

正則表達式30分鐘入門教程

網頁內嵌多媒體 IE,Mozilla、Firefox、NetScape、Opera

常用正則表達式

如何讓firefox或gtkmozembed支持視頻播放

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結