标题: Flash播放器( Web 版)
作者: admin
日期: 2006-06-28 09:53 AM
分类: 网页设计
内容: 解决思路
用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)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.126 ms
标题: Flash播放器( Web 版)
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.126 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.126 ms