总结调用Flash的几种方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了总结调用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"  />
</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/

 

以上是关于总结调用Flash的几种方法的主要内容，如果未能解决你的问题，请参考以下文章

a标签调用js的几种方法

Laravel：如何在控制器的几种方法中重用代码片段

原创关于Flash全屏的几种方法

MCU固件升级的几种Flash划分方式

shell脚本内调用另外一个shell脚本的几种方法

浅析XSS的几种测试方法