Update: a newer and better version of this can be found here:
Improved Flv player with XML playlist
Example (Flash ActionScript 3.0 w/ Flex 3 click for source)
EDIT: EXAMPLE HAAS BEEN TAKEN DOWN FOR BANDWIDTH REASONS – USE THE ABOVE LINK TO VIEW THE SOURCE
This is an improvement on the previous .flv player found here:
I had comments (thanks for the feedback!) asking for a way to have the player loop through the playlist, playing one vid after another. Since the Flv player was made using a local connection between two .swfs, one flex and one flash, this required a little thought, but the solution was easier than I imagined it would be.
Basically what’s going on is this: There’s a Flex app with a Flash swf containing an FLV component, embedded in it. The two swfs are communicating via a LocalConnection(). initially I had a one-way communication, consisting of the Flex app changing the path to the flv each time a button is clicked, and sending the new path to the Flash swf. The flash swf however, had no way of Knowing what the next vid would be, and hence the breakdown. What I did was simply create a local connection from the Flash swf back to the flex swf. This called a function on the Flex swf when the Flv playback component completed the video. (sent a complete() event). This function does two things. It increments a numeric variable i , then send a new path based on the variable back to the Flash .swf. The variable i is initially set at 0. This means that when the video comes to an end, it increments i to 1, then send the path from the second button in the repeater ( btn[1] ) back to Flash. Also when you click a button out of order, i is set to the index of that button, which would increment i, and send the next path after that vid is finished.
Here’s the new code:
FLASH:
myFlv.contentPath = “http://www.path/to/your/first/vid.flv”;
var fromFlex_lc:LocalConnection = new LocalConnection();
fromFlex_lc.setPath = function(myPath) { myFlv.contentPath = myPath; }
fromFlex_lc.allowDomain(‘*’);
fromFlex_lc.connect( ‘lc_from_flex’ );
myFlv.complete = function(){
var toFlex_lc:LocalConnection = new LocalConnection();
toFlex_lc.send(‘lc_from_flash’, ‘setNewPaths’);
}
FLEX:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:custom=”custom.*” layout=”absolute” backgroundColor=”#030303″ creationComplete=”videoData.send(); init_lc();”>
<mx:Script>
<![CDATA[
import flash.net.LocalConnection;
import mx.controls.Alert;
public var myPath:String = "Aspen.flv";
[Bindable]
var i=0;
private var toFlash_lc:LocalConnection;
private var fromFlash_lc:LocalConnection;
public function setNewPaths():void{
i++
toFlash_lc.send(‘lc_from_flex’, ‘setPath’, btn[i].path);
}
function init_lc():void{
fromFlash_lc = new LocalConnection();
toFlash_lc = new LocalConnection();
fromFlash_lc.allowDomain(‘*’);
fromFlash_lc.client = this;
fromFlash_lc.connect( ‘lc_from_flash’ );
}
]]>
</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″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” backgroundImage=”@Embed(source=’../images/canvasBG.png’)” borderStyle=”none” backgroundSize=”100%”>
<mx:Image source=”{videoRepeater.currentItem.thumbnail}” verticalCenter=”0″ left=”10″/>
<custom:VideoButton id=”btn” path=”{videoRepeater.currentItem.file}” label=”select” mouseDown=”i=event.target.repeaterIndices” mouseUp=”toFlash_lc.send(‘lc_from_flex’, ‘setPath’,String(event.currentTarget.path))” top=”10″ right=”25″ color=”#ffffff” fontFamily=”Arial” fontSize=”14″ fontWeight=”normal” fillAlphas=”.2,0,0,0″ themeColor=”#464545″ />
<mx:Label color=”#cccccc” fontFamily=”Arial” left=”80″ top=”10″ fontWeight=”normal” fontSize=”15″ text=”{videoRepeater.currentItem.title}”/>
<mx:Label color=”#cccccc” fontFamily=”Arial” left=”80″ bottom=”10″ fontWeight=”normal” fontSize=”13″ text=”{videoRepeater.currentItem.description}”/>
</mx:Canvas>
</mx:Repeater>
</mx:VBox>
</mx:Application>
Pingback: Flex Community Blog » Blog Archive » Flex - Creating an .flv video player with xml playlist
Hi. Your player looks awesome. I’ve been trying to do it, but flex gives errors.
The playlist doesn’t work, but everything else seems to alright.
The error that appears twice -> *1084: var ‘i’ will be scoped to the default namespace: main: internal. It will not be visible outside of this package.*
The error appears before
…this: var i=0;
…and this: function init_lc():void{
I am so desperate. What am I doing wrong?
Salap, can you post the code exactly as you’ve got it in your file, I’ll look it over and see why your getting these errors. one thing to try would be to change your line to:
public var i:Number = 0;
are you using flex 2 or 3?
Thank you for your help. I’m using Flash 8 and Flex 3.
I made changes and the Flex doesn’t warn about anything anymore.
But the playlist doesn’t still work, when I run it.
MXML code:
When I run the player in browser, I get an ActionScript error:
Error #2044: Unhandled AsyncErrorEvent:. text=Error #2095: flash.net.LocalConnection was unable to invoke callback setNewPaths. error=TypeError: Error #1010: A term is undefined and has no properties.
hi your player rocks. i have followed all instructions and all work fine, nut i have the same problem of salap, at the end of last video, when it finish you have #2044 error asyncErrorEvent, and i have notice that also on your example there is the same problem, how i can fix it?
Thx
Jack & Salap, thanks for your responses. Yes, it appears I’ve overlooked something. I’ll fix it asap.
Jack & Salap, replace your setNewPaths() function in your Flex file with the following code:
public function setNewPaths():void{if(btn.length-1>i){
i++
}
else{i=0}
toFlash_lc.send('lc_from_flex', 'setPath', btn[i].path);
}
Thank you for your help
Now the error message is gone (browser alert), but the playlist doesn’t still work (player freezes after 1st video). I’m out of ideas.
I published all my files: http://salap.ownspace.org/
If anyone has time to check them out, I would be happy. I have checked everything so many times – maybe I’m blinded by the code or something.
Thank you,
Salap.
Hello,
I tried to implement your solution. I was able to copy everything, but I don’t see any controls (play/stop and so on) in the video.
What am I doing wrong?
Thank you
simoor
Salap, It looks like the names of your .flv files don’t match the names in your xml file.
Simoor. In your Flash file, look in your FLVPlayback component’s parameters. Make sure your skin does not say “none” and also you can set ‘auto hide’ to false…
simoor, also your skin’s .swf needs to be published along with your other files, and be in the same folder as your main flash .swf
OK, I got flvPlayer.sqf, playlist.xml and vidPage.swf in the main folder, I got the history.css and the history.js and I got the AC_OETags.js.
Which files do I need in addition?
I copied from your example:
http://blog.flexcommunity.net/lab/flvPlayer2/bin-debug/flvPlayer.html
you need the .swf for the skin you’re using for vidPage.swf, for example:
ClearExternalAll.swf
I’ll enable source view on my example shortly, to avoid any further directory questions. Stay tuned…
I have provided the source here:
http://blog.flexcommunity.net/lab/flvPlayer2/srcview/
Thank you admin. I forgot rename those files (embarrassed). Oh dear, I’m getting old I guess
Thank you so much for everything. The player seems ok now.
I will keep following this great blog, thank you
Great! thanks for the comments, they help discover things I’ve missed…
Hi,
Thanks for the improvements.
Now, when I review the example of the FLV player, I am unable to click forward to the next video. When I try to do so, it either just starts the current video from the beginning or it crashes the player and no longer responds.
http://blog.flexcommunity.net/lab/flvPlayer2/flvPlayer.html
Can you repost the latest source code, with all fixes and improvements (as per errors mentioned above)?
I think we should be able to navigate through the playlist using the controls on the player itself.
Other than that, very inspiring. Many thanks!
Shawoody, the posted source code here:
http://blog.flexcommunity.net/lab/flvPlayer2/srcview/
reflects the current state of the player. As for the forward and back controls of the player, good point. I’ll work on that. It may require extending the FLVPlayback class, since the function called when these buttons are pressed is built into the class. I’ll keep you posted on my progress…
Thanks a lot.
I am new here and learning by example. This worked out of the box, TYVM. Could you also post with the source .fla’s for the other .swf? …so I can look at them as well. TY
gsb, sure:
http://blog.flexcommunity.net/lab/flvPlayer2/vidPage.fla
It’s great to learner to how create flv player flex 3. Can any one build a player similar to imeem.com.. the playlist they designed.
Due to some recent requests, I have decided to improve this player further. In order to do so, I will need to extend the FLVPlayback class. Since I don’t really want to code in AS 2 anymore, I’m redoing the whole thing in AS 3.0 only. This sort of defeats the original intent of this article, but it will make for a better end product. You can go to the top of the page to see the link to the new AS 3.0 version (with full screen support). Stay tuned for the promised improvements…
P.S. the code for the new AS 3.0 Flash FLA is the following: (there is an instance of the FLVPlayback component on the stage, named myFlv)
import fl.video.*;
import flash.net.LocalConnection;
myFlv.source = “high.flv”;
var fromFlex_lc:LocalConnection;
fromFlex_lc = new LocalConnection();
var toFlex_lc:LocalConnection;
toFlex_lc = new LocalConnection();
fromFlex_lc.allowDomain(‘*’);
fromFlex_lc.client = this;
fromFlex_lc.connect( ‘lc_from_flex’ );
function setPath(myPath):void{myFlv.source = myPath; }
myFlv.addEventListener(VideoEvent.COMPLETE,function(){completeHandler();});
function completeHandler():void{
trace(“video done”);
toFlex_lc.send(‘lc_from_flash’, ‘setNewPaths’);
}
Thats a great enhancement..Cant playlist is in player itself instead of placing outside player. exactly like imeem.com..that will be great help to how to do this. I’m newbie in Flex..
swaban, imeem.com does have a great player. It’s not really what I’m trying to do here though. One way to make the playlist look more like that would be to use a combination of a TabNavigator with a Tile layout component in Flex. imeem.com’s actual player is Flash, but it looks like their playlist is javascript. I actually prefer the ability to scroll through the playlist, as opposed to it self updating. One of my favorite video apps right now is msnbc.com, which is what this will probably end up looking most like when I’m done …
Shawoody, I’ve made the modification your requested. Thanks for the suggestion.
http://blog.flexcommunity.net/lab/flvPlayer3/flvPlayer.html
Use the above as 3.0 link for the latest version (right click for source). I extended the FLVPlayback class. The new CustomFLVPlayback class file is in the ‘custom’ folder. Also in the Flash FLA, I am instantiating the player dynamically. The new code for the FLA is:
import fl.video.*;
import flash.net.LocalConnection;
import custom.*;
var myFlv:CustomFLVPlayer;
myFlv = new CustomFLVPlayer();
addChild(myFlv);
myFlv.x = 0;
myFlv.y = 0;
myFlv.width = 600;
myFlv.height = 400;
myFlv.skin = “SkinOverAll.swf”;
myFlv.source = “high.flv”;
var fromFlex_lc:LocalConnection;
fromFlex_lc = new LocalConnection();
var toFlex_lc:LocalConnection;
toFlex_lc = new LocalConnection();
fromFlex_lc.allowDomain(‘*’);
fromFlex_lc.client = this;
fromFlex_lc.connect( ‘lc_from_flex’ );
function setPath(myPath):void{myFlv.source = myPath; }
myFlv.addEventListener(VideoEvent.COMPLETE,function(){completeHandler();});
function completeHandler():void{
trace(“video done”);
toFlex_lc.send(‘lc_from_flash’, ‘setNewPaths’);
}
Thanks admin. Great help from you to learn lot of about Flash & Flex..
Yes msnbc.com player also has great features and functionality. Appreciate if you show us some steps how to do this type of player.
I’ve customize a AS3 flv control and updated your player, everything is working except the full screen preview. Not sure what is wrong. See it here.
http://www.agcreativesolutions.com/samples/bin-debug/flvPlayer.html
Thanks once again for your help.
swaban, In order for the fullscreen functionality to work, you need to modify your html wrapper. The one that Flex auto generates does not have fullescreen support enabled by default. You can view the source of my AS 3.0 example to see the changes. Also, as far as the msnbc player, I’m not going to copy it really, but build similar functionality in to mine (scrolling playlist, category menu, etc) this will be an ongoing process. Right now, I’m working on a custom skin, which I’ll post when it’s done. Thanks for your interest in this!
Yes that will also help us if you implement that functionality in your player.
“html wrapper” what is the code..
The ‘html wrapper’ is the main html page that your flex .swf is embedded in. Flex generates this page automatically. In order to allow full screen support, this page must be modified. Keep in mind that if you modify the html wrapper, then recompile your Flex app, flex will regenerate the html wrapper, and overwrite your modifications. To avoid this, in your Flex project, goto Project -> Properties -> Flex Compiler, and deselect “Generate HTML wrapper file.
You can view the modified code by going to: http://blog.flexcommunity.net/lab/flvPlayer3/flvPlayer.html
and view the page source (in firefox, this is View->Page Source)
You can see that the fullScreen parameter is set to true in several places in the html file.
yes it works now.. but this is not coming by default.. why we need to set the param manually ..are there any other option. Thanks for your help.
Great work. It’s really coming along nicely. Glad my suggestion could help.
Maybe you can provide people a way to offer their own skins, etc.
Thanks for being so receptive to public requests.
Thanks! btw, I just changed the look and feel a little:
http://blog.flexcommunity.net/lab/flvPlayer3/flvPlayer.html
Now that the functionality is getting where I want it, I’m going to spend some time on the design. Right now it’s not done with CSS (sorry), but I’ll add that soon, so changing the look around will be easier. As far as skinning the controls for the flvPlayback component itself, you can set some parameters with actionscript in the vidPage2.fla , there’s not much more than color, alpha fade time, stuff like that:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/video/FLVPlayback.html
so to actually change the skin for the controls, you’ll need to make your own skin .swf. Eventually I will do one, and post it when I do.
cheers
This app is now styled with CSS, feel free to submit your own styles or examples if you use this player on a site, I’d love to see it!
latest version: http://blog.flexcommunity.net/lab/flvPlayer3/flvPlayer.html
Right click for source
Pingback: Flex Community Blog » Blog Archive » Turning Flash CS3 assets into Flex components – Integration of Flash and Flex using Flex Component Kit
I have a problem when running this solution. That is: in the first run, everything was ok, but the second run I met an error:
“ArgumentError: Error #2082: Connect failed because the object is already connected.
at flash.net::LocalConnection/connect()”
How can I resolve this problem ?
Thank
Try relaunching your browser. Are you running Firefox? I have experienced this a couple times with Firefox during development. I haven’t experienced it with a live site.
Great work . It is simply amazing .
What I noticed ( may be if you have time)
1) When the second video was playing , I was not able to see the moving pointer
2)What are the two icons on the player ( down right hand side , next to volume controller)
3)Do you have maximize functionality ? I don’t see it on the example
4) Can I play youtube videos directly from this player? I tried changing the XML files with youtube links but it is not working . may be I am missing some thing ?
Thanks
Bujji