zoukankan      html  css  js  c++  java
  • 页面中插入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             "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="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

  • 相关阅读:
    java.util.ConcurrentModificationException故障分析
    Eclipse常见问题总结-持续更新
    MySQL学习—简单存储过程
    Mysql学习——触发器
    MySQL学习—多表查询(内连接,外链接,全连接)
    JDK环境变量配置
    Spring学习总结(二)——容器对Bean的管理
    Spring学习总结(一)——Spring容器的实例化
    类加载机制
    手写数据库连接池
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/4748293.html
Copyright © 2011-2022 走看看