当前位置: 首页 > 图文教程 > 网络编程 > Javascript > SWFObject:JS代码嵌入Flash媒体资源

Javascript
表格 隔行换色升级版
JavaScript 变量基础知识
fileupload控件 文件类型客户端验证实现代码
extjs DataReader、JsonReader、XmlReader的构造方法
让Firefox支持event对象实现代码
CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
JQuery 图片延迟加载并等比缩放插件
Jquery作者John Resig自己封装的javascript 常用函数
js 鼠标拖动对象 可让任何div实现拖动效果
页面中js执行顺序
Javascript select下拉框操作常用方法
jQuery 常见学习网站与参考书
javascript currying返回函数的函数
prototype 中文参数乱码解决方案
为javascript添加String.Format方法
asp.net HttpHandler实现图片防盗链
Riot.js 快速的JavaScript单元测试框架
Javascript实现的CSS代码高亮显示
Js 实现表格隔行换色一例

Javascript 中的 SWFObject:JS代码嵌入Flash媒体资源


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 112 ::
收藏到网摘: n/a

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

一、优点:

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

2、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+,各种浏览器的后续版本也会继续支持;

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

4、SWFObject可以方便地检查版本细节,例如我们需要v.6.0 r65 (or 6,0,65,0) 来处理SWF资源,就可以添加如下代码:

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “6.0.65″, “#336699″);

5、SWFObject的版本检测可以人工忽略。如果在特定环境下不希望SWFObject检测版本号,那么只需要传递一个参数在HTML页面中,就可以了。SWFObject可以捕获这个参数并且跳过检测,直接写入Flash嵌入代码到DOM中。用于忽略版本检测的变量名是“detectflash”,以下是一个例子:

<a href=”mypage.html?detectflash=false”>Bypass link</a>

二、使用说明:

<script type=”text/javascript” src=”swfobject.js”></script>

<div id=”flashcontent”>

This text is replaced by the Flash movie.

</div>

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);

so.write(”flashcontent”);

</script>

详细说明:

⑴、“<div id=”flashcontent”>[...]</div>”:

为SWF资源预留一个HTML结点。这个HTML结点内的所有内容都会在客户端被Flash资源替换,当客户端没有安装Flash播放器的时候,这些内容会显示出来。这一特色在SEO以及对用户体验方面非常有必要。

(2)、“var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey])”:

创建一个新的SWFObject实例,并且传入一下参数:

swf - SWF文件路径;

id - 为这个SWF文件分配的id值,它将用于给embed与object标签设定name属性,以便于可以支持swliveconnect的功能,如动态传入变量;

width - 宽度;

height - 高度;

version - FlashPlayer需要的版本号,它可以详细到 ‘主版本号.小版本号.细节‘,例如:“9.0.28“。一般地,我们只需传入主版本即可,例如:“9″。

background-color - Flash资源的背景色,16进制格式

此外,还有如下可选参数:

quality - 画面质量,默认为“high”;

xiRedirectUrl - 如果的Flash影片在弹出窗口中,或者希望用户在完成了ExpressInstall后重定向到其他地址,可以采用xiRedirectUrl属性,来自动完成这一步骤。例如:

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

so.useExpressInstall(’expressinstall.swf’);

so.setAttribute(’xiRedirectUrl’, ‘http://www.example.com/upgradefinished.html’); // must be the absolute URL to your site

so.write(”flashcontent”);

</script>


redirectUrl - 没有安装相应版本的播放器后自动跳转的目标地址;

detectKey - 这是当忽略检测时,SWFObject将去url地址中查找的变量,默认值为“detectflash”;


(3)、so.write(”flashcontent”):

将Flash资源应用到DOM里,在浏览器显示出来;

 

三、范例:

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

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100%”, “7″, “#336699″);

so.addParam(”quality”, “low”);

so.addParam(”wmode”, “transparent”);

so.addParam(”salign”, “t”);

so.write(”flashcontent”);

</script>

这里可以看到Flash支持的内联参数列表:http://kb2.adobe.com/cps/127/tn_12701.html(adobe.com官方资源)


2、采用“Flashvars”参数传入变量

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

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);

so.addVariable(”variable1″, “value1″);

so.addVariable(”variable2″, “value2″);

so.addVariable(”variable3″, “value3″);

so.write(”flashcontent”);

</script>

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

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

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “7″, “#336699″);

so.addVariable(”variable1″, getQueryParamValue(”variable1″));

so.addVariable(”variable2″, getQueryParamValue(”variable2″));

so.write(”flashcontent”);

</script>

getQueryParamValue()方法同样可以获取JavaScript的Location对象的hash值“location.hash”来与swf内部进行通信。


3、在SWFObject中应用Express Install(利用官方自动升级接口)

SWFObject全面支持AdobeFlash播放器的自动升级功能(从6.0.65起的FlashPlayer支持在swf内部自动升级!),这样用户完全不用离开网页就能完成播放器的升级了。

首先,上传官方的expressinstall.swf到服务器上,然后使用useExpressInstall方法指定这个swf文件的地址就可以了,例如:

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

so.useExpressInstall(’expressinstall.swf’);

so.write(”flashcontent”);

</script>

可以安装一个低版本的Flash播放器然后测试效果;

在SWFObject原文件压缩包中可以找到具体的使用细节,可以自己定制ExpressInstall的流程。

如果Flash影片在弹出窗口中,或者希望用户在完成了ExpressInstall后重定向到其他地址,可以采用xiRedirectUrl属性,来自动完成这一步骤。例如:

<script type=”text/javascript”>

var so = new SWFObject(”movie.swf”, “mymovie”, “200″, “100″, “8″, “#336699″);

so.useExpressInstall(’expressinstall.swf’);

so.setAttribute(’xiRedirectUrl’, ‘http://www.example.com/upgradefinished.html’); // must be the absolute URL to your site

so.write(”flashcontent”);

</script>