·您当前的位置:首页 > 技术教程 > 播放器教程 >

SWFObject:基于Javascript的Flash媒体版本检测与嵌入模块

时间:2011-06-23 17:1189525.com
SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的

  SWFObject是一个用于在HTML中方面插入Adobe Flash媒体资源(*.swf文件)的独立、敏捷的JavaScript模块。该模块中的JavaScript脚本能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外,它能够避免您的HTML、XHTML中出现object、embed等非标准标签,从而符合更加标准。 (即:通过text/html应答页面, 而非application/xhtml+xml)

  SWFObject的使用是非常简单的,只需要包含 swfobject.js这个js文件,然后在DOM中插入一些简单的JS代码,就能嵌入Flash媒体资源了。 下面是一个最简单的范例:

  1. <script type="text/javascript" src="swfobject.js"></script> 
  2. <div id="flashcontent"> 
  3. This text is replaced by the Flash movie.  
  4. </div> 
  5. <script type="text/javascript"> 
  6. var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");  
  7. so.write("flashcontent");  
  8. </script> 


  让我们看看这些代码是如何工作的:

  <div id="flashcontent">[...]</div>首先,我们要为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换,当客户端没有安装Flash播放器的时候,这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

  var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);创建一个新的SWFObject实例,并且传入以下参数:

  1. swf - SWF文件路径   
  2. id - 您为这个SWF文件分配的id值,它将用于给embed与object标签设定name属性,如动态传入变量   
  3. width - 宽度   
  4. height - 高度   
  5. version - FlashPlayer需要的版本号,它可以详细到 '主版本号.小版本号.细节'例如:"6"。   
  6. background-color - Flash资源的背景色,16进制格式   
  7. //此外,还有如下可选参数:  
  8. quality - 画面质量,默认为"high"。   
  9. xiRedirectUrl - 详见ExpressInstall相关   
  10. redirectUrl - 没有安装相应版本的播放器后自动跳转的目标地址   
  11. detectKey - 这是当忽略检测时,SWFObject将去url地址中查找的变量,默认值为“detectflash”   
  12. so.write("flashcontent");将Flash资源应用到DOM里,在浏览器显示出来。 

 

  细节与优点
  SWFObject 的灵活性非常好。您完全可以事先写好HTML的其他部分,最后再回过头来添加Flash内容。这样可以确保在客户端没有Flash的情况下,用户不会一无所获;也可以确保针对搜索引擎,做了什么样的关键词优化。您完全不用像以前那样担心客户端的各种状况

  SWFObject兼容当前各种主流浏览器,如:PC上的IE5/5.5/6, Netscape 7/8,Firefox, Mozilla, and Opera。Mac上的IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+,各种浏览器的后续版本也会继续支持

  SWFObject检测Flash播放器版本从3开始到最新的版本号,而且也消灭了IE中“激活”的麻烦。


  传入Flash内联参数的简单范例:

  1. <script type="text/javascript"> 
  2. var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");  
  3. so.addParam("quality", "low");  
  4. so.addParam("wmode", "transparent");  
  5. so.addParam("salign", "t");  
  6. so.write("flashcontent");  
  7. </script> 

 

  采用"Flashvars"参数传入变量
  用Flashvars是在预加载Flash时传入数据的最佳做法,语法格式与GET变量串非常类似,如:  variable1=value1&variable2=value2&variable3=value3SWFObject帮助您将这项工作变得更加明确化

  1. <script type="text/javascript"> 
  2.    var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");  
  3.    so.addVariable("variable1", "value1");  
  4.    so.addVariable("variable2", "value2");  
  5.    so.addVariable("variable3", "value3");  
  6.    so.write("flashcontent");  
  7. </script> 

 

  这些变量将会保存在_root这个MovieClip对象里。

  SWFObject还可以方便地直接从URL中接受参数传入Flash中,例如你有这样一个URL:http://www.example.com/page.html?variable1=value1&variable2=value2。采用getQueryParamValue()方法你就可以轻松获取这些参数,并将它们传入Flash,例如:

  1. <script type="text/javascript"> 
  2.    var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");  
  3.    so.addVariable("variable1", getQueryParamValue("variable1"));  
  4.    so.addVariable("variable2", getQueryParamValue("variable2"));  
  5.    so.write("flashcontent");  
  6. </script> 

 

  getQueryParamValue()方法同样可以获取JavaScript的Location对象的hash值“location.hash”来与swf内部进行通信。这里是一个采用SWFObject的应用程序,其中用到了location.hash对象

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器