关于网页中Flash Player的wmode属性的使用经验

首先引用一篇关于flash wmode参数详解的文章：http://www.blueidea.com/tech/web/2009/6469.asp

 

在做web开发中可能会遇到flash遮挡页面中元素的情况，无论怎么设置flash容器和层的深度(z-index)也无济于事，现有的解决方案是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”，但wmode属性到底是什么意义，为什么可以解决这个问题呢？ window mode(wmode) wmode即窗口模式总共有三种，看看当年Macromedia官方的说法： Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance. Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don’t need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through. Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value. 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”会导致全屏模式失效。 了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。

 

在项目中设置了wmode="transparent"，没注意到会出现什么问题。有次客户提出来说使用智能ABC和五笔输入法无法在文本框中输入，后来查资料并测试发现确实是由于设置wmode属性的问题，引用另一篇关于flash不能输入文字的文章：http://hi.baidu.com/jackflit/blog/item/90f31b1984aae24242a9ad79.html

临时凑合的办法：设置wmode为Windows 这个问题主要出现在当flash设置了wmode属性之后，在上述非主流非IE内核的浏览器中便无法输入中文。究其原因是因为Flash这种模式很 少用到，这是一种无窗口模式，绘制和输入取决于浏览器，这种模式对于Flash来说，绘制效率比较低，但是可以作为HTML的层来使用，并支持透明，因此 在国内还是挺常用的。在天书中使用这个，主要是为了支持鼠标右键。 由于这种模式Flash控件接收的输入来自浏览器，因此需要浏览器对Flash的wmode特殊处理。 很不幸的是，除了IE对Flash ActiveX的wmode下的透明绘制和中文输入处理的很完美，别的浏览器都支持的很差。有的甚至连透明都绘制成一片黑色，就一个简单的IME输入，都 懒得解决。比如Firefox论坛上，这个问题从若干年前就被人发现了，一直无人修改，不光中文，所有依赖于IME的输入都不行，包括欧洲一些国家的输入 法。 天书用过两个解决方案 1. 页面上放置一个html的textfield，AS封装一个TextField，通过AS和JS通讯，在需要输入的时候把这个输入框挪过去。 优点：支持各种输入法，支持输入框右键 缺点：不够优雅，AS和JS互通迅，JS加载失败则没戏 2. 实现一个带中文输入法的TextField，用这个框替代所有的TextField 优点：干净优雅，不容易出错，兼容性好 缺点：只支持自己实现的输入法，易用性差

 

我在测试的时候发现，设置了wmode属性为transparent后，IE8浏览器下，智能ABC不能输入到文本框中，在IE6和IE9就却可以（也有个同事再IE8下没有问题，不了解什么原因）；在火狐浏览器下，中文输入特别卡，要等待好几秒才能把文字输入进去，看样确实是在无窗口模式下flash的绘制效率比较低。在此感谢上文的作者提供的问题原因及解决思路。