Flash Actionscript 3.0 视频播放器帮助

发布于 2024-08-03 02:46:52 字数 10043 浏览 5 评论 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

指尖微凉心微凉 2024-08-10 02:46:52

我不确定你是如何做到这一点的,只是懒惰地试图弄清楚你的代码:)但我注意到你使用了 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文