視頻直播 object 標簽屬性詳解

最近在做視頻直播這一塊的，html5的video不能實現此功能，在網上查找了資料，覺得很有用。

一、介紹： 
我們要在網頁中正常顯示flash內容，那么頁面中必須要有指定flash路徑的標簽。也就是OBJECT和EMBED標簽。OBJECT標簽是用於windows平台的IE瀏覽器的，而EMBED是用於windows和Macintosh平台下的Netscape Navigator瀏覽器以及Macintosh平台下的IE瀏覽器。windows平台的IE利用Activex控件來播放flash而其它的瀏覽器則使用Netscape插件技術來播放flash。 

下面是簡單的網頁中插入flash的代碼示例： 

Code:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
WIDTH="550" HEIGHT="400" id="myMovieName"> 
<PARAM NAME=movie VALUE="myFlashMovie.swf"> 
<PARAM NAME=quality VALUE=high> 
<PARAM NAME=bgcolor VALUE=#FFFFFF> 
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" 
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/Go/getflashplayer"> 
</EMBED> 
</OBJECT>

二、為什么要使用以上全部的標簽？能省略某些標簽不？ 

  OBJECT標簽是用於windows IE3.0及以后瀏覽器或者其它支持Activex控件的瀏覽器。“classid”和“codebase”屬性必須要精確地按上例所示的寫法寫，它們告訴瀏覽器自動下載flash player的地址。如果你沒有安裝過flash player 那么IE3.0以后的瀏覽器會跳出一個提示框訪問是否要自動安裝flash player。當然，如果你不想讓那些沒有安裝flash player的用戶自動下載播放器，或許你可以省略掉這些代碼。 
  EMBED標簽是用於Netscape Navigator2.0及以后的瀏覽器或其它支持Netscape插件的瀏覽器。“pluginspage”屬性告訴瀏覽器下載flash player的地址，如果還沒有安裝flash player的話，用戶安裝完后需要重啟瀏覽器才能正常使用。 
  為了確保大多數瀏覽器能正常顯示flash，你需要把EMBED標簽嵌套放在OBJECT標簽內，就如上面代碼例子一樣。支持Activex控件的瀏覽器將會忽略OBJECT標簽內的EMBED標簽。Netscape和使用插件的IE瀏覽器將只讀取EMBED標簽而不會識別OBJECT標簽。也就是說，如果你省略了EMBED標簽，那firefox就不能識別你的flash了（不過納悶的是，省略了object只寫embed，IE也能正常顯示flash，呵呵，具體的再仔細看看了）。
本文列出了用於發布影片的OBJECT和EMBED標簽的必要以及可選屬性。 

一、必需屬性： 
  ·CLASSID-設置瀏覽器的Activex控件，僅用於OBJECT標簽。 
  ·CODEBASE-設置flash Activex控件的位置，因而如果瀏覽器如果沒有安裝的話，可以自動下載安裝。僅用於OBJECT標簽。 
  ·WIDTH-以百分比或象素指定flash影片的寬度。 
  ·HEIGHT-以百分比或象素指定flash影片的高度。 
  ·SRC-指定影片的下載地址。僅用於EMBED標簽。 
  ·PLUGINSPAGE-設置flash 插件的位置，因而如果瀏覽器如果沒有安裝的話，可以自動下載安裝。僅用於EMBED標簽。 
  ·MOVIE-指定影片的下載地址。僅用於OBJECT標簽。 

二、可選屬性及可用的值： 
  ·ID-設定變量名，用於腳本代碼的引用。僅用於OBJECT。 
  ·NAME -設定變量名，用於腳本代碼（如JavaScript）的引用。僅用於EMBED。 
  ·SWLIVECONNECT - （true或false）指定當flash player第一次下載時，是否啟用Java。如果些屬性省略，默認值為false。你果你在相同頁同使用javascript和flash，java必須使用FSCommand來工作。 
  ·PLAY -（true或false）指定flash影片是否在下載完成后就自動播放，如果省略此屬性，則默認為true。 
  ·LOOP - （true或false）指定影片播放完最后一幀后是停止還是繼續循環播放，如果省略此屬性，則默認為true。 
  ·MENU - （true或false） 
  ·True 顯示全部的菜單，允許用戶放大，縮小等控制影片播放等操作。 
  ·False 顯示只包含設置選項和關於flash的菜單。 
  ·QUALITY - (low, high, autolow, autohigh, best ) 
  ·Low 速度優於美觀，而且不應用反鋸齒。 
  ·Autolow 剛開始着重於速度，但當需要時隨時提升美觀。 
  ·Autohigh 同時着重播放速度和美觀，但需要時則犧牲美觀來保證播放速度。 
  ·Medium 應用一些反鋸齒而不平滑位圖。它質量高於low設置而低於high設置。 
  ·High 美觀優於播放速度，而且一直應用反鋸齒。如果影片不包含動畫，位圖會被平滑化;而如果影片包含動畫，位圖將不變平滑。 
  ·Best 提供最好的顯示質量而不考慮播放速度。所有輸出都應用反鋸齒及所有位圖都被平滑化。 
  ·SCALE - (showall, noborder, exactfit) 
  ·Default(Show all)影片在指定的區域內顯示，但保持原始的比例。影片兩側將會出現邊框。 
  ·No Boder 收縮影片以適合指定的區域，保持影片不失真，但部分影片將可能將裁切。然而保持影片的原始比例。 
  ·Exact Fit 使整個影片在指定的區域內顯示，影片有可能變形失真，而且不保持原始的比例。 
  ·ALIGN - (l, t, r, b) 
  ·默認為居中，當瀏覽器窗口小於影片時，邊緣會被裁切。 
  ·Left,Right,Top,Bottom按照相應的設置沿瀏覽器的邊緣對齊。如果需要，另外三邊將被裁切。 
  ·SALIGN - (l, t, r, b, tl, tr, bl, br) 
  ·L,R,T,B 
  ·TL,TR 
  ·BL,BR 
  ·WMODE- (window, opaque, transparent) 設置flash影片的window mode屬性，指定flash在瀏覽器中的透明，層疊及位置。 
  ·Window 影片在瀏覽器中自己的矩形窗口內播放。 
  ·Opaque 影片隱藏了所有在它后面的內容。 
  ·Transparent 使flash影片透明，顯示透明影片后面的網頁內容。這將會降低動畫的性能。而且這個屬性不是在所有瀏覽器中都可用的。 
  ·BGCOLOR - （#RRGGBB, 十六進制RGB值。）指定影片的背景顏色。使用這個屬性覆蓋flash中設定的背景顏色。 
  ·BASE - 設定基准目錄或URL，用來解決所以flash中的相對路徑。類似網頁中的<base>標簽。 
  ·FLASHVARS 傳遞變量到flash player，需要flash player6及以后的版本。 
  ·傳遞root級變量到影片。字符串的格式是用“&”分隔的name=value集。 
  ·瀏覽器支持64kB大小的字符串長度。 
  ·更多關於FlashVars的信息，請查看相關文檔。

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
WIDTH="550" HEIGHT="400" id="myMovieName"> 
<PARAM NAME=movie VALUE="myFlashMovie.swf"> 
<PARAM NAME=quality VALUE=high> 
<PARAM NAME=bgcolor VALUE=#FFFFFF> 
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" 
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/Go/getflashplayer"> 
</EMBED> 
</OBJECT>





<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
WIDTH="550" HEIGHT="400" id="myMovieName"> 
<PARAM NAME=movie VALUE="myFlashMovie.swf"> 
<PARAM NAME=quality VALUE=high> 
<PARAM NAME=bgcolor VALUE=#FFFFFF> 
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" 
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" 
PLUGINSPAGE="http://www.macromedia.com/Go/getflashplayer"> 
</EMBED> 
</OBJECT>

三、我的案例

<div class="test">
 
<!--[if IE]>
   <object type='application/x-vlc-plugin' id='vlc' events='True'
       classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="100%" height="100%">
          <param name='mrl' value='rtsp://192.168.2.110:18810//unicast' />
          <param name='volume' value='50' />
          <param name='autoplay' value='true' />
          <param name='loop' value='false' />
          <param name='fullscreen' value='true' />
          <param value="transparent" name="wmode">
          <param name='fullscreen' value='http://blog.csdn.net/WUAINIFU/article/details/false'/>
    </object>
<![endif]-->
 
<!--[if !IE]><!-->
 
    <object type='application/x-vlc-plugin' id='vlc' events='True' width="100%" height="100%" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
 
        <param name='mrl' value='rtsp://192.168.2.110:18810/unicast' />
 
        <param name='volume' value='50' />
 
        <param name='autoplay' value='true' />
 
        <param name='loop' value='false' />
 
        <param name='fullscreen' value='true' />
 
        <param value="transparent" name="wmode">
 
    </object>
 
<!--<![endif]-->
 
</div>  

 

另外補充幾點我遇到的一些問題以及解決方法:

1. 視頻大小自適應問題，視頻的寬度我們設的為100%，高度則采用js來控制的，我的視屏是16:9的比例，代碼如下：

<script type="text/javascript">
 
//設置視頻播放器外部盒子高度
 
function setHeight() {
 
var $width1 = $(".test").width();
 
var $height1 = $width1 * 0.5625;
 
$(".video-list:nth-child(1) .test object").height($height1);
 
} 
 
$(window).load(function(){
 
    setHeight();
 
})
 
/*監聽窗口大小改變事件*/
 
$(window).resize(function(){
 
    setHeight();
 
})
 
</script>

2. 視頻位於頁面的最上層，會遮蓋彈出層之類的，無論怎么設index都無效，解決的方法是：用iframe來解決。