总结调用Flash的几种方法

一、Adobe 提供的方法

<object width="200" height="200" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
  <param name="src" value="clock.swf" />
  <param name="quality" value="high" />
  <embed src="clock.swf" type="application/x-shockwave-flash" width="200" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

这是非常经典与简单的一种调用方法，刚学网站建设时在很多小企业站点都可以看到，不过这种方法有一些明显缺陷：

不能检测播放器版本：如果用户 flash 版本过低，会出现 ActiveX 插件安装提示，而且用低版本播放器播放高版本的 flash 文件时存在很多问题，这些都影响用户对网站的正常使用
不符合XHTML规范：虽然通过 <embed> 元素插入 flash 可以兼容非IE内核浏览器，但 <embed> 元素是 Netscape 公司创建的用来显示网页中 flash 的插件，不属于 HTML4.01规范中的一部分（注：HTML5已支持 embed 标签）
其它问题：使用该方法时 <object> 与 <embed> 的参数必需一致，否则可能导致在不同浏览器效果不一致甚至无法正常加载

详细的介绍可以查看>>HO8001: 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异，不过有一点值得一提，直接使用 <embed> 兼容性也不错，IE 下也能正常显示，但并不推荐，原因同上。

二、不含 <embed> 的方法

1.Flash Satay Method

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

该方法的详细介绍可以查看Drew McLellan的文章>>Flash Satay: Embedding Flash While Supporting Standards

2.仅含 <Object>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> <-->
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf" width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>

这两种方法都没有用到 <embed> ，代码是符合XHTML规范，但仍然不能检测播放器版本，并且 Flash Satay 不兼容一些读屏软件。

三、SWFObject方法

SWFObject是一个 js 类库，它提供了一种易于使用、标准友好的方式来插入 flash 内容。最新版本为2.3 beta，源码托管在 Github，点击访问SWFObject。稳定版本为2.2，目前依然可以在 Google Code 访问并下载：https://code.google.com/p/swfobject/

SWFOject的优点：

检查播放器版本：它能够检查客户端浏览器对 flash 插件的支持情况
符合 XHTML 规范：使用 SWFObject 方法插入 flash 并不会在 HTML 文档中直接出现不友好的代码
使用简单、便捷，特别是当一个页面需要插入多个 flash 时

1.基本使用方法：

HTML 部分

<div id="altContent">这里是flash内容，当前的浏览器没有安装或者FlashPlyaer版本不够高，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>

JavaScript 部分

<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript">
    swfobject.embedSWF("myflash.swf", "altContent", "300", "120", "9.0.0", "expressInstall.swf"); 
</script>

embedSWF 参数解释：

参数1： swf 文件地址

参数2：swf 文件容器

参数3：flash 的宽度

参数4：flash 的高度

参数5：正常播放该 flash 的最低版本

参数6：版本低于当前要求时，执行该 swf 文件，跳转到官方下载最新版本的 flash 插件（可选）

2.高级使用方法（可传递参数、变量、属性）：

HTML 部分

<div id="altContent">这里是flash内容，当前的浏览器没有安装或者FlashPlyaer版本不够高，请从<a href="http://www.adobe.com/go/getflashplayer">这里</a>下载安装最新的FlashPlyaer</div>

JavaScript 部分

<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript">
 var flashvars = {
     id:"myid",
     age:"myage",
     nickName:"mynickname"
 }
 var params = {
     menu: "false",
     allowFullscreen: "false",
     allowScriptAccess: "always",
     bgcolor: "#ffffff",
     wmode: "transparent"
 }
 var attributes = {
     id: "myswfcontent",
     name: "myswfcontent"

}
 swfobject.embedSWF("myflash.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
 </script>

也可以写成这样（不常用）

<script type="text/javascript" src="swfobject.js"></script> 
<script type="text/javascript">
//不常用方法一，应该没人想这么写…
var flashvars = {};
flashvars.id:"myid";
flashvars.age:"myage";
flashvars.nickName:"mynickname";
var params = {};
params.menu: "false";
params.allowFullscreen: "false";
params.allowScriptAccess: "always";
params.bgcolor: "#ffffff";
params.wmode: "transparent";
var attributes = {};
attributes.id: "myswfcontent";
attributes.name: "myswfcontent";
swfobject.embedSWF("myflash.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<script type="text/javascript">
//不常用方法二，将初始化变量写成一句，代码简洁，但阅读困难，不推荐
swfobject.embedSWF("myflash.swf", "altContent", "100%", "100%", "9.0.0", "expressInstall.swf", ｛id:"myid",age:"myage",nickName:"mynickname"｝, {menu:"false",allowFullscreen:"false",allowScriptAccess:"always",bgcolor:"#ffffff",wmode:"transparent"}, {id:"myswfcontent",name:"myswfcontent"});
</script>

初始化变量解释：

flashvars：json 对象，用来为 flash 传递初始化信息
params：flash 设置，是否显示按钮、是否全屏、是否允许访问 JS、背景颜色、窗口模式等
attributes：设置嵌入 flash 完成时 object 标签的 id，name等属性

embedSWF 参数解释：

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj, callbackFn)

swfUrl（String ，必须）指定SWF的URL。
id（String ，必须）指定将会被Flash内容替换的HTML元素的id。
width（String，必须）指定SWF的宽。
height（String，必须）指定SWF的高。
version（String，必须）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。
expressInstallSwfurl（String，可选）指定expressInstall.swf的URL并在客户端FlashPlyaer版本低于version指定的数值时激活Adobe express install自动升级客户端的FlashPlyaer。
flashvars（ Object ,可选）用name:value对指定你的flashvars。
params（Object ,可选）用name:value对指定你的嵌套object元素的params。
Attributes（Object, 可选）用name:value对指定object的属性。
callbackFn（JavaScript function, 可选）定义一个在执行embedSWF方法后，嵌入flash成功或失败后都可以回调的 JS 函数

该方法共有10个参数，前5个参数不能省略，后面的参数为可选，但如果不用某个参数，必需用 null 关键字点位；

swfobject.embedSWF("myflash.swf", "altContent", "100%", "100%", "9.0.0", "null", null, params, attributes);

四、jQuery SWFObject Plugin

jQuery SWFObject Plugin 目前版本为1.1.1，它是基于SWFObject 2.2 开发的 jQuery 插件。如果在项目中有使用到 jQuery ，则可以使用该插件，大小仅为 SWFObject 的十分之一。

注：以下 JavaScript 代码示例中都略去了 jQuery 与 jQuery SWFObject 调用的语句。

1.基本的使用方法：

HTML 部分

<div id="myFlash">
    The "You don't have flash" message.Or any other backup content.
</div>

JavaScript 部分

<script type="text/javascript">

$(document).ready(
    function() {
        $('#myFlash').flash('fireworks.swf');
    }
);
</script>

2.高级使用方法（可传递参数、变量、属性）：

HTML 部分

<div id="myFlashVars"></div>

JavaScript 部分

<script type="text/javascript">
$(document).ready(
    function () {
        $('#myFlashVars').flash(
            {
                // 传入 flash url
                swf: 'test_flashvars.swf',
                // 传值
                  flashvars: {
                    name1: 'jQuery',
                    name2: 'SWFObject',
                    name3: 'Plugin'
                }
            }
        );
    }
);
</script>

点击这里面查看官网与详细文档>>http://jquery.thewikies.com/swfobject/

posted @ 2013-03-10 17:29 Milly 阅读(6421) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端笔记

关注开源/记录工作/学习分享/

总结调用Flash的几种方法

一、Adobe 提供的方法

二、不含 <embed> 的方法

1.Flash Satay Method

2.仅含 <Object>

三、SWFObject方法

1.基本使用方法：

2.高级使用方法（可传递参数、变量、属性）：

四、jQuery SWFObject Plugin

1.基本的使用方法：

2.高级使用方法（可传递参数、变量、属性）：