2010-12-08 7 views
0

Я написал очень простой флеш-плеер, основанный на компоненте FLVPlayback в наборе инструментов, который затем помещается на страницу SWFObject. По какой-то причине всегда появляются черные полосы выше и ниже видео, даже если для режима масштабирования установлено значение EXACT_FIT. Для меня это не имеет смысла, так как изображение предварительного просмотра устанавливается в том же положении x, y и высоте & шириной, как и видео, но оно точно соответствует и не имеет черных полос.Flash AS3 FLVPlayback Компонент всегда имеет черные полосы выше и ниже видео даже с точным масштабированием

Есть ли что-то простое, что мне не хватает? Я прошу прощения за большой объем кода, но я не уверен, как вам нужно это видеть.

Я использую 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); 
+0

Я полагаю, что у самого flv нет черных полос, и что вы можете проверить swf из IDE и что он отображается правильно для каждого режима масштабирования? Что происходит, когда вы изменяете scalemode в flashVars? – 2010-12-09 10:14:38

ответ

0

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

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

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

0

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