使用embed標簽嵌入wmode解決網頁當中flash遮擋頁面元素的問題


  今天測試了編輯器兩種上傳視頻的方式,卻發現最終的頁面上視頻的顯示效果控制器部分不一樣。一個視頻是我在編輯器里邊通過上傳視頻方式上傳的,另一個是我在編輯器用插入視頻方式上傳的,具體顯示如下圖:

 

(上傳方式)flash控制器正常顯示:

(插入方式)flash控制器顯示錯亂的情況:

            

 

  接着我對比了下各自的源代碼發現兩者生成的標簽略有區別:

  上傳方式生成的源代碼:

1 <embed height="280" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="420" src="/viscms/r/cms/flvplayer.swf" srccopy="11" allowfullscreen="true" flashvars="vcastr_file=/web/201601/1.flv&amp;IsAutoPlay=1" quality="high"/>

 

  插入方式生成的源代碼:

1 <embed type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/viscms/r/cms/flvplayer.swf" flashvars="vcastr_file=/web/201601/2.flv&amp;IsAutoPlay=1" wmode="transparent" width="420" height="280" allowscriptaccess="never" allowfullscreen="true"/>

  最終發現有一個特殊標簽wmode="transparent" 使得兩者呈現的結果不一樣。

  於是乎,我百度了一下wmode這個屬性,具體有兩個參數:

  Opaque 模式 
      這是一種無窗口模式,在這種情況下flash player沒有自己的窗口句柄,這就需要瀏覽器需要告訴flash player在瀏覽器的渲染表面繪制的時間和位置。這時flash影片就不會在高於瀏覽器HTML渲染表面而是與其他元素一樣在同一個頁面上,因此你就可以使用z-index值來控制DHTML元素是遮蓋flash或者被遮蓋。 

  Transparent 模式 
      透明模式,在這種模式下flash player會將stage的背景色alpha值將為0並且只會繪制stage上真實可見的對象,同樣你也可以使用z-index來控制flash影片的深度值,但是與Opaque模式不同的是這樣做會降低flash影片的回放效果,而且在9.0.115之前的flash player版本設置wmode=”opaque”或”transparent”會導致全屏模式失效。 

 

  最終結論: "Opaque"和"Transparent"都可與 HTML 層交互,從而允許 SWF 文件上方的層遮蔽應用程序。這兩種選項之間的差異在於"Transparent"允許透明,因此,如果 SWF 文件的某一部分是透明的,則 SWF 文件下方的 HTML 層可以透過該部分顯示出來,而"opaque"則不會顯示。 


  所以,我將wmode="transparent" 改為wmode="Opaque"后視頻顯示正常

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM