How to center align an flv video in FLVPlayback

Posted on 2009-02-17
Last Modified: 2013-11-11
I have an FLVPlayback on stage defined as W:510.0 and H:286.9 (16:9 aspect ratio) and a video i am loading into the swf with dimensions W:368 x H:208 (also 19:9). When the video loads into the defined FLVPlayback video it loads with its original dimensions to the far left with a massive black area to the right of the video.My questions are:
1- Is it not possible to center align the video within the FLVplayback?
2- Since they are both 16:9 cant i just make the video take up the full FLVPlayback area defined?
Code is AS2.
Question by:guswebb
    LVL 8

    Accepted Solution

    3 easy steps.

    1. Make a black square movieclip.  
    2. Set it to the size you want.  
    3. Position the resized FLV video in the center of it.
    LVL 8

    Assisted Solution

    Here is some code I found that my illuminate things for you.

               attachMovie("FLVPlayback", "my_FLVPlybk", 10, {width:320, height:240, x:90, y:100});
                //center the FLVPlayback component when FLV is ready to play
                var listenerObject:Object = new Object();
                listenerObject.resize = function(eventObject:Object):Void {
                    //center video in playback area
                    newx = (460 - my_FLVPlybk.preferredWidth)/2;
                    newy = (470 - my_FLVPlybk.preferredHeight)/2;
                    my_FLVPlybk._x = newx;
                    my_FLVPlybk._y = newy;
                my_FLVPlybk.addEventListener("resize", listenerObject);    
                listenerObject.ready = function(eventObject:Object):Void {
                    my_FLVPlybk.setSize(250, 350);
    LVL 9

    Author Comment

    I am going to be dynamically passing in different sized videos so that approach will not work, the case about the video size i mentioned was only an example. Im might want to pass in a video of aspect ratio 3:4 in which case your idea will not make it centered, i am looking for some actionscript code. (for both of my questons)
    LVL 9

    Author Comment

    Your code is moving the whole FLVPlayback, i dont want to do that, surely there must be a way by something like this:
    FLVideo.scaleMode = VideoScaleMode.NO_SCALE;
    FLVVideo.align = VideoAlign.CENTER;
    // these dont work however
    LVL 9

    Author Comment

    Ok after alot of looking around this is what ive come up with:

    1- There is no simple centering of video within flvplayback so ill have to use brittonv's reposition solution.

    2- Since they are both 16:9 cant i just make the video take up the full FLVPlayback area defined?
    After i did my own testing: Yes by setting the autosize of the flvplayback to false and setting maintainaspect ratio to true + it might be best to make sure all the videos are 16:9 aswell.

    LVL 9

    Author Closing Comment

    This reassures me that the only probable way is to reposition the FLVplayback which answers part 1 of my question.

    Expert Comment

    I was having a similar issue I have an application that has videos encoded at 400 x 300 and 480 x 270.

    Flash CS3 encoder embeds all kinds of goodies into the metadata of the video; older FLV files will have the height and width only.

    Here's what I did.
    Followed adobe's metadata example

    And added a switch statement to change the x position of myFLV based on what the metadata.

    Hope that helps - works like a charm for me.

    var listenerObject:Object = new Object();
    listenerObject.metadataReceived = function(eventObject:Object):Void {
            trace("canSeekToEnd is " + myFLV.metadata.canSeekToEnd);
            trace("Number of cue points is " + myFLV.metadata.cuePoints.length);
            trace("Frame rate is " + myFLV.metadata.framerate);
            trace("Height is " + myFLV.metadata.height);
            trace("Width is " + myFLV.metadata.width);
            trace("Duration is " + myFLV.metadata.duration + " seconds");
            var vidWidth:Number = myFLV.metadata.width;
    		switch(vidWidth) {
    			case 480:
                            //stage width is 500 myFLV
    			myFLV._x = 10;
    			case 400:
    			myFLV._x = 50;
    myFLV.addEventListener("metadataReceived", listenerObject);
    myFLV.contentPath = "";

    Open in new window


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Suggested Solutions

    This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
    Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
    The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
    The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now