Flash播放器( Web 版)

解决思路  
用HTML方法来控制Flash的播放我们在第三章已经很细致的介绍过了,如果我们学会了其中的思想(用javascript和id属性等等),剩下的仅仅就是方法的函数而已,所以请大家在进行本章学习之前再适当的复习一下第三章的内容。  

具体步骤  
先要明白一个播放器有哪些基本功能:  
首先是插入 Flash 的代码:  

<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="150" height="100" id="demo" align="middle">  
<param name="allowScriptAccess" value="sameDomain" />  
<param name="movie" value="demo.swf" />  
<param name="menu" value="false" />  
<param name="quality" value="high" />  
<param name="bgcolor" value="#000000" />  
<embed src="demo.swf" menu="false" quality="high" bgcolor="#000000" width="150" height="100" name="movie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>  

下面的功能控制对象都是基于这个 id 为 movie 的 Flash 对象  

1.播放  
Play  
语法:Play()    
描述:开始播放动画  
例:  

<button onClick="movie.Play()">播放</button>  

2.停止  
StopPlay  
语法:StopPlay()        
描述:停止播放动画  
例:  

<button onClick="movie.StopPlay()">停止</button>  

3.暂停  
因为没有 Pause (暂停)这个方法,需要由 IsPlaying 、Play 和 StopPlay 三个方法协作。  
IsPlaying  
语法: IsPlaying()      
描述:如果动画当前正在播放,返回为 true,反之返回 false  
例:  

<button onClick="with(movie)IsPlaying()?StopPlay():Play()">暂停</button>  

4.快进  
GotoFrame  
语法: GotoFrame( frameNumber )    
描述:激活在当前动画中由 frameNumber 指定的帧数。如果被请求帧的数据尚未利用,播放器会转向最后的可用帧然后停止,在回放中导致意想不到的结果。使用 PercentLoaded() 方法测定动画中是否有足够的可用帧来执行 GotoFrame() 方法。参数 frameNumber 是基于零的,也就是说,动画中的第一帧的 frameNumber 是 0,第二帧是 1。参数类型是整数。  
例:  

<button onClick="movie.GotoFrame(30)">跳到第31帧</button>  

快进的实现就是方法,就是每隔 1 秒用 GotoFrame 方法使 Flash 跳到到指定帧:  

<button onClick=’setInterval("movie.GotoFrame(Math.round(movie.FrameNum+movie.TotalFrames/20))",1000)’>快进</button>  

代码的意思是使 Flash 以每秒总帧数的二十分之一的速度递增,Math.round( Number ) 方法是将 Number 四舍五入取整。  
FrameNum 取得 Flash 当前播放到的帧数,TotalFrames 取得 Flash 的总帧数。  

5.快退  
跟快进类似,让 Flash 每隔 1 秒钟用 GotoFrame 方法使 Flash 跳到到指定帧:  

<button onClick=’setInterval("movie.GotoFrame(Math.round(movie.FrameNum-movie.TotalFrames/20))",1000)’>快退</button>  

7. 跳到末帧  
没有直接的方法,但可以用 GotoFrame 方法加上 TotalFrames 控制:  

<button onClick="movie.GoToFrame(movie.TotalFrames-1)">跳到末帧</button>  

6.重绕  
Rewind  
语法:Rewind()        
描述:转到第一帧  
例:  
<button onClick="movie.Rewind()">重绕</button>  

9. 下载进度显示  

<table style="border:1px solid #333333;width:500px"  
cellpadding="0" cellspacing="1" height="5">  
<tr><td>  
<table cellspacing="0" cellpadding="0" bgColor="#00FF44" id="bar" style="width:0%" height="3"><tr><td></td></tr></table>  
</td></tr>  
</table>  
<script defer>  
function loaded(){  
        var movie=document.getElementById("movie")  
        if(movie.PercentLoaded()!=100)  
        setTimeout("loaded()",100)  
        bar.style.width=movie.PercentLoaded()+"%"  
}  
loaded()  
</script>  


10.播放进度显示  

<table style="border:1px solid #333333;width:500px"  
cellpadding="0" cellspacing="1" height="5">  
<tr><td>  
<table cellspacing="0" cellpadding="0" bgColor="#00FF44" id="bar"  
style="width:0%" height="3"><tr><td></td></tr></table>  
</td></tr>  
</table>  
<script for=window event=onload>  
setInterval("bar.style.width=Math.round(movie.currentFrame()*100/movie.totalFrames)",30)  
</script>  

11.播放本地 Flash 文件  
LoadMovie  
语法: LoadMovie( layerNumber, url )    
描述:从指定URL加载动画到 layerNumber (层数)指定的层中。参数类型,layerNumber:整数,url :字符串  
例:  

movie.LoadMovie(0, "demo1.swf")  

完整代码:  

<script>  
function selectMovie(){  
    document.getElementById("moviefile").click()  
}  

function loadMovie(){  
    var file=event.srcElement.value  
    if(/\w\.swf$/.test(file))   {  
    movie.LoadMovie(0,file)  
    }  
    else alert("文件格式错误,请重新选择")  
}  
</script>  
<button onClick="selectMovie()" title="打开 Flash 文件">打开文件</button><input type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()">  

各功能都能单独实现,现在可以把它们合起来:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>Flash Player</title>  
<script language="JavaScript">  
var movie,timer,step,total,state=null,delay=100  
function init(){//在 Flash 加载完成后初始化相关变量的函数  
/*捕获 id 为 movie 的对象,若要兼容NS,  
可用 window.document.movie 代替*/  
movie=document.getElementById("movie")  
//每 delay 毫秒执行一次 showStatus() 函数  
    timer=setInterval("showStatus()",delay)  
        total=movie.TotalFrames            //获取 Flash 的总帧数  
        step=total/50|0                    //快进快退时的步长  
    buttonState(false) //调用 buttonState() 函数,设置控制按钮可用  
     movie.width=Math.min(movie.TGetProperty("_level0",8),document.body.clientWidth-25)//设置 Flash 的宽  
//设置 Flash 的高  
    movie.height=movie.TGetProperty("_level0",9)  
}  

function Rewind(){  
        movie.Rewind()    //使 Flash 返回到第一帧  
}  

function Back(){//控制快退的函数  
//如果当前帧数不为 0 并且 Flash 不处于快进状态  
    if(movie.FrameNum!=0&&state!="forward"){  
        state="back"      //设置状态变量为 back  
        Quick()           //调用实现快进快退的 Quick() 函数  
// delay 毫秒后再次执行 Back() 函数,以实现不断快退的效果  
    setTimeout("Back()",delay)  
        }  
        else state=null   //快退完成后设置状态变量 state 为 null  
}  

function Play(){  
        movie.Play()  //播放 Flash  
}  

function Pause(){  
/*如果 Flash 正在播放,就调用 Flash 的 StopPlay() 方法使之停止播放,  
否则调用 Flash 的 Play() 方法使之播放*/  
    with(movie)IsPlaying()?StopPlay():Play()  
}  

function Stop(){  
        movie.StopPlay()        //停止播放 Flash  
}  

function Forward(){  
//如果当前帧数不在最后一帧并且 Flash 不处于快退状态  
    if(movie.FrameNum!=total-1&&state!="back"){  
        state="forward"   //设置状态变量为 back  
        Quick()           //调用实现快进快退的 Quick() 函数  
// delay 毫秒后再次执行 orward() 函数,以实现不断快进的效果  
    setTimeout("Forward()",delay)  
        }  
        else state=null   //快进完成后设置状态变量 state 为 null  
}  

function GoToEnd(){  
        movie.GoToFrame(total-1) //跳到 Flash 的最后一帧        
}  

function Replay(){  
        Rewind()   //使 Flash 返回到第一帧  
        Play()     //播放 Flash  
/*因为多数 Flash 都有一个停止的画面,让用户点击播放按钮后再播放,在  
delay*5 毫秒后执行 Play(),可以跳过那个画面(仅适用于部分 Flash)*/  
    setTimeout("Play()",delay*5)  
}  
function showStatus(){  
        var N=movie.FrameNum+1   //取得 Flash 当前播放到的帧数  
//根据 Flash 的播放进度设置 id 为 bar 的表格的宽度  
    bar.style.width=Math.round(N*100/total)+"%"  
//在 id 为 frameCount 的对象中显示当前帧数和总帧数  
    frameCount.innerText=N+"/"+total  
}  

function Quick(){  
//根据当前状态,计算快进或快退时将要跳转到的目标帧  
        var targetFrame=movie.FrameNum+step*{back:-1,forward:1}[state]  
        movie.GoToFrame(targetFrame)    //跳到目标帧  
}  

function selectMovie(){  
/*触发 id 为 moviefile 的上传控件的 Click (单击)事件,  
使之弹出"选择文件"对话框*/  
    document.getElementById("moviefile").click()  
}  

function loadMovie(){  
//取得触发本事件的对象的值(上传控件的内容)  
    var file=event.srcElement.value  
//通过判断所选择文件的扩展名是否为".swf"以实现简单的过滤  
    if(/\w\.swf$/.test(file)) {  
        movie.LoadMovie(0,file)  //加载 Flash 文件  
        loaded()                 //调用下载进度显示的函数  
        }  
//如果文件名为".swf"以外的,弹出警告说明  
    else alert("文件格式错误,请重新选择")  
}  

function buttonState(de){  
//捕获 id 为 ctlButtons 的对象内的所有标签名为 "button" 的对象  
    var buttons=ctlButtons.document.all.tags("BUTTON")  
//设置除"打开 Flash 文件"按钮以外的所有控制按钮的禁用状态  
    for(var i=0;i<buttons.length-1;i++)  
        buttons[i].disabled=de  
}  

function loaded(){  
//捕获 id 为 movie 的对象  
    var movie=document.getElementById("movie")  
        if(movie.PercentLoaded()==100)//如果 Flash 下载完成  
        init()        //调用初始化有关变量的函数 init()  
//否则在 delay 毫秒后再次执行 loaded() 函数  
    else setTimeout("loaded()",delay)  
//根据下载量显示 id 为 bar 的表格的宽度  
    bar.style.width=movie.PercentLoaded()+"%"  
        frameCount.innerText=bar.style.width   //显示下载百分比  
}  
</script>  
<style>  
body,td,button{font:normal 12px Tahoma;color:#333333;text-align:center}  
button{border:1px solid #333333;background:#EEEEEE;margin:2px;font-family:Webdings;height:20px}  
</style>  
</head>  
<body topmargin="0">  
<div style="border:1px solid #666666;padding:3px">  
<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="allowScriptAccess" value="sameDomain" />  
<param name="movie" value="http://file.flash8.net/film/cn2001/snake/snake05.swf" />  
<param name="quality" value="high" />  
<param name="menu" value="false" />  
<param name="scale" value="noscale" />  
<param name="bgcolor" value="#000000" />  
<embed name="movie" src="http://file.flash8.net/film/cn2001/snake/snake05.swf" menu="false" quality="high" bgcolor="#000000" width="550" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>  
<table style="width:550px" cellspacing="0" cellpadding="0" border="0">  
        <tr>  
        <td style="vertical-align:middle">  
    <table style="border:1px solid #333333;width:90%;height:5px" cellpadding="1" cellspacing="0">  
               <tr>  
                  <td style="text-align:left;vertical-align:middle">  
                      <table cellspacing="0" cellpadding="0" id="bar" style="width:0%;height:3px;background:#00FF44">  
                         <tr>  
                             <td>  
                             </td>  
                         </tr>  
                      </table>  
                  </td>  
               <tr>  
           </table>  
        </td>  
        <td style="text-align:right;width:50px" id="frameCount"></td>  
       </tr>  
</table>  
<span id="ctlButtons">  
<button onClick="Rewind()" title="跳至第一帧">9</button>  
<button onClick="Back()" title="快退">7</button>  
<button onClick="Play()" title="播放">4</button>  
<button onClick="Pause()" title="暂停">;</button>  
<button onClick="Stop()" title="停止"><</button>  
<button onClick="Forward()" title="快进">8</button>  
<button onClick="GoToEnd()" title="跳至最末帧">:</button>  
<button onClick="Replay()" title="重放">q</button>  
<button onClick="selectMovie()" title="打开 Flash 文件">5</button><input type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()"></span>  
<script defer>  
buttonState(true)  //在 Flash 文件未下载完之前禁用控制按钮  
loaded()          //调用下载进度显示的函数  
</script>  
</div>  
</body>  
</html>  

注意:用movie.TGetProperty("_level0",8)和 movie.TGetProperty("_level0",9) 取到的并非 Flash 的真实尺寸,如果 Flash 是自己做的,可以在 Flash 里写两个变量(比如 iWidth 和 iHeight),用来存储 Flash 文件的尺寸,然后用 movie.GetVariable("iWidth") 和 movie.GetVariable("iHeight") 方法取得变量值。否则可以取消重设 Flash 尺寸的语句,然后直接在插入 Flash 的代码中把 width 和 height 设为 100% 或者一个足够大的值。  
试一试:可以自行加上拖放功能,效果请看闪吧的 Flash 播放页。  

特别提示  
在 Flash 未下载完成前先禁用控制按钮,并显示下载进度,下载完成后解禁控制按钮,并显示播放进度。单击播放按钮,将实现相应的控制功能。

评论: 1 | 引用: 0 | 查看次数: 6414
发表评论
登录后再发表评论!