即使精确缩放，Flash AS3 FLVPlayback组件在视频上方和下方始终会出现黑条

Question

I have written a very basic flash player based around the FLVPlayback component in the toolkit, which is then placed in the page by SWFObject. For some reason there always appear to be black bars above and below the video even if the scaling mode is set to EXACT_FIT. This does not make sense to me as the preview image is set to the same x,y position and height & width as the video, but it fits exactly and does not have black bars.

Is there something simple I am missing? I apologise for the large amount of code but I am not sure how must you need to see.

I am using SWFObject to inject the player with the following code:

<script type="text/javascript">
var flashvars = {
   playerSkinURL: 'SkinUnderPlayStopSeekFullVol.swf',
   videoURL: 'video.flv',
   previewImageURL: 'video-preview.jpg',
   scaleMode: 'exact',
   autoBegin: false,
   playerColour: '#cccccc',
   playerAutoHide: false,
   playerAlpha: 0.85
};
var params = {
 allowfullscreen: true,
 quality: 'best',
 wmode: 'window'
};
swfobject.embedSWF("video.swf", "video", "479", "310", "9.0.0","/video/expressInstall.swf", flashvars, params);
</script>

<div id="video"></div>

My action script is all on frame 1:

stop();

/**
 * Embedding this player is simple with the following flashvars API
 * playerSkinURL   = the url to the skin to use eg. SkinUnderPlayStopSeekMuteVol.swf
 * videoURL        = the url to the video FLV file
 * previewImageURL = the url of the image to use for the preview image (43px less than total height)
 * scaleMode       = scale mode of the player
 *        - exact (default) = fit to player dimensions exactly
 *        - no              = use FLV original dimensions
 *                     - aspect    = scale the video whilst maintaining aspect ratio
 * autoBegin       = automatically start playing the video as soon as it is ready (true or false) default = false
 * playerColour    = the colour of the bezel default = 0x47ABCB
 * playerAlpha     = the alpha transparency of the bezel default = 0.85
 * playerAutoHide  = whether to hide the bezel when the mouse is not over it (boolean true or false)
 */
import fl.video.VideoEvent;
import fl.video.VideoScaleMode;
import fl.video.LayoutEvent;
var flashVars;
var imageLoader:Loader;

var playerSkin:String = 'SkinUnderPlayStopSeekMuteVol.swf';
var videoURL:String = '';
var previewImage:String = '';
var previewImageLoader:Loader = new Loader();
var scaleMode:String = 'exact';
var autoBegin:Boolean = false;
var playerColour:uint = 0xCCCCCC;
var playerAlpha:Number = 0.85;
var playerAutoHide:Boolean = false;

/**
 * Action functions
 */
function populateLocalVars() {
 flashVars = root.loaderInfo.parameters;
 if(null != flashVars['playerSkinURL']) {
  playerSkin = flashVars['playerSkinURL'];
 }
 if(null != flashVars['videoURL']) {
  videoURL = flashVars['videoURL'];
 }
 if(null != flashVars['previewImageURL']) {
  previewImage = flashVars['previewImageURL'];
 }
 if(null != flashVars['scaleMode'] && 
    ('no' == flashVars['scaleMode'] || 'aspect' == flashVars['scaleMode'] || 'exact' == flashVars['scaleMode'])) {
  scaleMode = flashVars['scaleMode'];
 }
 if(null != flashVars['autoBegin']) {
  if('true' == flashVars['autoBegin']) {
   autoBegin = true;
  } else {
   autoBegin = false;
  }
 }
 if(null != flashVars['playerColour']) {
  if('#' == flashVars['playerColour'].substring(0, 1)) {
   playerColour = uint('0x' + flashVars['playerColour'].substring(1, flashVars['playerColour'].length));
  } else if('x' == flashVars['playerColour'].substring(1, 2)) {
   playerColour = uint(flashVars['playerColour']);
  }
 }
 if(null != flashVars['playerAlpha']) {
  playerAlpha = Number(flashVars['playerAlpha']);
 }
 if(null != flashVars['playerAutoHide']) {
  if('true' == flashVars['playerAutoHide']) {
   playerAutoHide = true;
  } else {
   playerAutoHide = false;
  }
 }
}
function initPlayer() {
 populateLocalVars();

 setScaleMode();
 setPlayerColour();
 setPlayerAlpha();
 setPlayerAutoHide();

 setPlayerSkin();
 loadPreview();
 resizePlayer();

 loadMovieIntoPlayer();

 // this must come after the video is loaded!
 setPlayerAutoBegin();
}

/**
 * Set FLVPlayBack component parameters
 */
function setScaleMode() {
 if('no' == scaleMode) {
  player.scaleMode = VideoScaleMode.NO_SCALE;
 } else if('aspect' == scaleMode) {
  player.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
 } else if('exact' == scaleMode) {
  player.scaleMode = VideoScaleMode.EXACT_FIT;
 }
}
function setPlayerAutoBegin() {
 player.autoPlay = Boolean(autoBegin);
}
function setPlayerColour() {
 player.skinBackgroundColor = uint(playerColour);
}
function setPlayerAlpha() {
 player.skinBackgroundAlpha = Number(playerAlpha);
}
function setPlayerAutoHide() {
 player.skinAutoHide = Boolean(playerAutoHide);
}
function setPlayerSkin() {
 player.skin = playerSkin;
}
function loadMovieIntoPlayer() {
 player.load(videoURL);
}

/**
 * Operate on video
 */
function playMovie() {
    player.play();
 hidePreview();
}
function resetPlayHead() {
 player.seek(0);
}
function stopMovie() {
 player.stop();
}

/**
 * Preview image related
 */
function loadPreview() {
 previewImageLoader.load(new URLRequest(previewImage));
 showPreview();
}
function hidePreview() {
 preview.visible = false; 
}
function showPreview() {
 preview.visible = true;
}

/**
 * Cause player to fit the defined area of the object html tag
 */
function resizePlayer() {
 player.width = stage.stageWidth;
 player.height = stage.stageHeight - 43;

 // now if the preview image has been loaded when can set it to the same
 // width and height as the player
 previewImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, previewImageLoadedEventHandler);
}
function resizePreview() {
 preview.width = player.width;
 preview.height = player.height;

 preview.x = player.x;
 preview.y = player.y;
}

/**
 * Event handling functions
 */
function loaderCompleteEventHandler(event:Event) {
 stage.addEventListener(Event.RESIZE, stageSizeEventHandler);
 stage.dispatchEvent(new Event(Event.RESIZE));
}
function beginPlayingEventHandler(event:Event):void {
 hidePreview();
}
function finishPlayingEventHandler(event:Event):void {
 resetPlayHead();
 showPreview();
}
function previewClickedEventHandler(event:Event):void {
 playMovie();
}
function previewImageLoadedEventHandler(event:Event):void {
 preview.addChild(previewImageLoader);
 resizePreview();
}
function stageSizeEventHandler(event:Event):void {
 if (stage.stageHeight > 0 && stage.stageWidth > 0) {
  stage.removeEventListener(Event.RESIZE, stageSizeEventHandler);
  initPlayer();
 }
}
function playerHasBeenResizedEventHandler(event:Event):void {
 resizePreview();
}

/**
 * Event bindings
 */
this.loaderInfo.addEventListener(Event.COMPLETE, loaderCompleteEventHandler);
player.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, beginPlayingEventHandler);
player.addEventListener(VideoEvent.COMPLETE, finishPlayingEventHandler);
player.addEventListener(LayoutEvent.LAYOUT, playerHasBeenResizedEventHandler);
preview.addEventListener(MouseEvent.CLICK, previewClickedEventHandler);

Answer 1

wmode="transparent" might help.
also you can apply a mask to your flash app to hide the bars, but imho if the problem doesn't exist in a standalone FP - it's caused by insertion into HTML/js and so this should be fixed.
scale: "noScale" is useful too (but you'll have to resize your player or html container)

Answer 2

Turns out that I was scaling the flash using JS, but what I really wanted was for the Flash components to maintain their position in relation to the edge of the viewable/Flash pane. I did not want them to stretch or warp.

This would have to be done programmatically by drawing the controls etc with ActionScript rather than using the default player skins. Take a look at the source of an opensource player and you will see what I mean. This also stops the controls from appearing fuzzy when the player is in full screen mode.

Also it appears that the source does have some small bars above and below the video, but not as large as the ones I was attempting to remove here.