html中flash视频层级一直比div层级高的解决办法

Joe  于  2015-08-21 15:42:06  发布至  编程相关  累计    次阅读

最近由于项目需求,在页面中需要放置一个网页播放器,这倒没什么,问题是页面的顶部导航是固定的,然后向上滚动的时候发现视频直接覆盖顶部导航栏,看着相当别扭,本来以为只要给这个视频一个z-index:9999;position:relative;就可以解决的,最后发现如何设置z-index都没用。

在网上搜索了一下相关资料,大部分都是说z-index,然而并卵,最终还是从视频播放器的属性入手,其中的flash网页视频播放器有个wmode属性:

wmode有三个属性

  • transparent:即把FLASH背景设成透明,在网页上就可以把FLASH放到图片或者文字之上。

  • opaque:设置成这个后FLASh可以被调整层深。

  • window:就是FLASH是单独的一层,和浏览的网页上的内容是不相干的,总是在所有东西的上面。

我们只要在类似下面这样的网页播放器代码中加上一行<param name="wmode" value="opaque">即可:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"
 height="400" width="920">  
 <param name="movie" value="/video/vcastr22.swf?vcastr_file=/video/jia.flv">
 <param name="quality" value="high">  
 <param name="allowFullScreen" value="true"> 
 <param name="wmode" value="opaque"> 
 <embed src="/video/vcastr22.swf?vcastr_file=/video/jia.flv" 
 quality="high"  pluginspage="http://www.macromedia.com/go/getflashplayer"  
 type="application/x-shockwave-flash" width="920" height="400"> 
</object>


上一篇:C#天猫、淘宝、阿里巴巴、京东商品图片抓取保存源码(图文详细产品图片保存)下一篇:jquery,js判断页面是否在微信浏览器中打开