即使精确缩放,Flash AS3 FLVPlayback组件也始终在视频上方和下方显示黑条

时间:2010-12-08 11:12:26

标签: flash actionscript-3 actionscript flvplayback flashvars

我已经编写了一个基于工具箱中FLVPlayback组件的非常基本的flash播放器,然后由SWFObject放在页面中。由于某些原因,即使缩放模式设置为EXACT_FIT,视频上方和下方也总会出现黑条。这对我来说没有意义,因为预览图像被设置为相同的x,y位置和高度&宽度作为视频,但它完全适合,没有黑条。

我缺少一些简单的东西吗?我为大量的代码道歉但我不确定你怎么必须看到。

我正在使用SWFObject为玩家注入以下代码:

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

我的动作脚本全部在第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);

2 个答案:

答案 0 :(得分:0)

wmode="transparent"可能会有所帮助 你也可以在你的flash应用程序中应用一个掩码来隐藏条形图,但如果问题不存在于独立的FP中,那么它就会被插入到HTML / js中,因此应该修复它。
scale: "noScale"也很有用(但您必须调整播放器或html容器的大小)

答案 1 :(得分:0)

事实证明我正在使用JS扩展闪存,但我真正想要的是Flash组件保持其相对于可查看/ Flash窗格边缘的位置。我不希望它们伸展或扭曲。

这必须通过使用ActionScript绘制控件等而不是使用默认的播放器外观以编程方式完成。看看一个开源播放器的来源,你会看到我的意思。当播放器处于全屏模式时,这也会阻止控件显得模糊。

此外,源视频在视频的上方和下方都有一些小条,但没有我试图在此处删除的那些大。