Add Video in DataGrid(Item Rendering videodisplay in DataGrid)


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” creationComplete=”init()”>
<mx:Script>
<![CDATA[
private var dataList:XMLList =
<>
<Item id=”1″>
<File>Sample1.FLV</File>
<Detail>Lorem Ipsum text1</Detail>
</Item>
<Item id=”2″>
<File>Sample2.FLV</File>
<Detail>Lorem Ipsum text2</Detail>
</Item>
<Item id=”3″>
<File>Sample3.FLV</File>
<Detail>Lorem Ipsum text3</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=”Videos” 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” styleName=”playPauseStyle” toggle=”true”
selected=”{vdoDisplay.playing}” click=”playPauseButton_click(event)”/>
<mx:Button id=”stopButton” 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=”Details” width=”300″ dataField=”Detail”  />
</mx:columns>
</mx:DataGrid>
</mx:Application>

~ by mjcprasad2000 on May 13, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: