页面中插入flash,并且给flash添加单击事件控制播放,以及获取相关参数.
1 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" 2 codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="swf"> 3 <param name="movie" value="1.swf"> 4 <param name="quality" value="high"> 5 <param name="bgcolor" value="#F0F0F0"> 6 <param name="menu" value="false"> 7 <param name="wmode" value="opaque"> 8 <param name="FlashVars" value=""> 9 <param name="allowScriptAccess" value="sameDomain"> 10 <param name="loop" value="false"> 11 <param name="play" value=""false""> 12 <embed name="swf" src="1.swf" 13 width="100%" height="100%" 14 align="middle" 15 quality="high" 16 menu="false" 17 play="false" 18 loop="false" 19 FlashVars="" 20 wmode="opaque" 21 allowScriptAccess="sameDomain" 22 type="application/x-shockwave-flash" 23 pluginspage="http://www.adobe.com/go/getflashplayer"> 24 </embed> 25 </object>
参数介绍:
calssid-设置浏览器的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 影片隐藏了所有在它后面的内容。(可以处理flash遮住html元素.)
·transparent 使flash影片透明，显示透明影片后面的网页内容。这将会降低动画的性能。而且这个属性不是在所有浏览器中都可用的。
·BGCOLOR - （#RRGGBB, 十六进制RGB值。）指定影片的背景颜色。使用这个属性覆盖flash中设定的背景颜色。
·BASE - 设定基准目录或URL，用来解决所以flash中的相对路径。类似网页中的<base>标签。
·FLASHVARS 传递变量到flash player，需要flash player6及以后的版本。
·传递root级变量到影片。字符串的格式是用“&”分隔的name=value集。
1 <input type="button" value="播放SWF" id="playSWF"> 2 <script type="text/javascript"> 3 var btn=document.getElementById("playSWF"); 4 btn.onclick=function(){ 5 document.swf.Play(); 6 } 7 </script>
下面是JS控制flash的一些方法：
Play() ---------------------------------------- 播放动画
StopPlay()------------------------------------停止动画
IsPlaying()----------------------------------- 动画是否正在播放
GotoFrame(frame_number)---------------- 跳转到某帧
TotalFrames()------------------------------- 获取动画总帧数
CurrentFrame()------------------------------回传当前动画所在帧数-1
Rewind()-------------------------------------使动画返回第一帧
SetZoomRect(left,top,right,buttom)-------放大指定区域
Zoom(percent)------------------------------改变动画大小
Pan(x_position,y_position,unit)------------使动画在x,y方向上平移
PercentLoaded()----------------------------返回动画被载入的百分比
LoadMovie(level_number,path)----------- 加载动画
TGotoFrame(movie_clip,frame_number)- movie_clip跳转到指定帧数
TGotoLabel(movie_clip,label_name)------ movie_clip跳转到指定标签
TCurrentFrame(movie_clip)--------------- 回传movie_clip当前帧-1
TCurrentLabel(movie_clip)-----------------回传movie_clip当前标签
TPlay(movie_clip)---------------------------播放movie_clip
TStopPlay(movie_clip)----------------------停止movie_clip的播放
GetVariable(variable_name)-----------------获取变量
SetVariable(variable_name,value)-----------变量赋值
TCallFrame(movie_clip,frame_number)---call指定帧上的action
TCallLabel(movie_clip,label)----------------call指定标签上的action
TGetProperty(movie_clip,property)--------获取movie_clip的指定属性
TSetProperty(movie_clip,property,number)-设置movie_clip的指定属性
其中TGetProperty 和 TSetProperty 的属性是使用数字0-18来获取的，下面是各数字代表的属性：
属性 作用 数字 使用方式
X Position X坐标 0 Get,Set
Y Position Y坐标 1 Get,Set
X Scale X方向缩放比率 2 Get,Set
Y Scale Y方向缩放比率 3 Get,Set
CurrentFrame movie_clip当前所在帧数 4 Get
TotalFrames movie_clip总帧数 5 Get
Alpha movie_clip的透明度 6 Get,Set
Visibility movie_clip是否可见 7 Get,Set
Width movie_clip的宽度 8 Get
Height movie_clip的高度 9 Get
Rotation movie_clip的旋转度 10 Get,Set
Target movie_clip的路径 11 Get
Framesloaded movie_clip已载入的帧数 12 Get
Name movie_clip的实体名字 13 Get,Set
DropTarget movie_clip的拖拽 14 Get
Url 包含movie_clip的动画的url 15 Get
HighQuality 设置画面质量为高质量 16 Get,Set
FocusRect 显示按钮边框 17 Get,Set
SoundBufTime 预设声音缓冲时间 18 Get,Set
flash调用js:
可以使用fscommand来调用js，但使用getUrl方面更为的方便，比如:getURL("BLOCKED SCRIPTalert('"+ message+ "')");就可以使用js的alert的方法作为调试使用．
根据以上情况对flash使用做简单的封装.
player.js:
1 (function($){ 2 var defaults={ 3 src:"", 4 id:"flashId", 5 width:"100%", 6 height:"100%" 7 } 8 function getHtml(param){ 9 var html='<object id="'+param.id+'" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="'+param.width+'" height="'+param.height+'" '; 10 html+=' codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">'; 11 html+='<param name="movie" value="'+param.url+'">'; 12 html+='<param name="quality" value="high">'; 13 html+='<param name="bgcolor" value="#F0F0F0">'; 14 html+='<param name="menu" value="false">'; 15 html+='<param name="wmode" value="opaque">'; 16 html+='<param name="FlashVars" value="">'; 17 html+='<param name="allowScriptAccess" value="sameDomain">'; 18 html+='<param name="loop" value="false">'; 19 html+='<param name="play" value=""false"">'; 20 html+='<embed name="swf" src="'+param.url+'" '; 21 html+=' width="'+param.width+'" height="'+param.height+'" '; 22 html+=' align="middle" '; 23 html+=' quality="high" '; 24 html+=' menu="false" '; 25 html+=' play="false" '; 26 html+=' loop="false" '; 27 html+=' FlashVars="" '; 28 html+=' wmode="opaque" '; 29 html+=' allowScriptAccess="sameDomain" '; 30 html+=' type="application/x-shockwave-flash" '; 31 html+=' pluginspage="http://www.adobe.com/go/getflashplayer">'; 32 html+='</embed>'; 33 html+='</object>'; 34 35 html+='<div class="playBtn"></div>'; 36 html+='<div class="playBar">'; 37 html+='<p class="currentAddress"></p>'; 38 html+='</div>'; 39 return html; 40 } 41 function getTimer(obj){ 42 var total=obj.TotalFrames(); 43 var current=obj.CurrentFrame(); 44 return current/total*100; 45 } 46 47 48 $.fn.player=function(opts){ 49 opts=$.extend({},defaults,opts); 50 this.each(function(){ 51 var play=false; 52 var obj=$(this); 53 var timer=null; 54 obj.addClass("playerBox").html(getHtml(opts)); 55 $(".playBtn",obj).click(function(){ 56 play=!play; 57 console.log(document[opts.id]) 58 if(play){ 59 $("embed",obj).get(0).Play(); 60 timer=setInterval(function(){ 61 $(".currentAddress",obj).css("width",getTimer($("embed",obj).get(0))+"%"); 62 },20); 63 64 }else{ 65 $("embed",obj).get(0).StopPlay(); 66 clearInterval(timer); 67 } 68 }); 69 }); 70 } 71 72 })(jQuery);
player.css
1 @charset "utf-8"; 2 .playerBox{ 3 position:relative; 4 } 5 .playerBox .playBar, 6 .playerBox .playBtn{ 7 display:none; 8 } 9 .playerBox:hover .playBar, 10 .playerBox:hover .playBtn{ 11 display:block; 12 } 13 .playerBox .playBtn{ 14 width:50px; 15 height:50px; 16 background-image:url(playbtn.png); 17 background-repeat:no-repeat; 18 position:absolute; 19 margin-left:-25px; 20 margin-top:-25px; 21 cursor:pointer; 22 top:50%; 23 left:50%; 24 } 25 .playerBox .playBar{ 26 position:absolute; 27 bottom:10px; 28 box-shadow:0px -1px 3px yellow; 29 border:1px solid #ccc; 30 height:10px; 31 left:5px; 32 background-color:#dcdcdc; 33 right:5px; 34 border-radius:5px; 35 cursor:pointer; 36 } 37 .playerBox .currentAddress{ 38 padding:0; 39 margin:0; 40 height:10px; 41 background-color:#6c6d6e; 42 width:50%; 43 }
index.html:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>封装flash</title> 6 <link rel="stylesheet" type="text/css" href="player.css" /> 7 <script type="text/javascript" src="jquery-1.11.1.js"></script> 8 <script type="text/javascript" src="player.js"></script> 9 10 </head> 11 12 <body> 13 <div class="test" style="width:500px;height:400px;"></div> 14 <script type="text/javascript"> 15 $(function(){ 16 $(".test").player({id:"gysId",url:"1.swf"}); 17 }); 18 19 </script> 20 21 22 </body> 23 </html>
后补:今天发现,原来这些工作都是有这个插件做了,我还在傻逼逼的封装.
http://jquery.thewikies.com/swfobject/examples
