網頁完美内嵌多媒體,支援IE,Mozilla、Firefox、NetScape、Opera

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

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

* 完美内嵌 Windows Media

* 完美内嵌 RealPlayer (RealMedia)

* 完美内嵌 Quicktime

* 完美内嵌 Flash

* 讓内嵌多媒體通過 XHTML 驗證

完美内嵌 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。

實作代碼：

</object>

也可以用下面這段代碼：

</object>

要點分析：

這兩段代碼的差別主要是針對IE 的。這兩段代碼使用了兩個不同的 Media Player對象，第一個是 MediaPlayer.MediaPlayer，第二個是 WMPlayer.OCX。這兩個 ActiveX 對象都是針對 Internet Explorer 的，是以它們不影響 Firefox、Opera 等浏覽器。這兩個對象在IE上的顯示效果是不一樣的，第一個對象的顯示效果跟在 Windows 上的 Firefox、Opera 内的顯示效果是一樣的，而第二個對象在 IE上的顯示效果是采用 Windows Media Player 本身的皮膚效果，如果你安裝了 Windows Media Player 10，采用第二種寫法，你在IE上将會看到 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 上可以安裝暴風影音。

實作代碼：

</embed>

</object>

<br/>

</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 是

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 是

就說明你已經安裝好了 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及其浏覽器插件。

實作代碼：

</embed>

</object>

要點分析：

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

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

完美内嵌 Flash

用戶端要求：

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

實作代碼：

</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>

<!--[if IE]>

.mozilla {

display:none;

}

</style>

<![endif]-->

<object

data="myflash.swf"

type="application/x-shockwave-flash"

height="275"

width="256"

class="mozilla">

<paramname="autoplay" value="true">

</object>

<!--[if IE]>

<object

classid="cclsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

width="256"

height="275">

</object>

<![endif]-->

你會發現其實就是把 embed 替換成了 object，而且位置也從 IE 的 object 中移出來了。embed 标簽裡的 src 屬性在 object 中變成了 data 屬性。而 firefox 等非 IE 浏覽器因為不認識 <!–[if IE]> 标簽，是以其中的部分都當作注釋忽略了。而 IE 因為執行了 <!–[if IE]> 中的内容，是以 firefox 中可以識别的那個 object 因為 css 被重新定義而被隐藏了。

網頁完美内嵌多媒體,支援IE,Mozilla、Firefox、NetScape、Opera

繼續閱讀

Windows辦公技能——在目前檔案夾中打開指令行視窗

win10 在目前檔案夾快速打開cmd指令行

在目前位置打開指令行視窗的技巧

dos 指令集2---DOS 常用指令 (edit)

在DOS下運作不了ipconfig指令

《Windows CE大排檔》第一版勘誤表

程式設計高手：VC 6.0下利用消息實作内部程序通訊

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

Windows下使用GSL（GNU Scientific Library）

何為全棧工程師？你是否應該成為一名全棧工程師？

windows不能在本地計算機上運作oracleDbConsoleorcl

Windows下VS開發環境環境安裝工程項目設定關于Debug和Release的提示

IE8 CSS設定DIV居中，添加“margin:0 auto”

配置網頁内容通路

Windows下配置Apache的SSL服務

Mac｜Windows系統本地照片自動上傳到伺服器