X-Intend[超级打算]
每个人都有自己的想法,哪怕仅仅一瞬间~!

精简的Flash插入方式

KingFo 于 2009-04-29 21:04:34 发表  开发者
订阅: 请点击这里获取订阅地址
引用: 请点击这里获取引用通告地址 (UTF-8)
上一篇 < 精简的Flash插入方式 > 下一篇

 

首先我们来看看Flash CS系列以及之前版本的自动生成的代码吧:

  1. <object 
  2. classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   
  3. codebase="http://download.macromedia.com  
  4. /pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"  
  5. width="400" height="300" id="movie" align=""> 
  6. <param name="movie" value="movie.swf"> 
  7. <embed src="movie.swf" quality="high" width="400" 
  8. height="300" name="movie" align=""   
  9. type="application/x-shockwave-flash" 
  10. plug inspage="http://www.macromedia.com/go/getflashplayer">   
  11. </object> 

然后看看那 SWFObjcet 的官方标准方式:

  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent"> 
  2.                 <param name="movie" value="untitled.swf" /> 
  3.                 <!--[if !IE]>--> 
  4.                 <object type="application/x-shockwave-flash" data="untitled.swf" width="800" height="600"> 
  5.                 <!--<![endif]--> 
  6.                     <a href="http://www.adobe.com/go/getflashplayer"> 
  7.                         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
  8.                     </a> 
  9.                 <!--[if !IE]>--> 
  10.                 </object> 
  11.                 <!--<![endif]--> 
  12.             </object> 

虽然SWFObject的标准产出,摒弃了非XHTML 规范中的 <embed>, 但是你也看见了,还是需要很多重复的参数,一个参数写两次啊。。。。。

对于痛恨重复劳动的人们来说,可以这样写

  1. <object height="100%" width="100%" type="application/x-shockwave-flash" data="/swf/clock.swf">      
  2.  <param value="/swf/clock.swf" name="movie"/>     
  3.   <param value="true" name="allowfullscreen"/>       
  4. <param value="always" name="allowscriptaccess"/>       
  5. <param value="high" name="quality"/>   
  6. </object> 

 至于为什么,请参看这篇文章吧

Flash Satay: Embedding Flash While Supporting Standards
by Drew McLellan
 http://www.alistapart.com/articles/flashsatay

 

======================================================[King Fo的分界线]========

看不懂?
好吧我给提要下

首先要从<object>标签说起

我们先比较下只支持IE的<object>标签写法以及非IE下的<object>标签写法

  1. <!--IE 下的方式--> 
  2. <object height="100%" width="100%" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">       
  3. <param value="/swf/clock.swf" name="movie"/>       
  4. <param value="true" name="allowfullscreen"/>       
  5. <param value="always" name="allowscriptaccess"/>     
  6. <param value="high" name="quality"/>   
  7. </object> 
  1. <!--非IE下的方式--> 
  2. <object data="/swf/clock.swf" type="application/x-shockwave-flash" width="100%" height="100%">        
  3. <param name="allowfullscreen" value="true">       
  4. <param name="allowscriptaccess" value="always">    
  5.  <param name="quality" value="high">   
  6. </object> 

我们发现在IE下,object 标签属性的 classid 的属性,通过google 搜索可以知道 该属性就是调用ActiveX的GUID,很明显,只有IE支持,而 type="application/x-shockwave-flash"   则是 MIME (多用途的网际邮件扩充协议) 声明类型。眼熟吧? 在HTTP头里也可以找到它。

而data则是用于定义<object>标签的数据源(PS:IE曾经有过此属性非常白痴的漏洞。。。)

因此我们即可尝试以下标签方式支持所有浏览器。。。。。

  1. <object 
  2. type="application/x-shockwave-flash" data="movie.swf"   
  3. width="400" height="300"> 
  4. <param name="movie" value="movie.swf" /> 
  5. </object>     

可是呢,这个样子有个可恶的毛病,而且只有IE才有的毛病,即,一般的swf是作为流下载并观看的,以上标签插入方式在非IE下是这样工作的,但是!!! 该死的IE是等这个Flash全部下载好才播放。。。这就意味着更多的等待时间。。。。。

好吧~~ 谁让IE占用率那么高呢? 为了能够精简代码,而又可以流式播放怎么办呢?  当然~~来个Preloading嘛~~ 预载的flash播放器~~~,然后通过flashVars传递~~~~~~

以下是留给读者的测试(共2题自测):

题A:

在原文中使用传参同样使用了2次

  1. <object type="application/x-shockwave-flash  
  2. data="c.swf?path=movie.swf"   
  3. width="400" height="300"> 
  4. <param name="movie"   
  5. value="c.swf?path=movie.swf" /> 
  6. <img src="noflash.gif"   
  7. width="200" height="100" alt="" /> 
  8. </object> 

那么这样能否成功呢?

  1. <object type="application/x-shockwave-flash  
  2. data="c.swf"   
  3. width="400" height="300"> 
  4. <param name="movie"   
  5. value="c.swf" /> 
  6. <param name="flashVars"   
  7. value="path=movie.swf"/> 
  8. <img src="noflash.gif"   
  9. width="200" height="100" alt="" /> 
  10. </object> 

题B

这样写有效么? 要注意什么?

  1. <object   
  2.             type="application/x-shockwave-flash"   
  3.             width="400" height="300" data='movie.swf'<!--[if IE]>classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<![endif]--> > 
  4.             <param name="movie" value="movie.swf" />   
  5.             </object> 

 

 

爱上Flash/爱上Flex/爱上JS/爱上(x)HTML/爱上CSS吧!!!!!!

被阅 380 次, 0投一票
    1 / 0 / 0 | « 1 » |
    1 / 0 / 0 | « 1 » |
  • 看完了要说点啥么?
  • 昵称 (不填说不了话)
  • 信箱地址 (不会被公开,但是不填也说不了话)
  • 网址 (这个不填也成)

 
Google 网上论坛
订阅 XIntend
电子邮件:
访问此论坛

PageRank Checking Icon

文章分类

站点统计

  • 文章总数: 137 篇
  • 评论总数: 11 条
  • 附件总数: 64 个
  • 留言总数: 0 份
  • 建站日期: 2008-1-1
  • 访问总数: 309569 人次

最新留言

赞助商

友情链接

Design by Free CSS Templates & TiSkin, Powered by Roclog v3.2.15

浙ICP备09082105号, Copyright © 2007 X-Intend[超级打算]. All rights reserved.