【论坛引导】—— 6.3 帖子中的Flash无法正常显示播放？

TKCB

总目录：【论坛引导】—帮助新手了解论坛的使用，及Flash的学习指南


如果你不愿意看大段文字的帖子和文章文档。
如果你不愿意看【论坛引导】，除非你是高手和老司机
那么请停止学习，去买彩票吧！
这是你今生唯一的出路了。


6.3  帖子中的Flash无法正常显示播放？
别人的帖子中的Flash都可以播放，为什么我的就无法播放呢？
不知道大家有没有遇到这样的困扰，但我们是专业的Flash网站，怎么能让这种事情发生呢~~~
于是我们的技术支持大神们找到了解决方案。

写在最前面：相信技术的力量，我们很专业！

一、Flash wmode 属性（SWF 显示模式）
先来点专业知识吧！我们就是专业的技术团队。

Flash SWF在网页中嵌入的时候有多种不同的显示模式，而这些显示模式决定了Flash SWF以什么样的方式展示出来。

基本上如果你的SWF插入是显示异常（无法点击、提示错误等等），那都是显示模式没有设置好造成的。

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.
简单翻译下吧，其实这个模式主要针对的是使用硬件加速的情况，比如：使用了Stage3D、Starling的功能。

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

二、不同 wmode 属性对 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模式时，却能有一个兼容的方案实现各浏览器下的新窗打开都不被拦截。

参考：http://blog.loveisanan.com/2011/12/28/flash不同wmode属性分析/

三、我们论坛帖子中外链 Flash SWF，如何做？
外链很简单，点击帖子编辑器中的Flash图标，然后填入网页地址，填写宽度和高度。核心来了，就是设置好对应的显示模式，默认的使用 Window 模式。
如果你的SWF无法显示出来，那么请尝试其他模式，也不多，就那几个而已，当然你最好是知道应该使用那个模式。

帖子中代码插入如下：

[Actionscript3] 纯文本查看 复制代码

// Window 模式
[media=swf,800,600,window]http://www.tkcb.cc/tkcb/test.swf[/media]

// Opaque 模式
[media=swf,800,600,opaque]http://www.tkcb.cc/tkcb/test.swf[/media]

// Transparent 模式
[media=swf,800,600,transparent]http://www.tkcb.cc/tkcb/test.swf[/media]

// Direct 模式
[media=swf,800,600,direct]http://www.tkcb.cc/tkcb/test.swf[/media]

// GPU模式
[media=swf,800,600,gpu]http://www.tkcb.cc/tkcb/test.swf[/media]

四、我们论坛帖子中内置附件 Flash SWF，该怎么办？
内置也不难，点击帖子编辑器中的附件图标，上传一个SWF附件，之后点击“影片播放按钮”那个图标插入Flash SWF字段。核心来了，在插入的SWF字段的宽度和高度的后面，插入英文逗号，然后输入你要设置的模式的英文字母即可。
如果你的SWF无法显示出来，那么请尝试其他模式，也不多，就那几个而已，当然你最好是知道应该使用那个模式。
可选择的模式有（5种）：window、opaque、transparent、direct、gpu


帖子中代码插入如下：

[Actionscript3] 纯文本查看 复制代码

// Window 模式
[media=swf,800,600,window]attach://424.swf[/media]

// Opaque 模式
[media=swf,800,600,opaque]attach://424.swf[/media]

// Transparent 模式
[media=swf,800,600,transparent]attach://424.swf[/media]

// Direct 模式
[media=swf,800,600,direct]attach://424.swf[/media]

// GPU模式
[media=swf,800,600,gpu]attach://424.swf[/media]

五、不难的吧，快去试试
遇到问题记得看新手引导哦，这里面可是有大量高质量的指引的，就像先知的指引一样精妙。


最后送大家一句话：先付报酬的工作是肯定干不好的。 —— 约·弗洛里奥

lanzhifen

好贴，顶一下

最后一批aser

刚刚测试了一下，不错

jwn4770841

学习了。。。。。

天一方

啦啦啦啦啦啦

亿云数据小罗

银子速度来

亿云数据小罗

新手，不明白说的什么

zhuxuebing

学习中。。。。

听雨轩

学习了

icedust

这个，先学习一下，看有啥知识点的遗漏没？