如何使用swfobject(中文版)

xiaoxiao2021-02-28  163

1.SWFObject是什么? SWFObject 2提供两种优化flash播放器的嵌入方法:基于标记的方法和依赖于js的方法。SWFObject 2提供一个js的API,为嵌入SWF文件和获取Flash播放器的相关信息提供了一个完整的工具箱。只用了一个很小的js文件 (10Kb / GZIPed: 3.9Kb)。SWFObject 1.5, UFO and the Adobe Flash Player Detection Kit的继承者。拟统一所有现有的Flash播放器的嵌入方法,并提供了嵌入Adobe Flash Player内容新的标准 2.我们为什么要用SWFObject? 比现在其他的flash嵌入方式要灵活和更加优化。给任何人提供了解决方案:不管你是html开发者还是flash或者js开发者,都有对应的方法可用。打破了设定在供应商特定的标记,促进web标准和替代内容的使用。使用不显眼的JavaScript和JavaScript最佳实践。容易使用。 3.为什么SWFObject使用JavaScript?       SWFObject使用js来克服那些单独用标记无法解决的问题: 检测Flash播放器版本,并确定是否应该显示Flash内容或替代内容,以避免过时的Flash插件让Flash内容无法显示。万一flash插件版本太低,通过dom操作可以显示默认的替换内容,给用户提供信息。(注意:如果flash插件没有安装,dom对象元素自动会显示替代内容)提供选项,用于快速安装的Adobe下载最新的Flash Player提供一个JavaScript API来执行常见的Flash播放器和Flash内容相关的任务

 

4.我应该使用静态的还是动态的方法发布?       SWFObject2提供两种不同的方法来嵌入Flash Player内容:    静态发布的方法用标准的标记嵌入flash内容和替代元素,并使用js来解决那些单独用标记无法解决的问题。动态发布方法是基于标记的替代内容,通过js用flash来替换替代内容,前提是当前flash版本和js支持(像之前的 SWFObject版本和UFO)。静态发布的优势: 促进实际制作符合标准的标记最佳嵌入性能嵌入Flash内容的机制,不依赖于脚本语言,所以flash内容可以被更多的人看到(兼容性更好) 如果你有Flash插件安装,但已禁用JavaScript或使用的浏览器不支持JavaScript,您将仍然能够看到你的Flash内容flash可以运行在对js支持非常糟糕的设备上,比如sony的psp。RSS阅读器等自动化工具能够抓到Flash内容 动态发布的优势: 它与脚本的应用程序很好地集成在一起,能够使动态变量(flashvars) 它避免了点击激活机制激活活动内容在Internet Explorer6/7和Opera9+。请注意,微软已经淘汰了其Internet Explorer浏览器的最活跃的内容 5.如何使用SWFObject的静态方法嵌入Flash Player内容?    步骤1:使用符合标准的标记嵌入Flash内容和替代内容   SWFObject的基础标记使用嵌套对象的方法(用专有的IE条件注释),确保仅标记手段的最优化跨浏览器支持,而作为符合标准和配套的替代内容。 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 3 <head> 4 <title>SWFObject - step 1</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 </head> 7 <body> 8 <div> 9 10 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> 11 <param name="movie" value="myContent.swf" /> 12 <!--[if !IE]>--> 13 <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> 14 <!--<![endif]--> 15 <p>Alternative content</p> 16 <!--[if !IE]>--> 17 </object> 18 <!--<![endif]--> 19 </object> 20 21 </div> 22 </body> 23 </html>   注:嵌套对象方法需要一个双对象定义(外部对象针对Internet Explorer和内针对所有其他的浏览器的对象),你需要定义你的对象属性和嵌套的param元素两次。      需要的属性: classid(只用于外层元素,值一直是: clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)type(只用于内层元素,值一直是: application/x-shockwave-flas)data(只用于内层元素,定义swf的路径:data="myContent.swf")width(定义swf的宽度,内外都用到)height(定义swf的高度,内外都用到)   需要的参数: movie(只用于内层元素,定义swf的路径:<param name="movie" value="myContent.swf" />注意:我们建议不要使用codebase属性指向Adobe Flash插件安装程序的URL的服务器,因为这样是违法的,他限定了只能当前域来访问。我们建议在替代内容中放一个提示信息,这样用户会有更好的体验而不是下载flash。   你怎么使用HTML来配置你的Flash内容?   你能在标签中加下面的属性: idnameclassalign 

  你能使用下面的参数:

playloopmenuqualityscalesalignwmodebgcolorbaseswliveconnectflashvarsdevicefont (more info)allowscriptaccess (more info here and here)seamlesstabbing (more info)allowfullscreen (more info)allownetworking (more info)   为什么你应该使用替代内容?   对象元素允许你在他里面放替换元素,在flash没有安装或者不被支持的时候会显示。他的内容同样也会被搜索引擎抓到,他是一个 用于创建搜索引擎友好的内容的非常好的工具。总而言之,你应该使用替换内容,当你想让你创建的内容可以被没有装插件的用户访问,对搜索引擎友好,告诉访问者对应提示,这样会有更好的用户体验而不是直接去下载插件。 步骤2:包括JavaScript库在你的HTML页面的头部   SWFObject库是一个外部JavaScript文件。SWFObject一被加载就会被执行,一但dom元素加载完了就会执行dom操作,所有浏览器都支持他(   IE, Firefox, Safari and Opera 9+ ),或者是onload事件被触发。 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 3 <head> 4 <title>SWFObject - step 2</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 7 <script type="text/javascript" src="swfobject.js"></script> 8 9 </head> 10 <body> 11 <div> 12 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420"> 13 <param name="movie" value="myContent.swf" /> 14 <!--[if !IE]>--> 15 <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420"> 16 <!--<![endif]--> 17 <p>Alternative content</p> 18 <!--[if !IE]>--> 19 </object> 20 <!--<![endif]--> 21 </object> 22 </div> 23 </body> 24 </html>

步骤3:用SWFObject库注册您的Flash内容,告诉SWFObject做什么

首先添加一个唯一的ID外部对象标记定义您的Flash内容,第二添加swfobject.registerObject的方法: 第一个参数(字符串,必需)指定标记中使用的ID。第二个参数(字符串,必需)指定了你内容发布所需要的flash版本。它会激活Flash版本检测,以确定是否显示Flash内容或通过dom操作强制显示替代内容。Flash的版本号通常由major.minor.release.build四部分组成,但是SWFObject只识别前三个数字,所以 "WIN 9,0,18,0" (IE) 或者 "Shockwave Flash 9 r18" (其他浏览器)都会被翻译成 "9.0.18". 如果你只想测试主要版本,你可以省略次要和发行版本号,如“9”,而不是“9.0.0”。第三个参数(字符串,可选),可用于启动Adobe快速安装,并指定您的快速安装SWF文件的URL。快速安装会显示一个标准化的Flash插件下载对话框来替代你的Flash内容,当所需的插件版本不可用。一个默认的expressInstall.swf文件被一起打包在项目中。它也包含了相应的expressInstall.fla和AS文件(在SRC目录),让你创建自己的自定义快速安装体验。请注意,快速安装只会触发一次(他第一次被调用),他只被支持在win平台和mac平台的 Flash Player 6.0.65以上的版本,他会要求一个最小的尺寸是  310x137px。第四个参数(js函数,可选)用来定义一个回调函数,当插件创建成功或者失败都可以调用该函数来处理一些事。 1 <script type="text/javascript"> 2 swfobject.registerObject("myId", "9.0.115", "expressInstall.swf"); 3 </script> 小提示: 用SWFObject HTML和js生成器来帮助你编写代码。重复步骤1和3,把多个SWF文件嵌入到一个HTML页面引用活动对象元素的最简单的方法是使用JavaScript API:swfobject.getObjectById(objectIdStr 6.如何使用SWFObject的动态方法嵌入Flash Player内容? 步骤1:使用符合标准的标记,创建替代内容   SWFObject动态嵌入的方法遵循渐进增强的原则,当有足够的js和flash插件支持的时候会用flash替代替换的内容。首先定义替代的内容,用一个id标记他。 步骤2:包括JavaScript库在你的HTML页面的头部   SWFObject库是一个外部JavaScript文件。SWFObject一被加载就会被执行,一但dom元素加载完了就会执行dom操作,所有浏览器都支持他(   IE, Firefox, Safari and   Opera 9+ ),或者是onload事件被触发。 步骤3:用JavaScript嵌入你的SWF   swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)有5个必须的参数和5个可选的参数。 swfUrl (字符串, 必须) 指定您的SWF的URLid (String, required) 指定包含替换元素的html元素的ID,能用你的flash的内容来替换width (String, required) 指定SWF的宽度height (String, required) 指定SWF的高度version (String, required)指定SWF 发布所需的flash播放器的版本 (格式 is: "major.minor.release" or "major")expressInstallSwfurl (String, optional)指定快速安装的路径,激活快速安装. 请注意,快速安装只会触发一次(他第一次被调用),他只被支持在win平台和mac平台的 Flash Player 6.0.65以上的版本,他会要求一个最小的尺寸是  310x137px。flashvars (Object, optional) 指定需要传递给flash的变量(用键值对)params (Object, optional) 指定嵌入对象的参数(用键值对)attributes (Object, optional) 指定对象的属性(用键值对)callbackFn (JavaScript function, optional)能定义一个回调函数,不管调用flash创建成功或者失败都可以调用该函数 小提示: 您可以省略可选参数,只要你不破坏参数顺序。如果你不想使用某个参数但是想使用他下一个参数,可以把他的值设置为false,对于flashvars, params and attributes对象,也可以直接用空值{}。 如何配置flash?   您可以添加以下经常使用的可选属性的对象元素: id (NOTE: 如果没有定义会自动取替换元素容器的id)alignnamestyleclass (see note about class)class 注意:class是 ECMA4中保留的关键字,在ie中会报错,除非用引号把它括起来   (e.g. "class" or 'class') 。 出于这个原因,swfobject的提供作为一种安全的替代语法类的styleClass关键字,如果你使用的styleClass,swfobject的会自动插入class。 1 var attributes = { 2 id: "myId", 3 align: "left", 4 styleclass: "myclass" 5 }; 如果你宁愿用class代替styleClass,那么用引号括起来。 1 var attributes = { 2 id: "myId", 3 align: "left", 4 "class": "myclass" 5 }; 你能使用下面可选的flash指定的参数: playloopmenuqualityscalesalignwmodebgcolorbaseswliveconnectflashvarsdevicefont (more info)allowscriptaccess (more info here and here)seamlesstabbing (more info)allowfullscreen (more info)allownetworking (more info) 如何使用JavaScript对象来定义 flashvars, params and object's attributes?   最好使用对象表示法来定义对象:   1 <script type="text/javascript"> 2 3 var flashvars = {}; 4 var params = {}; 5 var attributes = {}; 6 7 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 8 9 </script> 可以用键值对的方式写: 1 var flashvars = { 2 name1: "hello", 3 name2: "world", 4 name3: "foobar" 5 }; 也可以用".属性"的方式写: 1 var flashvars = {}; 2 flashvars.name1 = "hello"; 3 flashvars.name2 = "world"; 4 flashvars.name3 = "foobar"; 也可以直接把参数内容加载swfobject.embedSWF()中。 1 <script type="text/javascript"> 2 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"}); 3 </script> 如果你不想使用一个可选的参数,你可以把它定义为false或一个空对象  var flashvars = false; var params = {}; FlashVars的对象是一个速记符号,为您的易用性。你可以忽略它,通过 params对象来指定你的flashvars。 1 <script type="text/javascript"> 2 var flashvars = false; 3 var params = { 4 menu: "false", 5 flashvars: "name1=hello&name2=world&name3=foobar" 6 }; 7 var attributes = { 8 id: "myDynamicContent", 9 name: "myDynamicContent" 10 }; 11 swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); 12 </script> 从SWFObject 1.5 迁移到 SWFObject 2 的注意点 SWFObject 2不能向后兼容到SWFObject 1.5目前首选在你的HTML页面的头部插入所有脚本块,增加到页面body中可能会产生冲突(比如flash替代替换内容),因为js代码执行被延后了。库本身都是用小写的:swfobject,而不是SWFObject方法只能通过库访问此外,JavaScript API是完全不同的和更复杂的SWFObject 2替换整个替换标签的内容,包括所引用的HTML容器元素,成为flash内容,只要js可用,flash版本支持。然而, SWFObject 1.5只替换替换表情容器内的内容。如果你没有定义一个id属性,对象元素会自动继承包含元素中的id。 从UFO迁移到SWFObject 1.5 的注意点 SWFObject 2替换整个替换标签的内容,包括所引用的HTML容器元素,成为flash内容,只要js可用,flash版本支持。然而, UFO只替换替换表情容器内的内容。如果你没有定义一个id属性,对象元素会自动继承包含元素中的id。UFO's setcontainercss 特征在 SWFObject 2 中没有被纳入。

SWFObject 2是不是支持MIME type application/xhtml+xml?

SWFObject的2不支持XML MIME类型,这是一个设计决定。 有以下原因: 只有很少(不显着)web开发者使用我们不能确定它走的方向,ie不支持他,其它主要浏览器厂商都瞄准了一个新的html解析的标准(html5),他与当前w3c解析的方式不同。不支持他我们节省了大量的文件和努力。

参考:https://code.google.com/p/swfobject/wiki/api

学透前端行业所有技术,玩遍北京周边所有城市。然后我会回到那个生我养我的地方,因为有亲人的地方才是家。
转载请注明原文地址: https://www.6miu.com/read-20259.html

最新回复(0)