今天測試了編輯器兩種上傳視頻的方式,卻發現最終的頁面上視頻的顯示效果控制器部分不一樣。一個視頻是我在編輯器里邊通過上傳視頻方式上傳的,另一個是我在編輯器用插入視頻方式上傳的,具體顯示如下圖:
(上傳方式)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&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&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"后視頻顯示正常