Flash AS3 FLVPlayback Le composant a toujours des barres noires au-dessus et au-dessous de la vidéo même avec une mise à l'échelle exacte

Question

J'ai écrit un lecteur Flash très basique basé sur le composant FLVPlayback dans le toolkit, qui est ensuite placé dans la page par SWFObject. Pour une raison quelconque, il semble toujours y avoir des barres noires au-dessus et au-dessous de la vidéo, même si le mode de mise à l'échelle est défini sur EXACT_FIT. Cela n'a pas de sens pour moi car l'image de prévisualisation est réglée sur la même largeur, la même position et la même hauteur que la vidéo, mais elle correspond exactement et n'a pas de barres noires.

Y at-il quelque chose de simple qui me manque? Je m'excuse pour la grande quantité de code mais je ne suis pas sûr de savoir comment vous devez voir.

J'utilise SWFObject pour injecter le joueur avec le code suivant:

<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> 

Mon script d'action est sur l'image 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

Transforme que j'escaladait le flash en utilisant JS, mais ce que je voulais vraiment était pour les composants Flash pour maintenir leur position dans par rapport au bord du volet visible/Flash. Je ne voulais pas qu'ils s'étirent ou se déforment.

Cela devrait être fait par programmation en dessinant les contrôles etc avec ActionScript plutôt que d'utiliser les skins du joueur par défaut. Jetez un oeil à la source d'un joueur opensource et vous verrez ce que je veux dire. Cela empêche également les commandes d'apparaître floues lorsque le lecteur est en mode plein écran.

Il semble également que la source ait quelques petites barres au-dessus et au-dessous de la vidéo, mais pas aussi grandes que celles que j'essayais de supprimer ici.

Answer 2

wmode="transparent" pourrait aider.
vous pouvez également appliquer un masque à votre application flash pour masquer les barres, mais à mon humble avis si le problème n'existe pas dans un FP autonome - il est causé par l'insertion dans HTML/js et donc cela devrait être corrigé.
scale: "noScale" est trop utile (mais vous devrez redimensionner votre lecteur ou d'un conteneur html)