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

Javascript
jQuery生成asp.net服务器控件的代码
javascript 实现的完全兼容鼠标滚轴缩放图片的代码
JavaScript学习笔记(十七)js 优化
使用SyntaxHighlighter实现HTML高亮显示代码的方法
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
利用jQuery 实现GridView异步排序、分页的代码
jquery.lazyload 实现图片延迟加载jquery插件
Lazy Load 延迟加载图片的 jQuery 插件
jquery 插件实现图片延迟加载效果代码
javascript小数计算出现近似值的解决办法
jquery1.4后 jqDrag 拖动 不可用
jquery 应用代码 方便的排序功能
选择TreeView控件的树状数据节点的JS方法(jquery)
jquery 图片Silhouette Fadeins渐显效果
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
javascript 同时在IE和FireFox获取KeyCode的代码
js 键盘记录实现(兼容FireFox和IE)
javascript 函数速查表
jQuery AnythingSlider滑动效果插件
经典海量jQuery插件 大家可以收藏一下

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 82 ::
收藏到网摘: 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>