Conociendo Flex VIII: Insertando videos en grillas

.
A continuación, un sencillo ejemplo, tomado de Mjcprasad´s Blog , donde se ve como se puede insertar videos en celdas de una estructura datagrid.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">

<mx:Script>

<![CDATA[
private var dataList:XMLList =
<>
<Item id="1">
<File>http://www.rtve.es/resources/TE_CULTUR/flv/1/3/1239112859631.flv</File>
<Detail>Andres Calamaro</Detail>
</Item>
<Item id="2">
<File>http://videosfla.uigc.net/canal13/2009/04/29/mclqp290409malnati.flv</File>
<Detail>Ibarra paseando por las calles</Detail>
</Item>
<Item id="3">
<File>http://videos.icnetwork.co.uk/liverpoolecho/Video-100252-23596902.flv</File>
<Detail>Un tercer ejemplo</Detail>
</Item>
</>;

private function init():void
{ dgSample.dataProvider = dataList; }

]]>
</mx:Script>

<mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" />
<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
<mx:DataGrid id="dgSample" rowHeight="200">
<mx:columns>
<mx:DataGridColumn id="dgColumnArchiveSession" headerText="Video" width="250">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%" height="100%" rollOver="showControls()" rollOut="hideControls()">
<mx:Script>
<![CDATA[
private function showControls():void
{outerDocument.fadeIn.play([controls]);}

private function hideControls():void
{outerDocument.fadeOut.play([controls]);}

private function playPauseButton_click(evt:MouseEvent):void
{
if (vdoDisplay.playing)
{vdoDisplay.pause();}
else
{vdoDisplay.play();}
}

private function stopButton_click(evt:MouseEvent):void
{vdoDisplay.stop();}
]]>
</mx:Script>
<mx:VideoDisplay id="vdoDisplay" left="0" right="0" bottom="0" top="0" source="{data.File}" autoPlay="false" />
<mx:HBox id="controls" styleName="controllerStyle" alpha="0.0" bottom="0" left="0" right="0">
<mx:Button id="playPauseButton" label="Play" styleName="playPauseStyle" toggle="true" selected="{vdoDisplay.playing}" click="playPauseButton_click(event)"/>
<mx:Button id="stopButton" label="Stop" styleName="stopStyle" click="stopButton_click(event)" />
<mx:HBox width="100%" paddingTop="3">
<mx:ProgressBar width="100%" id="progressBar" label="" height="10" labelPlacement="center" mode="manual" />
</mx:HBox>
</mx:HBox>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Comentarios" width="300" dataField="Detail" />
</mx:columns>
</mx:DataGrid>

</mx:Application>