Flash AS3 FLVPlayback Component всегда имеет черные полосы над и под видео даже при точном масштабировании - PullRequest
0 голосов
/ 08 декабря 2010

Я написал очень простой флеш-плеер, основанный на компоненте FLVPlayback в наборе инструментов, который затем помещается на страницу 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 голосов
/ 07 февраля 2011

Оказывается, что я масштабировал флэш-память с помощью JS, но я действительно хотел, чтобы компоненты Flash сохранили свое положение относительно края видимой панели / панели Flash. Я не хотел, чтобы они растягивались или деформировались.

Это должно быть сделано программно путем рисования элементов управления и т. Д. С помощью ActionScript вместо использования скинов игрока по умолчанию. Посмотрите на источник проигрывателя с открытым исходным кодом, и вы поймете, что я имею в виду. Это также предотвращает размытие элементов управления, когда игрок находится в полноэкранном режиме.

Также кажется, что у источника есть несколько маленьких полос выше и ниже видео, но не таких больших, как те, которые я пытался удалить здесь.

0 голосов
/ 14 декабря 2010

wmode="transparent" может помочь.
также вы можете применить маску к вашему приложению flash, чтобы скрыть полосы, но imho, если проблема не существует в отдельной FP - это вызвано вставкой в ​​HTML / js, и поэтому это должно быть исправлено.
scale: "noScale" тоже полезно (но вам придется изменить размер вашего плеера или HTML-контейнера)

...