standard video inside widescreen player

standard video inside widescreen player

Post by Float:Righ » Wed, 25 Feb 2009 01:04:14


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!
 
 
 

standard video inside widescreen player

Post by JayCharle » Wed, 25 Feb 2009 02:10:58

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
}

 
 
 

standard video inside widescreen player

Post by Float:Righ » Wed, 25 Feb 2009 03:05:33

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.
 
 
 

standard video inside widescreen player

Post by JayCharle » Wed, 25 Feb 2009 03:45:35

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.
 
 
 

standard video inside widescreen player

Post by JayCharle » Wed, 25 Feb 2009 03:51:47

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;

}

};
 
 
 

standard video inside widescreen player

Post by Float:Righ » Wed, 25 Feb 2009 07:04:11

Hi again JayCharles,

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

ns.onMetaData = function(obj) {
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 :)