Simple Youtube Flex application

I wanted to build a simple Flex application for working with Youtube API, most of the blogs that i found on the internet talk about how to use as3-youtube-data-api for building that type of application, so i tried to build Flex application using that library but could not get it working, so i decided to build a simple demo application that makes use of Youtube API without any library

My Sample application lets you search for video first and then when you double click on a video, it will display that video below the search result for display



This the source code of my sample Youtube Flex application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
backgroundColor="0x000000" viewSourceURL="srcview/index.html" >
<mx:Script>
<![CDATA[
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;
import mx.collections.XMLListCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
protected var dp:ArrayCollection;
protected function onResult(event:ResultEvent):void{
var feed:Object = JSON.decode(event.result as String).feed;
dp = new ArrayCollection(feed.entry);
}
protected function onFault(event:FaultEvent):void{
trace("Fault: " + event.fault.faultString);
}
protected function dgLabelFunction(row:Object,column:DataGridColumn):String{
if (column.dataField=="title")
return row.title.$t;
else if (column.dataField=="content")
return row.content.$t;
else return row.published.$t;
}
protected function getURL():String{
trace("Entering getURL()");
var videoUrlStr:String = dg.selectedItem.link[0].href;
var startingIndex:int = videoUrlStr.indexOf("?v=") +3;
var endingIndex = videoUrlStr.indexOf("&feature");
var tokenLength:int = endingIndex - startingIndex;
var v:String = videoUrlStr.substr(startingIndex, tokenLength);
var videoUrl = "http://www.youtube.com/v/" + v;
return videoUrl;
}
private function displayYouTube(videoUrl:String):void{
trace("Changing value of URL " + videoUrl);
swfloader.source = videoUrl;
}
]]>
</mx:Script>
<mx:HTTPService id="youTubeService" url="http://gdata.youtube.com/feeds/api/videos"
resultFormat="text" result="onResult(event)" fault="onFault(event)">
<mx:request>
<q>{searchTxt.text}</q>
<alt>json</alt>
</mx:request>
</mx:HTTPService>

<mx:HBox top="10" left="10">
<mx:Label text="Search YouTube:" color="0xFFFFFF"/>
<mx:TextInput id="searchTxt" enter="youTubeService.send()"/>
<mx:Button label="Go!" click="youTubeService.send()"/>
<mx:Label id="msg" text="Double click result to open video" visible="false"/>
</mx:HBox>
<mx:HBox width="100%" top="40" left="10" color="#000000">
<mx:DataGrid id="dg" width="620" height="220" doubleClickEnabled="true"
dataProvider="{dp}" doubleClick="displayYouTube(getURL())">
<mx:columns>
<mx:DataGridColumn dataField="title" labelFunction="dgLabelFunction"
headerText="Title" width="150"/>
<mx:DataGridColumn dataField="content" labelFunction="dgLabelFunction"
headerText="Content" width="200" />
<mx:DataGridColumn dataField="published" labelFunction="dgLabelFunction"
headerText="Published" width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
<mx:SWFLoader x="10" y="268" source="" id="swfloader"
autoLoad="true" scaleContent="true"/>
</mx:Application>


In my Sample application i have a mx:HTTPService pointing to http://gdata.youtube.com/feeds/api/videos, when you enter some text in the search box and click on GO it makes a HTTP request to the Http Service by making HTTP GET call to http://gdata.youtube.com/feeds/api/videos?alt=json&q=cricket, in this value of q is cricket because thats my search criteria.

The response is a JSON feed cricket video. I am decoding the feed and displaying it in the spreadsheet format using this code

protected function onResult(event:ResultEvent):void{
var feed:Object = JSON.decode(event.result as String).feed;
dp = new ArrayCollection(feed.entry);
}


Every row in the spread sheet has displayYouTube() has event listener for double click, when you double click on any row in the spread sheet i am building a URL to that video and assiging it as value of source for SWFLoader that is part of the mxml.

protected function getURL():String{
trace("Entering getURL()");
var videoUrlStr:String = dg.selectedItem.link[0].href;
var startingIndex:int = videoUrlStr.indexOf("?v=") +3;
var endingIndex = videoUrlStr.indexOf("&feature");
var tokenLength:int = endingIndex - startingIndex;
var v:String = videoUrlStr.substr(startingIndex, tokenLength);
var videoUrl = "http://www.youtube.com/v/" + v;
return videoUrl;
}
private function displayYouTube(videoUrl:String):void{
trace("Changing value of URL " + videoUrl);
swfloader.source = videoUrl;
}


When you click on any of the video it will build a URL like http://www.youtube.com/v/q9ew_nITQWY and set it as value of SWFLoader source attribute.

3 comments:

srjwebsolutions said...


We are leading responsive website designing and development company in Noida.
We are offering mobile friendly responsive website designing, website development, e-commerce website, seo service and sem services in Noida.

Responsive Website Designing Company in Noida
Website Designing Company in Noida
SEO Services in Noida
SMO Services in Noida

Vikas Chaudhary said...

Battery Mantra is Authorized exide car battery dealer in Noida and Greater Noida. We are providing our service in Indirapuram, Delhi, Ashok Nagar.

Exide Battery Dealer in Noida
Battery Dealer in Noida
Authorized Battery Dealer in Noida
Car Battery Dealer in Noida
Car Battery Dealer
Exide Battery Dealer

EG MEDI said...

Egmedi.com is online medical store pharmacy in laxmi nagar Delhi. You can Order prescription/OTC medicines online.
Cash on Delivery available. Free Home Delivery


Online Pharmacy in Delhi
Buy Online medicine in Delhi
Online Pharmacy in laxmi nagar
Buy Online medicine in laxmi nagar
Onine Medical Store in Delhi
Online Medical store in laxmi nagar
Online medicine store in delhi
online medicine store in laxmi nagar
Purchase Medicine Online
Online Pharmacy India
Online Medical Store