Flowplayer canvas background skalieren

Der Flowplayer wird mit Version zu Version immer besser und bietet jetzt sogar Support für mobile Apple-Geräte. Was der Flowplayer leider nicht kann ist das skalieren des Canvas. Wer sich mit dem Kompilieren des Players auskennt kann dieses Problem umgehen. Die Datei "StyleableSprite.as" unter "flowplayer-3.1.5-src\src\actionscript\org\flowplayer\view" muss für das Skalieren des background images angepasst werden.

import flash.display.StageDisplayState; // added

muss hinzugefügt werden um den Vollbild-Modus zu erkennen. Die Funktion arrangeBackgroundImage muss angepasst werden (getestet mit Version 3.1.5 bis 3.2.7).

vorher:

private function arrangeBackgroundImage():void {
    if (! _image) return;
//            graphics.clear();
    createImageHolder();

    if (_style.backgroundRepeat) {
        repeatBackground(_image);
    } else {
        addBackgroundImage(_image);
        var xPos:Length = _style.backgroundImageX;
        var yPos:Length = _style.backgroundImageY;

        log.debug("background image xPos " + xPos);
        log.debug("background image yPos " + yPos);

        if (xPos.px >= 0) {
            _imageHolder.x = xPos.px;
        } else if (xPos.pct > 0) {
            _imageHolder.x = xPos.pct/100 * width - _imageHolder .width/2;
        }

        if (yPos.px >= 0) {
            _imageHolder.y = yPos.px;
        } else if (yPos.pct > 0) {
            _imageHolder.y = yPos.pct/100 * height - _imageHolder .height/2;
        }

        //_imageHolder.scaleX = 100%;
        //_imageHolder.scaleY = 100%;

    }
}

ändern in:

private function arrangeBackgroundImage():void {
    if (! _image) return;
//            graphics.clear();
    createImageHolder();

    if (_style.backgroundRepeat) {
        repeatBackground(_image);
    } else {
        addBackgroundImage(_image);
        var xPos:Length = _style.backgroundImageX;
        var yPos:Length = _style.backgroundImageY;

        log.debug("background image xPos " + xPos);
        log.debug("background image yPos " + yPos);

        if (xPos.px >= 0) {
            _imageHolder.x = xPos.px;
        } else if (xPos.pct > 0) {
            _imageHolder.x = xPos.pct/100 * width - _imageHolder .width/2;
        }

        if (yPos.px >= 0) {
            _imageHolder.y = yPos.px;
        } else if (yPos.pct > 0) {
            _imageHolder.y = yPos.pct/100 * height - _imageHolder .height/2;
        }

    }
    
    var imageratio:Number = 9 / 16; // das bild wird auf das 16:9 format gebracht

    //var imageratio:Number = 3 / 4; // das bild wird auf das 4:3 format gebracht
    var imagepositiondelta:Number = 0;
    var canvasimageheight:Number = stage.stageWidth * imageratio;
    var controlbarheight:Number = 0;

    if(imageratio < 1 && _image.width != stage.stageWidth) {
        _image.width = stage.stageWidth;
        _image.height = canvasimageheight;

        if(stage.displayState == StageDisplayState.FULL_SCREEN) {
            controlbarheight = 0;

            // das hintergrundbild wird im vollbild-modus gelöscht. wichtig bei scaling: 'fit'
            removeBackgroundImage();
        } else {
            //controlbarheight = 20; // hier die control-höhe eingeben
        }
        imagepositiondelta = stage.stageHeight - canvasimageheight - controlbarheight;
        _imageHolder.y = imagepositiondelta / 2;
    }
    

}

Mit diesen Änderungen wird das Hintergrundbild in das 16:9 Format skaliert und im vollbild-modus wird es entfernt damit bei anders formatigen Monitoren (eher beim 4:3 Format relevant) keine Hintergründe bei scaling: 'fit' zu sehen sind.

Weitere wichtige Informationen

Die Controls können auch in den Player integriert werden wodurch ein request gespart wird.

Achtung: Die Version 3.2.5 beinhaltet einen Fehler in den Source-Dateien. Der ui-Ordner wurde vergessen und somit entstehen Fehler beim Zusammenfügen des Players und der Controls. Den ui-Ordner hier herunterladen und in das Verzeichnis "flowplayer3.2.5\common\src\actionscript\org\flowplayer\ui" einfügen.

Impressum