天天看點

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

來源:http://iezz.cn

如果你不總是用 Windows 上的Internet Explorer 來上網的話,你可能會注意到,許多網站上的視訊點播之類的多媒體内容,你無法直接在 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
  • 完美内嵌 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 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 >

要點分析:

這兩段代碼的差別主要是針對 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 上可以安裝暴風影音。

實作代碼:

< 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 ' ]) ;

?>

要點分析:

上面的代碼實作了的效果是在任何安裝了 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 " )% >

繼續閱讀