Databases
StackOverflow2013
Postsdbo
POFlash AS3 FLVPlayback Component always has black bars above and below video even with exact scaling
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlash AS3 FLVPlayback Component always has black bars above and below video even with exact scaling
    text
    copied!<p>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 &amp; width as the video, but it fits exactly and does not have black bars.</p> <p>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.</p> <p>I am using SWFObject to inject the player with the following code:</p> <pre><code>&lt;script type="text/javascript"&gt; 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); &lt;/script&gt; &lt;div id="video"&gt;&lt;/div&gt; </code></pre> <p>My action script is all on frame 1:</p> <pre><code>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'] &amp;&amp; ('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 &gt; 0 &amp;&amp; stage.stageWidth &gt; 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); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload