收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 45163|回复: 62

[教程] 网页中嵌入 Flash 的方法讨论

[复制链接]
发表于 2006-12-3 15:46:43 | 显示全部楼层 |阅读模式
Flash 嵌入的问题论坛中有人问了好多次,到底应该怎么用,为什么通不过验证,要通过验证怎么办等等等。
讨论中也出现了不少的误解,所以我单开一个帖总结一下我所知道的东西,不想看我罗嗦的直接跳到最后看结论就可以了。

一、传统的方法。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
   width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550"
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain"
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

这方法是使用 object 和 embed 标签来嵌入,细心的会发现,object 的很多参数和 embed 里面的很多属性是重复的,为什么这样做?为了浏览器兼容性,有的浏览器支持 object,有的支持 embed,这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法,最大限度的保证了 Flash 的功能,没有兼容性问题。但是它现在不那么好用了:
  • 无法通过验证,由于为了兼容性而嵌入的 embed 标签是不符合 W3C 的规范的。当然,如果你不在乎什么规范不规范,另当别论。
  • 微软由于种种原因,在 sp2 后限制了 IE 的 ActiveX 的使用模式,就是在页面中的 ActiveX 有一个虚框,需要用户点击一次才能正常交互。Flash是作为一个 ActiveX 嵌入到网页中的,所以它也会受牵连,只有通过 JS 嵌入 Flash 才能解决这个问题。
  • 没有 Flash 版本检测,如果版本浏览器的flash插件版本不够,或者不能正常显示你的 swf 文件,或者会弹出一个 ActiveX 的确认安装的框——这个框对很多用户来说是很恐怖的。




二、只用 object 的方法,这种方法的名字叫做 Flash satay,最早是2002年由 Drew McLellan 发表在 A List Apart 上,后来又经过了几次完善:
<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>

这方法没 embed 了,可以通过验证,是标准的嵌入 Flash 的方法,浏览器兼容性也不错,看起来几乎完美,不过还是有问题的:
  • 需要一个 holder swf 来加载你的目标 swf 以保证 IE 中的 stream 能力,如果你需要通过 flashvars 来传参,或者和页面的 JS 交互,会很麻烦。
  • 同上面第二点,ActiveX的虚框问题。
  • 继续同上没有版本检测
  • 还是有少数用户代理(比如一些版本的 safari 和一些屏幕阅读器)不认这种方式,有 bug。




三、用JS嵌入的方法。
用JS嵌入就是各有各的嵌入方法了,有嵌得好的有嵌得不好的。有人用 document.write 直接写,这法子说实话不大好,感觉 hack 成分多了,有点为了验证而验证的意思,而且没有体现出什么 JS 的优势。我觉得一个好的 JS 嵌入脚本,在保证 Flash 应有功能的基础上,要发挥 JS 的优势应该要有版本检测,要能很好解决可访问性问题(也就是用户在无法浏览 Flash 内容或禁用 JS 的时候应该如何处理的问题),要易于重复使用。
我知道的比较常见的 JS 嵌入方法有以下几个

我 SWFObject 用的比较多,就挑它来说一些这种方法的优点:
  • IE中没有讨厌的虚框问题了。
  • 提供了完善的版本检测功能,如果版本不够则显示其他东西,比如图片或文字。
  • 易于使用,只要在页面头加载一个 .js 文件,然后 HTML 写一个容器,里面放普通的文本或图片(用于无法显示 Flash 时显示),最后用脚本来替换这个元素里面的内容为 Flash。
  • 可以通过验证——当然这个不是重点,只是顺带效果罢了。




四、我的结论。
现阶段用 JS 嵌入 Flash 是最完美的方法,虽然这法子这也是由于浏览器的种种问题而作出的妥协。
但它在保证 Flash 功能的前提下还利用 JS 提供了额外的好处,再者又已经有人写了很完善的嵌入脚本可以方面地下载使用(推荐 SWFObject),我们还有什么理由不用它呢?

SWFObject 那网页是英文的,这里写个简单的用法教程:
  • 下载它的.js文件,在这里: http://blog.deconcept.com/swfobject/swfobject1-4.zip (如果链接失效可能是版本有更新,请用上面给出的地址去主页下载最新版本)
  • 在你的 HTML 页面头部<head>区嵌入这个脚本文件:<script type="text/javascript" src="swfobject.js"></script>
  • 在你的 HTML 中写一个用来放 Flash 的容器,比如<div>,并随便给一个 id 比如 flashcontent。然后在里面放上你的替换内容。
    <div id="flashcontent">
    这里放替换内容,用来在 Flash 无法显示时显示。
    </div>
  • 使用脚本替换这个内容:
    <script type="text/javascript">
       var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
    //参数意思: 地址,Flash 的 id(不是容器的 id),宽,高,版本需求,背景颜色
    //这是最基本的,如果你要高级的设置,就仔细翻翻说明吧。
       so.write("flashcontent");
    </script>

    这脚本可以写在 HTML 中也可以写在外部 .js 文件中。
  • OK


[[i] 本帖最后由 snwebsite 于 2006-12-20 10:38 编辑 ]

评分

参与人数 1威望 +3 收起 理由
snwebsite + 3 精品文章

查看全部评分

发表于 2006-12-3 16:23:06 | 显示全部楼层
老九辛苦啦! 打分
回复 支持 反对

使用道具 举报

发表于 2006-12-3 18:29:09 | 显示全部楼层
我虽然比较不喜欢用JS的加的..因为常常关了JS~~可是为了去掉那个难看的边边~要必要使用JS的~
挖哈哈..不知道有多少人会跟我一样..`
为了减少我灌水的嫌疑~..
送上个链接 对比国内门户网站对Flash激活限制的处理
因为那边文章版权声明我没有转过来.. 大家点一下吧.

[[i] 本帖最后由 rotui 于 2006-12-3 18:33 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-12-3 19:02:13 | 显示全部楼层
恩,ajaxcn 那篇写得很有趣,呵呵
回复 支持 反对

使用道具 举报

发表于 2006-12-3 20:29:38 | 显示全部楼层
还是老九棒……支持一下
回复 支持 反对

使用道具 举报

发表于 2006-12-4 09:06:20 | 显示全部楼层
总结得不错,前两天还有个帖子在说这个问题,现在就有比较系统的帖子,赞个!
回复 支持 反对

使用道具 举报

发表于 2006-12-4 12:34:15 | 显示全部楼层
不错,比较系统的一个总结了
回复 支持 反对

使用道具 举报

发表于 2006-12-4 14:33:38 | 显示全部楼层
支持一下!谢谢楼主!!!
回复 支持 反对

使用道具 举报

发表于 2006-12-7 13:23:31 | 显示全部楼层

在网上看到一种更简单的方法。

<embed src="FLASH文件" width="596" height="110" wmode="transparent"></embed>

但不知道有什么办法可以通过认证。

实例我放到网站上了。
http://www.dowv.com/flash/flash.html
回复 支持 反对

使用道具 举报

发表于 2006-12-7 13:26:33 | 显示全部楼层
用 ifram 嵌入不行吗?
回复 支持 反对

使用道具 举报

发表于 2006-12-7 14:00:22 | 显示全部楼层
嘿嘿  学习
回复 支持 反对

使用道具 举报

发表于 2006-12-7 16:08:32 | 显示全部楼层
先占个位,以后会用到
回复 支持 反对

使用道具 举报

发表于 2006-12-7 16:22:54 | 显示全部楼层
我一直用老九说到的第三种方法

DW安装了8.02的update以后插入的flash直接解决了激活和通过验证的问题
(去掉<noscript></noscript>)

不过不知道这个方法的优劣性的.老九分析一下?
回复 支持 反对

使用道具 举报

发表于 2006-12-8 09:15:38 | 显示全部楼层

不错

不错,值得学习
回复 支持 反对

使用道具 举报

发表于 2006-12-14 00:12:15 | 显示全部楼层

用JS方式,怎么实现flash 透明,transparent 加在什么地方呢?

<div id="flashcontent">
这里放替换内容,用来在 Flash 无法显示时显示。
</div>
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
//参数意思: 地址,Flash 的 id(不是容器的 id),宽,高,版本需求,背景颜色
//这是最基本的,如果你要高级的设置,就仔细翻翻说明吧。
   so.write("flashcontent");
</script>
回复 支持 反对

使用道具 举报

发表于 2006-12-14 08:59:39 | 显示全部楼层
昨天还头疼FLASH的虚况呢.谢谢楼主
回复 支持 反对

使用道具 举报

发表于 2006-12-14 10:12:00 | 显示全部楼层
id - The ID of your object or embed tag. The embed tag will also have this value set as it's name attribute for files that take advantage of swliveconnect.
这个id是什么意思啊?
楼主说是Flash 的 id(不是容器的 id),
flash的id是什么?
小小菜鸟我没有看懂
回复 支持 反对

使用道具 举报

发表于 2006-12-14 10:17:13 | 显示全部楼层
flash 透明 已经解决.
<div id="flashcontent">
这里放替换内容,用来在 Flash 无法显示时显示。
</div>
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
    so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-12-14 13:42:19 | 显示全部楼层
原帖由 [i]飞虫 于 2006-12-7 16:22 发表
我一直用老九说到的第三种方法

DW安装了8.02的update以后插入的flash直接解决了激活和通过验证的问题
(去掉<noscript></noscript>)

不过不知道这个方法的优劣性的.老九分析一下?



这个应该和其他的也差不多,不过好像少了版本检测。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-12-14 13:43:39 | 显示全部楼层
原帖由 [i]plusbugua 于 2006-12-14 10:12 发表
id - The ID of your object or embed tag. The embed tag will also have this value set as it's name attribute for files that take advantage of swliveconnect.
这个id是什么意思啊?
楼主说是Flash 的 ...



就是 Flash 的那个 object 或者 embed 的 id 属性,不是它外面套的 div 的 id 属性。
这个 id 是用来和页面中的 JS 交互或者别的通信用的。
回复 支持 反对

使用道具 举报

发表于 2006-12-14 14:10:56 | 显示全部楼层

回复 #20 old9 的帖子

知道了
十分感谢楼主~
回复 支持 反对

使用道具 举报

发表于 2006-12-14 14:51:12 | 显示全部楼层
原帖由 [i]dowv 于 2006-12-7 13:23 发表
<embed src="FLASH文件" width="596" height="110" wmode="transparent"></embed>

但不知道有什么办法可以通过认证。

实例我放到网站上了。
http: ...


这个简单,我喜欢.
回复 支持 反对

使用道具 举报

发表于 2006-12-14 15:54:49 | 显示全部楼层
lex发现有一个jQuery的media插件,也很好玩。
如果使用了jQuery的框架,可以试试。
回复 支持 反对

使用道具 举报

发表于 2006-12-20 09:56:13 | 显示全部楼层
太感谢了。。。我正好在为此事头疼,一早经理就为此事发飙。终于找到解决办法了~
回复 支持 反对

使用道具 举报

发表于 2006-12-20 16:33:23 | 显示全部楼层
试了试成功了.先感谢楼主.不过有个问题.当我把第2个FLASH用这个方法按上的时候就看不见第一个了.一个页面只能用一次吗?我把ID改了为了避免冲突.
回复 支持 反对

使用道具 举报

发表于 2006-12-22 13:58:38 | 显示全部楼层

我今天才用到, 不过是从 新浪网上弄下来的,原理一样!

我今天才用到, 不过是从 新浪网上弄下来的,原理一样!
下面附链接地址:
http://image2.sina.com.cn/home/sinaflash.js
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-12-22 14:16:54 | 显示全部楼层
原帖由 [i]sealong 于 2006-12-22 13:58 发表
我今天才用到, 不过是从 新浪网上弄下来的,原理一样!
下面附链接地址:
http://image2.sina.com.cn/home/sinaflash.js


这个三楼有提到。
回复 支持 反对

使用道具 举报

发表于 2006-12-22 21:10:02 | 显示全部楼层
http://www.apc.fr/eu/en/index.php

这个网站用的方法好像有些不同?
回复 支持 反对

使用道具 举报

发表于 2007-2-1 15:40:16 | 显示全部楼层

我在飞煌设计的网站上找到这样一段代码

楼主的介绍真是全面,辛苦了
我在飞煌设计(http://www.fhuang.com/)的网站源代码中也看到了一个不错的解决方案
感觉这个也不错,简洁,清晰
解决了 W3C验证、虚线边框、把整段flash代码写成外部函数禁用了js时无法显示的问题
试了一下,兼容Firefox浏览器

演示地址:http://www.fhuang.com/V3/


  1.         <noscript id="Flash1">
  2.                 <object type="application/x-shockwave-flash" data="/V3/BLD/swf/home.swf" style="width: 234px; height: 428px;border-width:0">
  3.                 <param name="movie" value="/V3/BLD/swf/home.swf">
  4.                 <param name="quality" value="High">
  5.                 <param name="menu" value="false">
  6.                 <param name="wmode" value="transparent">
  7.                 </object>
  8.         </noscript><script type="text/javascript">swf("Flash1");</script>
复制代码


fucntion swf() 放到了外部js文件中,很短小

  1. function swf(Sid){
  2.         temp=document.getElementById(Sid).innerHTML;
  3.         temp=temp.replace(/&lt;/gi,"<");temp=temp.replace(/&gt;/gi,">");
  4.         document.write(temp);
  5. }
复制代码



他们在注释中提到
/*≡≡≡═══─────────
*页面文件中的flash文件嵌入的代码符合W3C标准
*配合<noscirpt>清除windows xp打了SP1补丁后ie中的flash会出现要求激活的虚线边框
*将 <object type="application/x-shockwave-flash..." 标签放到<noscript></noscript>标签中的好处:
*  1.可以很方便的修改flash代码;
*  2.再利用性强;
*  3.如果浏览器禁用了js脚本 flash依然可以显示出来
*/

[[i] 本帖最后由 Abluent 于 2007-2-1 15:51 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-2-1 18:31:35 | 显示全部楼层
不错不错  受益!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-12 12:25 , Processed in 0.218202 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表