Skip to main content
F
Float_Right_
Participant
February 23, 2009
Answered

standard video inside widescreen player

  • February 23, 2009
  • 3 replies
  • 706 views
Hi,

I have a Flash video player, built in ActionScript 2, that I've recently needed to change from a 4:3 ratio to a 16:9 ratio. The videos are brought in from a Flash Media Server. The player is getting rebuilt in ActionScript 3 later, but for now it should stay in v.2 for a quick turnaround. Back to the point...

The original videos were 400px x 300px. The widescreen videos will be 534 x 300. Since the 4:3 videos aren't wide enough, I want to float them in the center of the player, with black "bars" on the left and right sides. Is there anyway to center the videos streaming from the FMS while keeping each video's original proportions intact? It looks like YouTube is doing this already. Are they actually centering the videos or are they "faking it" somehow?

Any help would be really appreciated. Thanks in advance!
    This topic has been closed for replies.
    Correct answer Float_Right_
    Hi again JayCharles,

    Thanks so much for your help! Got it figured out. Here's what I ended up with:

    ns.onMetaData = function(obj) {
    // I've placed the videoDisplay object inside a movie clip named, videoContainer_mc.
    videoContainer_mc._width = obj.width;
    videoContainer_mc._height = 300; // <-- height will be 300 no matter what
    };

    Works like a charm. Thanks for putting me in the right direction :)

    3 replies

    A
    Anonymous
    February 23, 2009
    I just reread your code... and my last post might have been information overload.

    If you're sure all of your videos will be one of two resolutions, then you don't need to factor all of the scaling and aspect ratio I mentioned in my last post.

    Your function would look something like this:

    ns.onMetaData = function(dataObj){
    // resize/reposition your video object based on dataObj.width and dataObj.height

    // I'm trying to use this condition to accomplish things, but it's not working. "videoDisplay" is the name of my video object.

    videoDisplay.width =dataObj.width;
    videoDisplay.height =dataObj.height;

    }
    F
    Float_Right_AuthorCorrect answer
    Participant
    February 23, 2009
    Hi again JayCharles,

    Thanks so much for your help! Got it figured out. Here's what I ended up with:

    ns.onMetaData = function(obj) {
    // I've placed the videoDisplay object inside a movie clip named, videoContainer_mc.
    videoContainer_mc._width = obj.width;
    videoContainer_mc._height = 300; // <-- height will be 300 no matter what
    };

    Works like a charm. Thanks for putting me in the right direction :)
    A
    Anonymous
    February 23, 2009
    You'll want to get rid of the quotes around all of your values. You're dealing with numbers, but if you put them in quotes the flashplayer will interpret them as strings... and your function will fail.

    You might also want to set some maximums. If the native resolution video is larger than the area you have to display it in, you'll want to make sure you don't make the video object only expands to fill the available space.

    You'll run into some additional math requirements there, as you'll need to calculate aspect ratio of the video and the largest image that can fit in the available space while maintaining that aspect ratio. Can get the aspect by dividing the height of the video by the width of the video. You'll then need to factor how much space is available in width vs. how much space is available in height. Armed with those figures, you can do the math to resize the video object to the best size.
    A
    Anonymous
    February 23, 2009
    It's handled with client side actionscript.

    What you need to do is have an event listener for the onMetaData event of the netStream. The metadata object includes the native width and height of the video. Your onMetaData event handler will resize the video object based on the width and height properties in the metaData object.

    AS2:

    ns = new NetStream(nc);
    ns.onMetaData = function(dataObj){
    // resize/reposition your video object based on dataObj.width and dataObj.height
    }

    F
    Float_Right_Author
    Participant
    February 23, 2009
    Thanks so much JayCharles. I think I'm almost there. Could you tell me if I'm in the right direction with this bit on actionscript 2?

    // this code was already in, it creates the stream.
    var ns:NetStream = new NetStream(nc);
    ns.setBufferTime(2);

    ns.onMetaData = function(dataObj){
    // resize/reposition your video object based on dataObj.width and dataObj.height

    // I'm trying to use this condition to accomplish things, but it's not working. "videoDisplay" is the name of my video object.

    if (dataObj.width == "534"){
    videoDisplay.width = "534";
    videoDisplay.height = "300"
    }
    else{
    videoDisplay.width = "400";
    videoDisplay.height = "300";
    }

    };

    Again, your help is much appreciated.
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices