Flex – Creating an .flv video player with xml playlist
[edit: improvement here]
This is a method of creating a video player with a playlist (with thumbnails) populated by an external xml file, with flash and flex. This experiment also explores integrating Flex 3 with flash AS2 .swfs.
In order for an .swf compiled from Actionscript 2 to communicate with an .swf compiled from AS3 (a flash 8 swf embedded in a flex project) we have to make a LocalConnection(); and specify the way they are to communicate. Here, I called a function to change the source path to the flash fvlPlayback component.
And – here’s the hacky part – I created a custom class extending Button, to give it a “path” parameter, which I could access directly from the Repeater, without creating an xmlListCollection, or an Array to reassemble the data from the dataProvider.
Here are the steps involved:
1) in flash, create a new FLA, drag an instance of the .flv playback component (call it myFlv), and on the first frame, add the following code:
myFlv.contentPath = “http://path/to/the/first/video/you/want/to/play.flv”
var fromFlex_lc:LocalConnection = new LocalConnection();
fromFlex_lc.setPath = function(myPath) { myFlv.contentPath = myPath; }
fromFlex_lc.allowDomain(“*”);
fromFlex_lc.connect( “lc_from_flex” );
//This creates a localConnection that connects with “lc_from_flex”
Now, create a Flex project, with the following code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:custom=”custom.*” layout=”absolute” backgroundColor=”#333333″ creationComplete=”videoData.send();”>
<mx:Script>
<![CDATA[
import flash.net.LocalConnection;
import mx.controls.Alert;
public var myPath:String = "Aspen.flv";
var toFlash_lc:LocalConnection = new LocalConnection();
]]>
</mx:Script>
<mx:HTTPService id=”videoData”
url=”playlist.xml”
resultFormat=”e4x”/>
<mx:SWFLoader source=”vidPage.swf” horizontalCenter=”-100″ verticalCenter=”0″ width=”600″ height=”400″/>
<mx:VBox height=”400″ horizontalScrollPolicy=”off” verticalCenter=”0″ horizontalCenter=”355″>
<mx:Repeater id=”videoRepeater” dataProvider=”{videoData.lastResult.item}”>
<mx:Canvas width=”300″ height=”80″ backgroundColor=”#000000″ >
<mx:Image source=”{videoRepeater.currentItem.thumbnail}” verticalCenter=”0″ left=”10″/>
<custom:VideoButton id=”btn” path=”{videoRepeater.currentItem.file}” label=”select” click=”toFlash_lc.send(‘lc_from_flex’, ‘setPath’,String(event.currentTarget.path))” bottom=”10″ right=”25″/>
<mx:Label color=”#cccccc” fontFamily=”Arial” left=”80″ top=”10″ fontWeight=”normal” fontSize=”16″ text=”{videoRepeater.currentItem.title}”/>
</mx:Canvas>
</mx:Repeater>
</mx:VBox>
</mx:Application>
This code is:
1) creating an .swfLoader which loads the .swf we created in Flash
2) making an HTTPService() call to an external xml file
3) invoking the Repeater component, which reads it’s data from the xml file, and creates an item for our playlist menu from each “item” node in the xml document
4) our “select” button has a new property -”path” that takes it’s data from the xml file, and gets passed to our click=”toFlash_lc.send(‘lc_from_flex’, ‘setPath’,String(event.currentTarget.path))” function, thus changing the path to the flyPlayback component in the Flash .swf
The xml structure is as follows:
<?xml version=”1.0″ encoding=”utf-8″?>
<FlvPlayer>
<item>
<file>http://www.path/to/your.flv</file>
<title></title>
<thumbnail>http://www.path/to/your.jpg</thumbnail>
<description></description>
</item>
</FlvPlayer>
The custom button code is:
package custom
{
import mx.controls.Button;
public class VideoButton extends Button
{
public function VideoButton()
{
super();
}
public var path:String = “”;
[Inspectable(category="General", defaultValue="")]
}
}
I’d love this to work, I can’t view the example either.
Im using Flex Builder beta 3. I get this error:
Could not resolve to a component implementation.
Mabey im mucking it up in the custom.mxml? It is called custom.mxml and is in a folder called “custom” in the same directory as my main source .mxml.
Any help would be greatly appreciated.
package custom
{
import mx.controls.Button;
public class VideoButton extends Button
{
public function VideoButton()
{
super();
}
public var path:String = “”;
[Inspectable(category="General", defaultValue="")]
}
}
‘Could not resolve to a component implementation’ is an error that occurs either when flex can’t find your class file (the namespace is missing or incorrect), or you’ve named the class something other than what you’ve invoked in your MXML. It looks like you’ve named the class wrong. It should be named VideoButton.as (it’s an actionscript class) and should be contained in a folder called custom. (in the code for the class you see ‘package custom’ – this means it’s in a folder called custom, and ‘public class VideoButton extends Button’ – htis means the file name of the class must be VideoButton.as.
Also within your application tag you need to have the namespace – xmlns:custom=”custom.*” , this tells flex where the class files are for components declared as custom, finally invoke the class like this: custom:VideoButton …
Hopefully this helps, btw did you say you couldn’t view the example? let me know if you can’t view it, as I’ll need to figure out why, what version of the flash player are you using?
Thanks, Admin
Pingback: Flex Community Blog » Blog Archive » Flex - creating an xml photo gallery (with very little code)
I liked your playlist, but I see that is a little slow when you click on a video. Are you using streaming?
Do you know some good hosting company which I can use to streaming video?
No, I’m not using streaming, this is simply a progressive download of an .flv, using the flash flvplayback component. It is subject to the users machine, the users internet speed, the server bandwidth, traffic, etc. They play well for me, but it’s always a battle between video quality, and download speed. As far as hosting, I use a Media Temple dv server which I’m happy with, except to get enough ram on your plan for streaming, it’s a little expensive. They do have good bandwidth, etc. We’ve tested red5 on it, but it really eats the ram. I don’t know of a cheap host that’s good to run Flash media server or Red5 on … the main things you want to look for are: alot of bandwidth, alot of RAM, and root access to the server. Hope this helps a little.
I would like to creat a flash video player with a xml playlist that uses flash media server for streaming. The playlist should be able to create thumbnails. I have tried the sample at adobe.com at http://www.adobe.com/devnet/flash/articles/video_player.html but I couldn’t make it to work.
I have seen a very good example at http://www.msnbc.msn.com/id/21134540/vp/23376249#23376249
If anyone can make a similar playlist I would be greatful. Please get in touch. I am ready to pay for one.
I attempted this and it compiled but all I get is a flashing icon.
Can you give some more info. What kind of flashing icon? any error messages? does the flex swf. play, but not the flash .swf?
Everything setups fine no error messages. No sounds. It’s as if the FLVPlayer isn’t playing the file, just a blinking icon letting you know that it is an FLV Player. You can see an example @ http://www.southernswerve.com/videotest.
The problem is this: This example uses a Flash AS 2.0 swf (with flvPlayback component), your Flash file is AS 3.0.
this code: myFlv.contentPath = “http://path/to/the/first/video/you/want/to/play.flv”
var fromFlex_lc:LocalConnection = new LocalConnection();
fromFlex_lc.setPath = function(myPath) { myFlv.contentPath = myPath; }
fromFlex_lc.allowDomain(”*”);
fromFlex_lc.connect( “lc_from_flex” );
Does not work in AS 3.0.
So in order to fix this, you’ll either change the code to AS 3.0, or open up your .FLA, goto publish settings, change it to AS 2.0, then remove your FLVPlayback component, open the components window, and darg a new one on the stage, name it, and you should be good to go. I tested this from my local machine, and it read your .FLV just fine.
-Admin
Yes thanks alot it worked great. I have one question how do I make it cycle through the videos automatically?
Cycling through … good question. It is currently set up for the flex swf to communicate with Flash, not the other way around. Off the top of my head, I would explore first creating a two-way connection, and putting cue points at the end of each video, to call a function to Flex to change the path, then back to Flash to move to the the next video. Not the simplest sounding thing I know, but it’s the first thing I thought of. I don’t have time to persue this right now, as I’m involved in big project, but that would be a great follow-up … keep me posted if you make progress in this area, and I’ll do the same.
Please see this image. The error is this. Kindly help me.
http://i-digit.net/errormessage/index.html
I saved my flex file as custom.mxml
actionscript file as VideoButton.as
XML file as playlist.as
Flash file as flvPlayer.fla
Please help me.
That’s a syntax error. The error is saying your MXML tag for custom:VideoButton is not closed, but it may be something else syntactic, can you show or post all the code from line 17 down.
Nice setup. I do think it’s important to at least have an option for the videos to play consecutively (hence “playlist”).
Have you come up with a specific way of doing this yet?
This would make it almost perfect.
Any info would be appreciated.
Thanks!
I agree, I’ll get back on this soon I promise:). i have a basic concept of how to go about it. Start a two-way conversation between the flex and flash .swfs. Flex setting the path for the flash vid, and flash sending a call to a function when the vid ends. This function would increment indices in an array that holds all the paths taken from the repeater component, then send the path back to Flash and initiate Play again. Sounds good … just need tthe time to do it … I’ll keep you posted.
Pingback: Flex Community Blog » Blog Archive » Working with the Repeater component
Pingback: Flex Community Blog » Blog Archive » Improved Flex Flv Player with XML playlist
karega & shawoody, I worked out the consecutive playback of vids – click the link below. Thanks for your feedback.
http://blog.flexcommunity.net/?p=35