2011-08-12 110 views
1

我在我的网站上有一些第三方Flash SWF,大小可达100KB。例如Flash视频播放器“JWPlayer”SWF为98KB。如何在Flash SWF加载时显示预览图像?

这没什么人用宽带,但对于缓慢的拨号带宽游客不是那么好。例如在40千比特/秒时,我们正在说20秒来下载。

的问题是,在连接速度慢,所有的观众看到的是一个静态的白色屏幕,因此可以关闭以为它已经死了的页面。如果我右键单击SWF所在的区域,则Adobe Flash Player对象占用了该空间,但第三方SWF尚未完成加载。

我想网站访问者看到加载微调GIF或类似的东西。

不幸的是,第三方SWF都没有“preloader”元素。而且它们不是开源的,所以我不能为它们添加预加载器。

所以,我的问题是...

有没有办法显示加载图像,prefereably一个GIF动画,而SWF加载?

例如,有没有什么办法来迫使Adobe Flash Player才能显示图像它加载的SWF会吗?

我没有任何Flash编码技巧,因此一个解决方案不包括在SWF中创建额外的SWF或SWF,对我来说可能不是最好的,但可能值得添加到该帖子中如果其他人有类似的问题。

我使用SWFObject 2.2嵌入的主权财富基金,使一个解决方案,这需要考虑或者至少不打破,这将有助于。

非常感谢您花时间阅读我的文章,即使您无法提供帮助。

戴夫

+0

我想过使用jQuery在Flash对象的前面使用CSS的z-index添加的图像,然后使用swfobject的callbackFunction参数删除它一旦SWF已加载。过去我曾经做过这样的工作,在SWF前放置一个Logo。但是,这涉及到使用Flash对象的“wmode”参数,并且存在可能或可能未解决的有关Flash和wmode参数的问题。我不记得这个问题是否与Flash版本或什么浏览器有关,但这足以阻止我使用这种方法。 – David

回答

0

最后我们决定去混合设置:

对于具有低带宽的用户,我们将闪光参数WMODE为“透明的”,并设置GIF是背景图像(如果没有加载调整器,这些低带宽用户认为该页面无所事事)。

但是,使用wmode = transparent会产生负面影响,因为Flash不会使用硬件加速。但对于我们的低带宽用户来说,我们的视频足够低,在大多数情况下,他们并不需要硬件加速。

对于高带宽用户,我们提供更高比特率的视频,所以硬件加速变得更加重要。对于这些用户,我们使用wmode = direct,并且无需加载微调器GIF,因为无论如何SWF加载速度足够快。

由于我们的SWF文件及其XML文件的大小也必须加载,所以我们限制了1兆带宽,如果用户有更高的带宽,我们不使用加载图形和签证反之亦然。其他人可能会发现更适合的其他级别。

如果可能的话,我们希望能够将带宽限制降低很多,就像在旧PC上一样,我们可以使用一些384 kbit/s的Harware Acceleration,但删除用户的加载微调器如果像这样的低带宽将意味着他们等待时间过长,屏幕上没有什么让人开心的事情,这比在视频播放过程中丢失几帧更糟糕。

以下是Adobe对各种wmode的描述以及不同浏览器如何处理它们的链接。

http://kb2.adobe.com/cps/127/tn_12701.html#main_BrowserSupportForWmodes

希望这有助于别人一天。

戴夫

0

不知道你使用的第三方主权财富基金也可能是艰难的,但这里有一些事情要考虑:

一个办法是隐藏SWF(或的div swf在里面)直到它被加载,然后在它完成后显示它。同时,您可以让微调器/加载图像坐在它的位置。也就是说,你真正需要的是一个JavaScript函数,一旦加载完成就会被调用。一旦发生这种情况,您可以分别使用jQuery到.show().hide()您的微调器和swf。

JWPlayer有一些events that you can make use of。它看起来像onReady会为你做的伎俩。

至于其他的第三方主权财富基金,我想看看它们的文档周围类似的JavaScript回调。我知道swfobject has an onLoad callback,就像Swiff这样的一些其他嵌入解决方案,假设你可以使用它们。

祝你好运!

编辑:当SWF已经成功嵌入式的swfobject的回调可能被称为不一定加载。你最好的选择是玩弄这个,看看它是否有效 - 或尽可能使用第三方swf的回调函数。

编辑2:这里是一个flash加载器的例子。

import flash.net.URLRequest; 
import flash.display.Loader; 
import flash.events.Event; 

function startLoad() { 
    var mLoader:Loader = new Loader(); 
    var mRequest:URLRequest = new URLRequest("url-to-your-swf.swf"); 
    mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler); 
    mLoader.load(mRequest); 
} 

function onCompleteHandler(loadEvent:Event){ 
    addChild(loadEvent.currentTarget.content); 
    //Here's where you specify your js function 
    ExternalInterface.call("flashLoaded"); // <-- where 'flashloaded' is a js function 

} 

startLoad(); 
+0

嗨Chazbot。我已经有了你的建议。首先,你的编辑看起来是正确的。看起来,只要OBJECT在页面上(包含Adobe Flash Player)创建,swfobject就会触发它的回调函数。即它在swf加载之前触发,所以我不能使用这个回调函数。所以,我已经设法为每个第三方swf找到onReady事件,并且与这些事情一起去了。 – David

+0

不幸的是,似乎使用jQuery的hide()函数本质上是一个CSS display:none,并且事实证明这会停止或阻止flash对象。 onReady事件不会触发。在网上阅读,似乎这甚至可能是设计。下面的帖子建议不要使用display:none,你可以将包含flash对象的div设置为CSS width:1px;高度1px; overflow:hidden .... http://www.stoimen.com/blog/2009/04/14/load-flash-swf-in-hidden-div/ ....然后当onReady事件触发时,设置尺寸可以恢复到全尺寸。 – David

+0

虽然这种方法已成功允许我在swf加载时显示加载图像,但对于使用Firefox Flashblock插件的用户而言(这会阻止任何Flash播放,直到您按Flashblock播放按钮) ,他们没有看到Flashblock播放按钮,因为它在1px×1px的div内。这意味着这些用户看起来像是网页已损坏。 – David