Flash不同wmode属性及其问题

在浏览器上载入flash文件， 其中wmode参数一直都是很纠结的东西， 看到一篇文章， 转载记录一下

以下为转载。

原文地址：http://blog.loveisanan.com/?p=117

首先来看下wmode属性的值和含义：

Window模式

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被 flash刮掉一块一样显示异常。

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”会导致全屏模式失效。

Direct模式

直接渲染模式，在该模式下，flashplayer可以通过硬件直接对画面进行合成，并呈现在屏幕上。使用这种模式能够得到比window模式更好的渲染效果，特别是在视频播放方面，如果页面的flash需要使用了stagevideo或者stage3D，那么必须使用这种模式（貌似在mac  safari下即使window也能使用stagevideo）。它有比window模式更好的渲染，但也有window模式下的所有缺点。

GPU模式

Use additional hardware acceleration on some Internet-connected TVs and mobile devices. In contrast to other wmode values, pixel fidelity for display list graphics is not guaranteed. Otherwise, this value is similar to wmode=direct.

参考：http://kb2.adobe.com/cps/127/tn_12701.html

不同属性对swf展现的影响：

1、页面中DHTML元素遮挡问题

opaque和tranparent由于都是无窗口内渲染模式，能很好的实现各层的遮挡，和一般div元素没有太大区别，而window、direct模式在现在看来，是没有任何办法实现被DHTML元素完美遮挡的，其中一个比较折中的方法就是使用iframe。方法就是为要覆盖在flash元素上的div层准备一个空的iframe，当需要展现这个div时，将iframe移到flash元素的上方，并将大小、位置调整为div的大小和位置，然后通过设置position和z-index让div覆盖在iframe的上方，目前看到优酷、迅雷看看、乐视的播放页对顶部的导航栏有做这样的处理。其原理就是利用iframe在展现的时候（当页面滚动和其他操作时，会导致flash元素重新覆盖iframe @_@）可以覆盖在flash元素上。

2、画面渲染问题

opaque和transparent由于都是页面内渲染，因此在渲染效果上市不敌window和direct的，其中在opaque和transparent模式下播放视频，会出现明显的画面丢帧现象，表现就是画面给人一顿一顿的感觉，播放的视频越高清越明显，这也就是为什么window模式下会有遮挡问题，但是很多视频网站依然选择使用window的原因所在。direct模式显得有些鸡肋，因为除非flash中有使用到stagevideo和stage3d，否则这个模式带来的渲染效能不一定会比window好，甚至在一些机器上表现得更差。

3、sogou浏览器下视频播放问题

发现在sogou浏览器下，使用window渲染时，flash视频从非全屏切换到全屏，然后按esc退出全屏，如此频繁操作，会出现视频声音在播，但是视频画面不再变化，也就是说整个flash区域陷入了假死，不再渲染，但实际上flash还是在运行的情况。最后通过将window模式改为opaque解决，最终感叹，不是亲儿子果然是不惹人爱啊！

4、safari浏览器下两个flash元素重叠时问题

在safari浏览器下，使用window模式，当两个flash元素重叠，其中一个flash元素消失后，剩下的flash元素上的非重绘区域还会残留有已消失的flash元素最后重绘的与其重叠的部分，及相当于这连个flash元素在重叠的那一刻起，他们就是其一渲染重绘的了，当其中一个消失，而另外一个并没有去完全重绘重叠的区域，那么那部分没有被重绘的区域将不会刷新。这个问题通过使用opaque可以解决。

5、打开新窗被浏览器拦截问题

使用window模式时，无论采用何种策略都没法避免打开新窗时被浏览器拦截，但是在使用opaque模式时，却能有一个兼容的方案实现各浏览器下的新窗打开都不被拦截。