Flash Actionscript 3.0 视频播放器帮助
自从我上次使用 Flash 以来已经有一段时间了,所以认为最好学习 Actionscript 3。但是,我一直在学习 [Flash 视频播放器教程][1],并且我真的很难根据自己的需要定制布局。
我将进度条向下移动了 13.9 像素,向右移动了 55.8 像素。我还将进度条缩短为 176.9px。问题是,当我单击滑块时,它会向右跳 55.8 像素。我知道我需要在某处写下洗涤器应从 55.8px 开始,但每次我尝试时都会导致进一步的问题。有人可以看一下我的代码并建议我需要更改什么吗?
亲切的问候,
马特
// ##########################
// ############# CONSTANTS
// ##########################
// time to buffer for the video in sec.
const BUFFER_TIME:Number = 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number = 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int = 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean = true;
// ##########################
// ############# VARIABLES
// ##########################
// flag for knowing if flv has been loaded
var bolLoaded:Boolean = false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean = false;
// flag for progress scrubbing
var bolProgressScrub:Boolean = false;
// holds the last used volume, but never 0
var intLastVolume:Number = DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object;
// url to flv file
var strSource:String = "hancock-tsr2_h480p.flv";
// timer for updating player (progress, volume...)
var tmrDisplay:Timer;
// ##########################
// ############# FUNCTIONS
// ##########################
// sets up the player
function initVideoPlayer():void {
// hide buttons
mcVideoControls.btnUnmute.visible = false;
mcVideoControls.btnPause.visible = false;
// set the progress/preload fill width to 1
mcVideoControls.mcProgressFill.mcFillgreen.width = 1;
mcVideoControls.mcProgressFill.mcFillGrey.width = 1;
// add global event listener when mouse is released
stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);
// add event listeners to all buttons
mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);
// create timer for updating all visual parts of player and add
// event listener
tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);
// create a new net connection, add event listener and connect
// to null because we don't have a media server
ncConnection = new NetConnection();
ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
ncConnection.connect(null);
// create a new netstream with the net connection, add event
// listener, set client to this for handling meta data and
// set the buffer time to the value from the constant
nsStream = new NetStream(ncConnection);
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.client = this;
nsStream.bufferTime = BUFFER_TIME;
// attach net stream to video object on the stage
vidDisplay.attachNetStream(nsStream);
// set the smoothing value from the constant
vidDisplay.smoothing = SMOOTHING;
// set default volume
mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 52;
setVolume(DEFAULT_VOLUME);
}
function playClicked(e:MouseEvent):void {
// check's, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}
// show video display
vidDisplay.visible = true;
// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}
function pauseClicked(e:MouseEvent):void {
// pause video
nsStream.pause();
// switch play/pause visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}
function stopClicked(e:MouseEvent):void {
// calls stop function
stopVideoPlayer();
}
function muteClicked(e:MouseEvent):void {
// set volume to 0
setVolume(0);
// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = 341;
mcVideoControls.mcVolumeFill.mcFillgreen.width = 1;
}
function unmuteClicked(e:MouseEvent):void {
// set volume to last used value
setVolume(intLastVolume);
// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}
function volumeScrubberClicked(e:MouseEvent):void {
// set volume scrub flag to true
bolVolumeScrub = true;
// start drag
mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(339.9, 14.1, 59.5, 0));
}
function progressScrubberClicked(e:MouseEvent):void {
// set progress scrub flag to true
bolProgressScrub = true;
// start drag
mcVideoControls.mcProgressScrubber.startDrag (false, new Rectangle(55.8, 14.1, 176.9, 0));
}
function mouseReleased(e:MouseEvent):void {
// set progress/volume scrub to false
bolVolumeScrub = false;
bolProgressScrub = false;
// stop all dragging actions
mcVideoControls.mcProgressScrubber.stopDrag();
mcVideoControls.mcVolumeScrubber.stopDrag();
// update progress/volume fill
mcVideoControls.mcProgressFill.mcFillgreen.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
// save the volume if it's greater than zero
if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}
function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 176.9))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 176.9 / objInfo.duration + 55.8;
// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = "<font color='#ffffff'>" + formatTime(nsStream.time) + "</font> / " + formatTime(objInfo.duration);
// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillgreen.width = mcVideoControls.mcProgressScrubber.x - 55.8;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 176.9 / nsStream.bytesTotal;
// update volume and the green fill width when user is scrubbing
if(bolVolumeScrub) {
setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}
}
function onMetaData(info:Object):void {
// stores meta data in a object
objInfo = info;
// now we can start the timer because
// we have all the neccesary data
tmrDisplay.start();
}
function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case "NetStream.Play.StreamNotFound":
trace("Stream not found: " + strSource);
break;
// when the video reaches its end, we stop the player
case "NetStream.Play.Stop":
stopVideoPlayer();
break;
}
}
function stopVideoPlayer():void {
// pause netstream, set time position to zero
nsStream.pause();
nsStream.seek(0);
// in order to clear the display, we need to
// set the visibility to false since the clear
// function has a bug
vidDisplay.visible = false;
// switch play/pause button visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}
function setVolume(intVolume:Number = 0):void {
// create soundtransform object with the volume from
// the parameter
var sndTransform = new SoundTransform(intVolume);
// assign object to netstream sound transform object
nsStream.soundTransform = sndTransform;
// hides/shows mute and unmute button according to the
// volume
if(intVolume > 0) {
mcVideoControls.btnMute.visible = true;
mcVideoControls.btnUnmute.visible = false;
} else {
mcVideoControls.btnMute.visible = false;
mcVideoControls.btnUnmute.visible = true;
}
}
function formatTime(t:int):String {
// returns the minutes and seconds with leading zeros
// for example: 70 returns 01:10
var s:int = Math.round(t);
var m:int = 0;
if (s > 0) {
while (s > 59) {
m++;
s -= 60;
}
return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
} else {
return "00:00";
}
}
// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();
it's been a while since I last used Flash so thought it best to learn Actionscript 3. However, I've been working through a [Flash videoplayer tutorial][1] and I'm really struggling to cusomise the layout for my own needs.
I moved the progress bar down by 13.9px and to the right by 55.8px. I also shortened the progress bar to 176.9px. Problem is when I click on the scrubber it jumps to the right by the 55.8px. I know I need to write somewhere that the scrubber should start at 55.8px but everytime I try I end up causing further issues. Could someone please take a look at my code and suggest what it is I need to change.
Kind Regards,
Matt
// ##########################
// ############# CONSTANTS
// ##########################
// time to buffer for the video in sec.
const BUFFER_TIME:Number = 8;
// start volume when initializing player
const DEFAULT_VOLUME:Number = 0.6;
// update delay in milliseconds.
const DISPLAY_TIMER_UPDATE_DELAY:int = 10;
// smoothing for video. may slow down old computers
const SMOOTHING:Boolean = true;
// ##########################
// ############# VARIABLES
// ##########################
// flag for knowing if flv has been loaded
var bolLoaded:Boolean = false;
// flag for volume scrubbing
var bolVolumeScrub:Boolean = false;
// flag for progress scrubbing
var bolProgressScrub:Boolean = false;
// holds the last used volume, but never 0
var intLastVolume:Number = DEFAULT_VOLUME;
// net connection object for net stream
var ncConnection:NetConnection;
// net stream object
var nsStream:NetStream;
// object holds all meta data
var objInfo:Object;
// url to flv file
var strSource:String = "hancock-tsr2_h480p.flv";
// timer for updating player (progress, volume...)
var tmrDisplay:Timer;
// ##########################
// ############# FUNCTIONS
// ##########################
// sets up the player
function initVideoPlayer():void {
// hide buttons
mcVideoControls.btnUnmute.visible = false;
mcVideoControls.btnPause.visible = false;
// set the progress/preload fill width to 1
mcVideoControls.mcProgressFill.mcFillgreen.width = 1;
mcVideoControls.mcProgressFill.mcFillGrey.width = 1;
// add global event listener when mouse is released
stage.addEventListener( MouseEvent.MOUSE_UP, mouseReleased);
// add event listeners to all buttons
mcVideoControls.btnPause.addEventListener(MouseEvent.CLICK, pauseClicked);
mcVideoControls.btnPlay.addEventListener(MouseEvent.CLICK, playClicked);
mcVideoControls.btnStop.addEventListener(MouseEvent.CLICK, stopClicked);
mcVideoControls.btnMute.addEventListener(MouseEvent.CLICK, muteClicked);
mcVideoControls.btnUnmute.addEventListener(MouseEvent.CLICK, unmuteClicked);
mcVideoControls.mcVolumeScrubber.btnVolumeScrubber.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
mcVideoControls.mcProgressScrubber.btnProgressScrubber.addEventListener(MouseEvent.MOUSE_DOWN, progressScrubberClicked);
// create timer for updating all visual parts of player and add
// event listener
tmrDisplay = new Timer(DISPLAY_TIMER_UPDATE_DELAY);
tmrDisplay.addEventListener(TimerEvent.TIMER, updateDisplay);
// create a new net connection, add event listener and connect
// to null because we don't have a media server
ncConnection = new NetConnection();
ncConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
ncConnection.connect(null);
// create a new netstream with the net connection, add event
// listener, set client to this for handling meta data and
// set the buffer time to the value from the constant
nsStream = new NetStream(ncConnection);
nsStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
nsStream.client = this;
nsStream.bufferTime = BUFFER_TIME;
// attach net stream to video object on the stage
vidDisplay.attachNetStream(nsStream);
// set the smoothing value from the constant
vidDisplay.smoothing = SMOOTHING;
// set default volume
mcVideoControls.mcVolumeScrubber.x = (52 * DEFAULT_VOLUME) + 341;
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 52;
setVolume(DEFAULT_VOLUME);
}
function playClicked(e:MouseEvent):void {
// check's, if the flv has already begun
// to download. if so, resume playback, else
// load the file
if(!bolLoaded) {
nsStream.play(strSource);
bolLoaded = true;
}
else{
nsStream.resume();
}
// show video display
vidDisplay.visible = true;
// switch play/pause visibility
mcVideoControls.btnPause.visible = true;
mcVideoControls.btnPlay.visible = false;
}
function pauseClicked(e:MouseEvent):void {
// pause video
nsStream.pause();
// switch play/pause visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}
function stopClicked(e:MouseEvent):void {
// calls stop function
stopVideoPlayer();
}
function muteClicked(e:MouseEvent):void {
// set volume to 0
setVolume(0);
// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = 341;
mcVideoControls.mcVolumeFill.mcFillgreen.width = 1;
}
function unmuteClicked(e:MouseEvent):void {
// set volume to last used value
setVolume(intLastVolume);
// update scrubber and fill position/width
mcVideoControls.mcVolumeScrubber.x = (53 * intLastVolume) + 341;
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}
function volumeScrubberClicked(e:MouseEvent):void {
// set volume scrub flag to true
bolVolumeScrub = true;
// start drag
mcVideoControls.mcVolumeScrubber.startDrag(false, new Rectangle(339.9, 14.1, 59.5, 0));
}
function progressScrubberClicked(e:MouseEvent):void {
// set progress scrub flag to true
bolProgressScrub = true;
// start drag
mcVideoControls.mcProgressScrubber.startDrag (false, new Rectangle(55.8, 14.1, 176.9, 0));
}
function mouseReleased(e:MouseEvent):void {
// set progress/volume scrub to false
bolVolumeScrub = false;
bolProgressScrub = false;
// stop all dragging actions
mcVideoControls.mcProgressScrubber.stopDrag();
mcVideoControls.mcVolumeScrubber.stopDrag();
// update progress/volume fill
mcVideoControls.mcProgressFill.mcFillgreen.width = mcVideoControls.mcProgressScrubber.x + 5;
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
// save the volume if it's greater than zero
if((mcVideoControls.mcVolumeScrubber.x - 341) / 53 > 0)
intLastVolume = (mcVideoControls.mcVolumeScrubber.x - 341) / 53;
}
function updateDisplay(e:TimerEvent):void {
// checks, if user is scrubbing. if so, seek in the video
// if not, just update the position of the scrubber according
// to the current time
if(bolProgressScrub)
nsStream.seek(Math.round(mcVideoControls.mcProgressScrubber.x * objInfo.duration / 176.9))
else
mcVideoControls.mcProgressScrubber.x = nsStream.time * 176.9 / objInfo.duration + 55.8;
// set time and duration label
mcVideoControls.lblTimeDuration.htmlText = "<font color='#ffffff'>" + formatTime(nsStream.time) + "</font> / " + formatTime(objInfo.duration);
// update the width from the progress bar. the grey one displays
// the loading progress
mcVideoControls.mcProgressFill.mcFillgreen.width = mcVideoControls.mcProgressScrubber.x - 55.8;
mcVideoControls.mcProgressFill.mcFillGrey.width = nsStream.bytesLoaded * 176.9 / nsStream.bytesTotal;
// update volume and the green fill width when user is scrubbing
if(bolVolumeScrub) {
setVolume((mcVideoControls.mcVolumeScrubber.x - 341) / 53);
mcVideoControls.mcVolumeFill.mcFillgreen.width = mcVideoControls.mcVolumeScrubber.x - 394 + 53;
}
}
function onMetaData(info:Object):void {
// stores meta data in a object
objInfo = info;
// now we can start the timer because
// we have all the neccesary data
tmrDisplay.start();
}
function netStatusHandler(event:NetStatusEvent):void {
// handles net status events
switch (event.info.code) {
// trace a messeage when the stream is not found
case "NetStream.Play.StreamNotFound":
trace("Stream not found: " + strSource);
break;
// when the video reaches its end, we stop the player
case "NetStream.Play.Stop":
stopVideoPlayer();
break;
}
}
function stopVideoPlayer():void {
// pause netstream, set time position to zero
nsStream.pause();
nsStream.seek(0);
// in order to clear the display, we need to
// set the visibility to false since the clear
// function has a bug
vidDisplay.visible = false;
// switch play/pause button visibility
mcVideoControls.btnPause.visible = false;
mcVideoControls.btnPlay.visible = true;
}
function setVolume(intVolume:Number = 0):void {
// create soundtransform object with the volume from
// the parameter
var sndTransform = new SoundTransform(intVolume);
// assign object to netstream sound transform object
nsStream.soundTransform = sndTransform;
// hides/shows mute and unmute button according to the
// volume
if(intVolume > 0) {
mcVideoControls.btnMute.visible = true;
mcVideoControls.btnUnmute.visible = false;
} else {
mcVideoControls.btnMute.visible = false;
mcVideoControls.btnUnmute.visible = true;
}
}
function formatTime(t:int):String {
// returns the minutes and seconds with leading zeros
// for example: 70 returns 01:10
var s:int = Math.round(t);
var m:int = 0;
if (s > 0) {
while (s > 59) {
m++;
s -= 60;
}
return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
} else {
return "00:00";
}
}
// ##########################
// ############# INIT PLAYER
// ##########################
initVideoPlayer();
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不确定你是如何做到这一点的,只是懒惰地试图弄清楚你的代码:)但我注意到你使用了 startDrag 函数,我个人倾向于避免使用它。 lee brimelow 有一个关于 OOP 滚动条的非常好的教程,他在其中解释了解决这个问题的方法。当然,这与视频没有太大关系,但我现在在任何需要注册一些 MouseMove 事件的时候都使用这种技术。无论如何,我真的认为这会解决你的“跳跃”问题。
基本思想是在鼠标按下时注册您的鼠标位置,考虑到任何可能的偏移,然后添加一个监听器来监听鼠标移动事件,这将更新您可能需要的任何洗涤器信息...
希望这有帮助!
检查 http://www.gotoandlearn.com/play?id=71
i'm not sure to understand how you go about it, just being lazy trying to figure out your code :) but i've noted that you use the startDrag function , which i personally tend to avoid. lee brimelow has a very good tutorial about an OOP scrollbar where he explains a way around this. granted, this hasn't got much to do with video but i now used this technique anytime i need to register some MouseMove events. in any case, i really think it would solve your 'jumping' problem.
the basic idea is to register your mouse position on mouse down , taking account of any possible offsets , then add a listener to mouse move events which will update any scrubber info you may need...
hope this helps!
check http://www.gotoandlearn.com/play?id=71