HTML网页中插入Flash

UPDATE: 2018-08-03 12:29
我们已经不建议在网页中使用 Flash 技术

一、介绍:

要在网页中正常显示 flash 内容,那么页面中必须要有指定 flash 路径的标签。也就是 OBJECT 和 EMBED 标签。

OBJECT 标签是用于 Windows 平台的 IE 浏览器的,而 EMBED 是用于 Windows 和 Macintosh 平台下的 Netscape Navigator 浏览器以及 Macintosh 平台下的 IE 浏览器。Windows 平台的 IE 利用 Activex 控件来播放 Flash,而其它的浏览器则使用 Netscape 插件技术来播放 Flash。

[code lang="html"]
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" width="100%" height="598">
<param name="movie" value="/ads/20140320_oppo.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="allowFullScreen" value="true" />
<param name="swfversion" value="6.0.65.0" />
<!--[if !IE]> Firefox -->
<embed src="/ads/20140320_oppo.swf" width="100%" height="598" align="top" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="true"></embed>
<!-- <![endif]-->
</object>
[/code]

二、为什么要使用以上全部的标签?能省略某些标签不?

OBJECT 标签是用于 Windows IE3.0 及以后浏览器或者其它支持 Activex 控件的浏览器。

“classid”和“codebase”属性必须要精确地按上例所示的写法写,它们告诉浏览器自动下载 Flash player 的地址。如果你没有安装过 Flash player,浏览器会跳出一个提示框访问是否要自动安装 Flash player。当然,如果你不想让那些没有安装 Flash player 的用户自动下载播放器,或许你可以省略掉这些代码。

EMBED 标签是用于 Netscape Navigator2.0 及以后的浏览器或其它支持 Netscape 插件的浏览器。“pluginspage”属性告诉浏览器下载 Flash player 的地址,如果还没有安装 Flash player 的话,用户安装完后需要重启浏览器才能正常使用。

为了确保大多数浏览器能正常显示 Flash,你需要把 EMBED 标签嵌套放在 OBJECT 标签内,就如上面代码例子一样。支持 Activex 控件的浏览器将会忽略 OBJECT 标签内的 EMBED 标签。Netscape 和使用插件的 IE 浏览器将只读取 EMBED 标签而不会识别 OBJECT 标签。也就是说,如果你省略了 EMBED 标签,那 Firefox 就不能识别你的 Flash 了。

下面列出了用于发布影片的 OBJECT 和 EMBED 标签的必要以及可选属性。

必需属性

CLASSID 设置浏览器的 Activex 控件,仅用于 OBJECT 标签。

CODEBASE 设置 Flash Activex 控件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于 OBJECT 标签。

WIDTH 以百分比或象素指定 Flash 影片的宽度。

HEIGHT 以百分比或象素指定 Flash 影片的高度。

SRC 指定影片的下载地址。仅用于 EMBED 标签。

PLUGINSPAGE 设置 Flash 插件的位置,因而如果浏览器如果没有安装的话,可以自动下载安装。仅用于 EMBED 标签。

MOVIE 指定影片的下载地址。仅用于 OBJECT 标签。

可选属性及可用的值

ID 设定变量名,用于脚本代码的引用。仅用于OBJECT。

NAME 设定变量名,用于脚本代码(如javascript)的引用。仅用于EMBED。

SWLIVECONNECT (true或false)指定当flash player第一次下载时,是否启用java。如果些属性省略,默认值为false。你果你在相同页同使用javascript和flash,java必须使用FSCommand来工作。

PLAY (true或false)指定flash影片是否在下载完成后就自动播放,如果省略此属性,则默认为true。

LOOP (true或false)指定影片播放完最后一帧后是停止还是继续循环播放,如果省略此属性,则默认为true。

MENU (true或false) True 显示全部的菜单,允许用户放大,缩小等控制影片播放等操作;False 显示只包含设置选项和关于flash的菜单。

QUALITY (low, high, autolow, autohigh, best )。Low 速度优于美观,而且不应用反锯齿;Autolow 刚开始着重于速度,但当需要时随时提升美观;Autohigh 同时着重播放速度和美观,但需要时则牺牲美观来保证播放速度;Medium 应用一些反锯齿而不平滑位图。它质量高于low设置而低于high设置;

High 美观优于播放速度,而且一直应用反锯齿。如果影片不包含动画,位图会被平滑化;而如果影片包含动画,位图将不变平滑;Best 提供最好的显示质量而不考虑播放速度。所有输出都应用反锯齿及所有位图都被平滑化。

SCALE (showall, noborder, exactfit)

Default(Show all) 影片在指定的区域内显示,但保持原始的比例。影片两侧将会出现边框。

No Boder 收缩影片以适合指定的区域,保持影片不失真,但部分影片将可能将裁切。然而保持影片的原始比例。

Exact Fit 使整个影片在指定的区域内显示,影片有可能变形失真,而且不保持原始的比例。

ALIGN (l, t, r, b) 默认为居中,当浏览器窗口小于影片时,边缘会被裁切。Left,Right,Top,Bottom按照相应的设置沿浏览器的边缘对齐。如果需要,另外三边将被裁切。

SALIGN (l, t, r, b, tl, tr, bl, br) L,R,T,B 左,右,上,下。TL,TR,BL,BR 左上,右上,左下,右下

WMODE (window, opaque, transparent) 设置flash影片的window mode属性,指定flash在浏览器中的透明,层叠及位置。Window 影片在浏览器中自己的矩形窗口内播放。Opaque 影片隐藏了所有在它后面的内容。Transparent 使flash影片透明,显示透明影片后面的网页内容。这将会降低动画的性能。而且这个属性不是在所有浏览器中都可用的。

BGCOLOR (#RRGGBB, 十六进制RGB值。)指定影片的背景颜色。使用这个属性覆盖flash中设定的背景颜色。

BASE 设定基准目录或 URL,用来解决所以 flash 中的相对路径。类似网页中的 <base> 标签。

FLASHVARS 传递变量到 Flash player,需要 Flash player 6 及以后的版本。传递 root 级变量到影片。字符串的格式是用“&”分隔的 name=value 集。浏览器支持 64kB 大小的字符串长度。更多关于 FlashVars 的信息,请查看相关文档。

虽然 Flash Player 6 开始支持 FlashVars,在 HTML 中,可以用

[code lang="html"]
<param name=\"FlashVars\" value=\"test=123\" />
[/code]

来代替 dd.swf?test=123 传参数給Flash,但仍然有人使用这方法,我有时因为贪图方便也这样做。

其实方法有一个坏处,如果参数是随访客访问,每次都不同,例如传 SessionID,会使 Browser 以为 SWF 是不同,每次都重新載入,使用戶不方便,但 FlashVars 不会有这个问题,善用了 Cache,加快了下次载入时间。
[code lang="html"]
<object data=\"flash.swf\" type=\"application/x-shockwave- flash\">
<param name=\"movie\" value=\"flash.swf\" />
<param name=\"pluginurl\" value=\"http://www.macromedia. com/go/getflashplayer\" />
<param name=\"FlashVars\" value=\"test=123&di=123\" />
</object>
[/code]

您的赞助将会支持作者创作及本站运维

发表评论


TOP