Using the Flash FLVPlayback control in Flex

The following example shows how you can use the Flash FLVPlayback component that ships with Flash CS3 and Flash CS4 by copying the FLVPlaybackAS3.swc file into your Flex project’s /libs/ folder.

Full code after the jump.

Flash CS3
PC: \Adobe Flash CS3\en\Configuration\Components\Video\FLVPlaybackAS3.swc

Flash CS4
PC: \Adobe Flash CS4\Common\Configuration\Components\Video\FLVPlaybackAS3.swc

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/11/using-the-flash-flvplayback-control-in-flex/ -->
<mx:Application name="FLVPlayback_MXML_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:video="fl.video.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function flvPlayback_autoLayout(evt:Event):void {
                videoHolder.width = flvPlayback.width;
                videoHolder.height = flvPlayback.height;
                flvPlayback.x = 0;
                flvPlayback.y = 0;
            }
        ]]>
    </mx:Script>

    <video:FLVPlayback id="flvPlayback"
            source="http://www.helpexamples.com/flash/video/caption_video.flv"
            scaleMode="maintainAspectRatio"
            skin="SkinOverPlaySeekMute.swf"
            skinAutoHide="true"
            autoLayout="flvPlayback_autoLayout(event);" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Play Video"
                click="videoHolder.addChild(flvPlayback);" />
    </mx:ApplicationControlBar>

    <mx:Panel backgroundColor="red">
        <mx:UIComponent id="videoHolder" />
    </mx:Panel>

</mx:Application>