如何在网页中插入swf?_IT百科

1. object + embed 传统的方法

优点：浏览器兼容性好，是 Macromedia 一直以来的官方方法

缺点：

a.embed 标签是不符合 W3C 的规范的，无法通过验证。当然，如果你不在乎什么规范不规范，另当别论。

b.微软由于种种原因，在 sp2 后限制了 IE 的 ActiveX 的使用模式，就是在页面中的 ActiveX 有一个虚框，需要用户点击一次才能正常交互。Flash是作为一个 ActiveX 嵌入到网页中的，所以它也会受牵连，只有通过 JS 嵌入 Flash 才能解决这个问题。

c.没有 Flash 版本检测，如果版本浏览器的flash插件版本不够，或者不能正常显示你的 swf 文件，或者会d出一个 ActiveX 的确认安装的框。

codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">

width="400"

height="300"

align="middle"

quality="high"

bgcolor="#f0fff8"

menu="false"

play="true"

loop="false"

FlashVars=""

allowScriptAccess="sameDomain"

type="application/x-shockwave-flash"

pluginspage="http://www.adobe.com/go/getflashplayer">

</embed>

</object>

2. 单object

这种方法的名字叫做 Flash satay，最早是2002年由 Drew McLellan 发表在 A List Apart 上，后来又经过了几次完善：

width="400" height="300">

</object>

优点：这方法没有embed，可以通过验证，浏览器兼容性也不错

缺点：

a.需要一个 holder swf 来加载你的目标 swf 以保证 IE 中的 stream 能力，如果你需要通过 flashvars 来传参，或者和页面的 JS 交互，会很麻烦。

b.ActiveX的虚框问题。

c.没有版本检测。

d.还是有少数用户代理（比如一些版本的 safari 和一些屏幕阅读器）不认这种方式，有 bug。

3. 双object

data="${contextPath}/flex/photo.swf" width="214" height="144">

<!--[if gte IE 6]>

<![endif]-->

</a>

</object>

</object>

4. flex提供的标准方法

<style>

body { margin: 0pxoverflow:hidden }

</style>

<!--

// -----------------------------------------------------------------------------

// Globals

// Major version of Flash required

var requiredMajorVersion = 9

// Minor version of Flash required

var requiredMinorVersion = 0

// Minor version of Flash required

var requiredRevision = 60

// -----------------------------------------------------------------------------

// -->

</script>

</head>

<!--

// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)

var hasProductInstall = DetectFlashVer(6, 0, 65)

// Version check based upon the values defined in globals

var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision)

if ( hasProductInstall &&!hasRequestedVersion ) {

// DO NOT MODIFY THE FOLLOWING FOUR LINES

// Location visited after installation is complete if installation is required

var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn"

var MMredirectURL = window.location

document.title = document.title.slice(0, 47) + " - Flash Player Installation"

var MMdoctitle = document.title

AC_FL_RunContent(

"src", "playerProductInstall",

"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",

"width", "100%",

"height", "100%",

"align", "middle",

"id", "ManagePlatform",

"quality", "high",

"bgcolor", "#869ca7",

"name", "ManagePlatform",

"allowScriptAccess","sameDomain",

"type", "application/x-shockwave-flash",

"pluginspage", "http://www.adobe.com/go/getflashplayer"

)

} else if (hasRequestedVersion) {

// if we've detected an acceptable version

// embed the Flash Content SWF when all tests are passed

AC_FL_RunContent(

"src", "ManagePlatform",

"width", "100%",

"height", "100%",

"align", "middle",

"id", "ManagePlatform",

"quality", "high",

"bgcolor", "#869ca7",

"name", "ManagePlatform",

"allowScriptAccess","sameDomain",

"type", "application/x-shockwave-flash",

"pluginspage", "http://www.adobe.com/go/getflashplayer"

)

} else { // flash is too old or we can't detect the plugin

var alternateContent = 'Alternate HTML content should be placed here. '

+ 'This content requires the Adobe Flash Player. '

+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>'

document.write(alternateContent)// insert non-flash content

}

// -->

</script>

id="ManagePlatform" width="100%" height="100%"

codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

width="100%" height="100%" name="ManagePlatform" align="middle"

play="true"

loop="false"

quality="high"

allowScriptAccess="sameDomain"

type="application/x-shockwave-flash"

pluginspage="http://www.adobe.com/go/getflashplayer">

</embed>

</object>

</noscript>

5. swfobject

http://code.google.com/p/swfobject/

<head>

<title>SWFObject 2 dynamic publishing example page</title>

swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf")

</script>

</head>

<body>

<h1>Alternative content</h1>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"

alt="Get Adobe Flash player" /></a></p>

</div>

</body>

</html>

6. 单embed显示 ie7和ff3下都能正常显示

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" quality="high" autostart="0" wmode="transparent" width="100%"

height="300" align="middle">

在做web开发中可能会遇到flash遮挡页面中元素的情况，无论怎么设置flash容器和层的深度(z-index)也无济于事，现有的解决方案是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”，但wmode属性到底是什么意义，为什么可以解决这个问题呢？window mode(wmode)wmode即窗口模式总共有三种，看看当年Macromedia官方的说法：Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don’t need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.window 模式默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。Opaque 模式这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。Transparent 模式透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。了解了各种模式的实现方式和意义在以后的开发中就可以按照具体情况选择设置wmode属性的值了。

你想在页面引用css或js的话

直接用<link href="css文件路径" type="text/css" rel="stylesheet" />

div+css布局如何插入视频的方法。

如下参考：

1.创建一个新的HTML文件test.html来解释div+CSS布局的基本过程。

2.在test.html文件中，设置正文的样式，将margin设置为0,padding设置为0，将text对齐到文本的中心。

3.在test.html文件中，为了便于解释，将所有div的高度设置为200px，内容的颜色设置为红色。

4.在test.html文件中，使用div创建页面的标题，使用margin:0auto设置divcenter，将其宽度设置为800px，背景颜色设置为灰色。

5.在test.html文件中，使用div创建页面的中间部分，使用margin:0auto设置divcenter，并将其宽度设置为800px。

6.在test.html文件中，在页面的中间创建两个div，将中间分成两个部分，每个部分的宽度为50%。左边部分使用float:left来设置左边的float，右边部分使用float:right来设置右边的float。

7.在test.html文件中，使用div创建页面的底部。使用clear:两者都清除上面div的浮动，以避免影响底部的布局。同时，使用margin:0auto来设置divcenter，宽度为800px，背景颜色为#000fff。

8.在浏览器中打开test.html文件，布局插入视频的问题就解决了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11632375.html

如何在网页中插入swf?

发表评论

评论列表（0条）