-- 精品下载 | 实用查询 | 词典查询 | 桌面壁纸 | 网址 | 笑话 | 小游戏 | 天气文章资讯 | 收录查询 | 证件办理 | 闪字生成 | 广告代码 | 在线手册 | 有问必答
您现在的位置: 蓝派网 >> 文章中心 >> 网页制作 >> 网页三剑客 >> 正文
站内文章搜索:           

flash影片web播放控制器制作祥解

作者:佚名    文章来源:网络    更新时间 :2007-5-30 9:07:44
在闪吧看到了这个flash播放器,想下载其源码下来研究已供自己使用,没想到闪吧已做禁止下载功能。费了几天的网上搜索,除了几篇相关资料外,没有源码下载,更没有实例讲解。受不住诱惑,只好自己参考资料亲手写了。这个flash影片播放控制器时用了闪吧的播放界面,程序代码完全亲手写上。


首先我们看看flash播放控制器的界面(很简单的html代码,不过不是自己源创的)

定义样式:


<style>
body,td,button{font:normal 12px Tahoma;color:#333333;text-align:center}
.drag{position:relative;cursor:hand}
button{border:1px solid #333333;background:#EEEEEE;margin:2px;font-family:Webdings;height:20px}
div{cursor:default}
#menu{margin:3;line-height:20px;border:1px solid #dedede;background:#FFFFFF;display:none;position:absolute}
#menu a:link,a:visited{border:1px solid #FFFFFF;background:#FFFFFF;text-decoration:none;display:block;padding:0 3;margin:1;color:#333333;cursor:default;text-align:left;text-indent:15px}
#menu a:hover{background:#dedede;border-color:#666666;color:#000000}
#ctlButtons IMG{behavior:url(rollover.htc)}
</style>
引用驱动程序:


<script src="play.js"></script>


以下是flash影片播放和控制界面代码:


<div oncontextmenu="return false" onselectstart="return false">
<div style="padding:0">
<table border="0" cellpadding="0" cellspacing="1" bgcolor="#000000"><tr><td>
<object id="movie" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" align="middle">
<param name="movie" value="about:blank" />
<param name="quality" value="high" />
</object>
</td></tr></table>

<table style="width:550px;height:35px;vertical-align:bottom" cellspacing="0" cellpadding="0" border="0">
   <tr>
      <td style="">
         <table style="border:0px solid #333333;width:90%;" cellpadding="1" cellspacing="0">
            <tr>
               <td style="text-align:left;vertical-align:left;background:url(bg.gif);height:8px" onMouseDown="Jump(total*event.offsetX/421|0)">
                  <div id="bar" style="width:0%;font:3px;height:3px;background:#00FF44"></div>
               </td>
            <tr>
         </table>
      </td>
      <td style="text-align:right;width:50px;font:11px Tahoma" id="frameCount"></td>
   </tr>
</table>
<span id="ctlButtons">
<img onClick="Rewind();" title="跳至第一帧" text="9" src="images/button/dd1.gif" hoverSrc="images/button/hh1.gif">
<img onClick="Back();" title="快退" text="7" src="images/button/dd2.gif" hoverSrc="images/button/hh2.gif">
<img onClick="Play();" title="播放" text="4" src="images/button/dd3.gif" hoverSrc="images/button/hh3.gif">
<img onClick="Pause();" title="暂停" text=";" src="images/button/dd4.gif" hoverSrc="images/button/hh4.gif">
<img onClick="Stop();" title="停止" text="<" src="images/button/dd5.gif" hoverSrc="images/button/hh5.gif">
<img onClick="Forward();" title="快进" text="8" src="images/button/dd6.gif" hoverSrc="images/button/hh6.gif">
<img onClick="GoToEnd();" title="跳至最末帧" text=":" src="images/button/dd7.gif" hoverSrc="images/button/hh7.gif">
<img onClick="Replay();" title="重放" text="q" src="images/button/dd8.gif" hoverSrc="images/button/hh8.gif">
<img onClick="showMenu(menu);" title="打开 Flash 文件" text="5" src="images/button/dd9.gif" hoverSrc="images/button/hh9.gif">
<input type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()"></span>
<div id="menu" onClick="this.style.display=''none''">
<a href="打开指定URL" onClick="OpenRemoteSwf();return false">打开指定URL</a>
<a href="选择本地文件" onClick="selectMovie();return false">选择本地文件</a>
<a href="选择本地文件" onClick="alert(''Wren FLash Player 1.0 Preview\nCopyright (C) WRen.Cn'');return false">关于Wren Flash Player</a>
</div></div>


运行播放器的驱动程序:


<script defer>
var movie=document.getElementById("movie");
loadSWF("http://down.wren.cn/flash/navigation_68.swf","600","400"); //loadSWF("flash地址","宽度","高度")
</script>



下面看看我写的驱动程序代码,保存为play.js:


var total;//定义flash影片总桢数
var frame_number;//定义flash影片当前桢数

//以下是滚动条图片拖动程序
var dragapproved=false;
var z,x,y
//移动函数
function move(){
if (event.button==1&&dragapproved){
y=temp1+event.clientX-x;
//以下是控制移动的范围
if(y<0)
   y=0;
if(y>420)
   y=420;

z.style.pixelLeft=y
movie.GotoFrame(y/420*total);//移动到某一位置,flash影片播放到某个位置
return false
}
}
//获得拖动前初始数据的函数
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
x=event.clientX
document.onmousemove=move
}
}

//动态显示播放影片的当前桢/总桢数
function showcount(){
   frame_number=movie.CurrentFrame();
   frame_number++;
   frameCount.innerText=frame_number+"/"+movie.TotalFrames;
   element.style.pixelLeft=420*(frame_number/movie.TotalFrames);//滚动条图片随之到相应的位置
   if(frame_number==movie.TotalFrames)
      clearTimeout(tn_ID);
   else
      var tn_ID=setTimeout(''showcount();'',1000);
}
//使影片返回第一帧
function Rewind(){
   if(movie.IsPlaying()){
   Pause();
   }
   movie.Rewind();
   element.style.pixelLeft=0;
   frameCount.innerText="1/"+total;
}
//播放影片
function Play(){
   movie.Play();
   showcount();
}
//暂停播放
function Pause(){
   movie.StopPlay();
}

//跳至最末帧
function GoToEnd(){
   if(movie.IsPlaying())
      Pause();
   movie.GotoFrame(total);
   element.style.pixelLeft=420;
   frameCount.innerText=total+"/"+total;
}
//快退影片
function Back()
{
   if(movie.IsPlaying())
      Pause();
   frame_number=frame_number-50;
   movie.GotoFrame(frame_number);
   Play();
}
//快进影片
function Forward()
{
   if(movie.IsPlaying())
      Pause();
   frame_number=frame_number+50;
   movie.GotoFrame(frame_number);
   Play();
}
//重新播放影片
function Replay(){
   if(movie.IsPlaying()){
   Pause();
   movie.Rewind();
   Play();
   }
   else
   {
   movie.Rewind();
   Play();   
   }
}
//停止播放影片返回到第一桢
function Stop(){
   if(movie.IsPlaying()){
   Pause();
   movie.Rewind();
   }
   else
   {
   movie.Rewind();
   }
}
//显示影片载入进度,完全载入后控制按钮可用
function jindu(){
   var in_ID;
   bar.style.width=Math.round(movie.PercentLoaded())+"%";
   frameCount.innerText=Math.round(movie.PercentLoaded())+"%";
   if(movie.PercentLoaded() == 100){
      ctlButtons.document.all.tags(''IMG'')[0].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[1].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[2].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[3].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[4].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[5].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[6].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[7].disabled=false;
      ctlButtons.document.all.tags(''IMG'')[8].disabled=false;
      total=movie.TotalFrames;
      frame_number++;
      frameCount.innerText=frame_number+"/"+total;
      bar.style.background="";
      //bar.style.width="0%"
      bar.innerHTML=''<img src="images/button/posbar1.gif" style="cursor:hand;border:0;" id="element" class="drag" onMouseOver="fnonMouseOver()" onMouseOut="fnonMouseOut()">'';
      document.onmousedown=drags
      document.onmouseup=new Function("dragapproved=false;Play()")
      showcount();
      clearTimeout(in_ID);
   }
   else
      in_ID=setTimeout("jindu();",1000);
}

//开始载入flash影片,载入过程中,播放控制按钮不可用
function loadSWF(fsrc,fwidth,fheight){
   movie.LoadMovie(0, fsrc);
   movie.width=fwidth;
   movie.height=fheight;
   ctlButtons.document.all.tags(''IMG'')[0].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[1].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[2].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[3].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[4].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[5].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[6].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[7].disabled=true;
   ctlButtons.document.all.tags(''IMG'')[8].disabled=true;

   frame_number=movie.CurrentFrame();
   jindu();
}
//显示层函数
function showMenu(menu){
menu.style.display=''block'';
}

//鼠标点击滚动条上的位置,影片相应播放到那个位置
function Jump(fnume){
   if(movie.IsPlaying()){
   Pause();
   movie.GotoFrame(fnume);
   Play();
   }
   else
   {
   movie.GotoFrame(fnume);
   Play();
   }
}

//以下两个函数是图片切换函数
function fnonMouseOver(){
   element.src = "images/button/posbar.gif";
}

function fnonMouseOut(){
   element.src = "images/button/posbar1.gif";
}


以上代码,我们仔细研究后会发现其实很简单,不过却费了我很大精力。欢迎大家继续在此基础上改进,增添新的功能。

附可控制Flash Player的javascript方法。

一览表:
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的指定属性


以上代码,我们仔细研究后会发现其实很简单,不过却费了我很大精力。欢迎大家继续在此基础上改进,增添新的功能。

附可控制Flash Player的javascript方法。

一览表:
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的指定属性


发表评论】【打印此文】【关闭窗口】【点击数:
网友评论: