Bees Are Social By Nature

Transcribed thoughts and experiences about computer programming.

A Super Simple FLV Player using ActionScript 3.0

As part of my ongoing pursuit of learning a wide variety of technologies, I decided to see what ActionScript 3.0 was all about. As part of my learning, I decided I wanted to join the ever growing crowd of people that have “created” their own FLV Players. I knew people weren’t actually creating the video player and were really just setting up Video component in the UI and telling it what video to play, yet I still wanted to see how it was done. As such, my journey into ActionScript 3.0 began. Fair warning: I get real lazy about writing clean code, organizing my files, and setting up my development environment when I just start learning something. As such, the following embraces the lazy approach to getting things started.

Prerequisites:

Flex 2 SDK: http://www.adobe.com/products/flex/sdk/
Example FLV Files: http://www.mediacollege.com/flash/video/tutorial/example-flv.html

1) Install Flex 2 SDK

After downloading the flex_sdk_2.zip, I just unzipped the contents in to a work folder, c:\flex_sdk_2. The key resources I used from this package with were the compiler, bin\mxmlc.exe, and the debug Flash player (player\debug\SAFlashPlayer.exe).

2) As a ActionScript3 novice, I browsed a few tutorial sites. Then I went ahead and compiled and ran a few different tutorials. I found that the Beginners Guide to Getting Started with AS3 at http://www.senocular.com/flash/tutorials/as3withmxmlc/ to be very helpful, and you will find it goes into much greater detailon the use of the mxmlc.exe command line tool than I go into here. Next, I decided I want to be cool like everyone else and create an FLV Video Player. After doing a decent search, I noticed that most of the tutorials for creating FLV Video PLayers were using Flash Professional, which is outside of my “just learning” budget. However, I did find what I was looking for in the Adobe Flash Media Development Center. The tutorial taught me a lot more than I initially wanted, but it showed me exactly what I need to do to create my own.

3) Once I read the tutorial, I embarked on creating my own SuperSimpleFLVPlayer. In order to test whatever I ended up making, I needed an example FLV file and I found one at
http://www.mediacollege.com/flash/video/tutorial/example-flv.html. I downloaded ‘20051210-w50s_56K.flv’ and saved it as c:\flex_sdk_2\learning\20051210-w50s_56K.flv.

4) Next, I generated the following source in my favorite text editor:

package { 
    import flash.display.Sprite; 
    import flash.net.NetConnection; 
    import flash.net.NetStream;  

    import flash.media.Video; 
    public class SuperSimpleFLVPlayer extends Sprite {  

        private var nc:NetConnection; 
        private var ns:NetStream; 
        private var vid:Video; 
        private var client:Object; 
        public function SuperSimpleFLVPlayer () { 
            // Initialize net stream 
            nc = new NetConnection(); 
            nc.connect (null); // Not using a media server. 
            ns = new NetStream(nc); 
            // Add video to stage 
            vid = new Video(320,240); 
            addChild (vid); 
            //vid.x = ( stage.stageWidth / 2) - ( vid.width / 2 ); 
            //vid.y = ( stage.stageHeight / 2) - ( vid.height / 2 ); 
            // Changed since when deployed the 
           // above set the video player nearly off the screen 
           // Since I am lazy, I am just going to 0 them 
           // out for now. Apparently, I have a lot more 
           // to learn. 
          vid.x = 0; 
          vid.y = 0;  

          // Add callback method for listening on 
          // NetStream meta data 
          client = new Object(); 
          ns.client = client; 
          client.onMetaData = nsMetaDataCallback; 
          // Play video 
          vid.attachNetStream ( ns ); 
          ns.play ( '20051210-w50s_56K.flv' ); 
        } 
        //MetaData 
        private function nsMetaDataCallback (mdata:Object):void { 
            trace (mdata.duration); 
        } 
    } 
}

I saved the source as c:\flex_sdk_2\learning\SuperSimpleFLVPlayer.as.

5) From the command line I compiled the file:

c:/flex_sdk_2/learning>../bin/mxmlc.exe 
        -use-network=false 
        SuperSimpleFLVPlayer.as

Note that I had to use the ‘-use-network=false’ directive. This told the compiler that I will not be using the network in my testing so don’t worry about sandbox issues when trying to load the flv from my local drives. Once I decide, if I decided, to deploy this to a website, I will need to recompile my code without this directive.

6) After compilation succeeded, I loaded the swf in the debug Flash Player:

c:/flex_sdk_2/learning>../player/debug/SAFlashPlayer.exe
        SuperSimpleFLVPlayer.swf

Success. Flash and ActionScript really is multimedia made easy.

Quick Update: I found that once I actually deployed this to a website it started behaving differently than it did in the debug tool, which I am none too happy about. However, for this quick and dirty learning experience, I just changed the vid.x and vid.y to both equal 0 and now it at least put the video into a visible part of the stage. For reference, feel free to check out what I deployed at: http://www.kriggio.com/tromstick/flv/index.html. By the way, feel free to tell me what I am doing wrong if you see anything, I really am just learning ActionScript 3.0 so any “constructive” criticism helps.

Advertisements

June 6, 2007 - Posted by | ActionScript, Programming, technology

23 Comments »

  1. I started trying to figure out how to apply this to a Flex 2 MXML – based UI, and found that a near identical version of what Idid can be found on the Adobe Flex Livedocs Site,
    http://livedocs.adobe.com/flex/2/docs/00001861.html#139750

    Comment by Kenneth Riggio | June 6, 2007 | Reply

  2. […] 19th, 2007 After creating a Simple FLV Player using ActioScript 3.0, I decided to extend my learning by going through the process of creating a simple MP3 player using […]

    Pingback by Creating a Simple MP3 Player using ActionScript 3.0 and Flex 2 « Bees Are Social By Nature | June 19, 2007 | Reply

  3. Hey Ken,

    I was poking around your site. Found this post. You can use the VideoDisplay component in Flex to show video also. I even used it to create a radio player by capturing a flv stream from a music server. If you want to see it, I will have this example link up for awhile:
    http://example.3alves.com/RadioPlayer/

    The data displayed comes from metadata tags in the flv stream. I actually extended (subclassed) the VideoDisplay component to capture the custom cuePoint metadata in the stream. Some day soon I will blog the whole thing.

    Regards,
    Tony
    P.S. (liked the blackjack example, that rocked)

    Comment by Tony | August 31, 2007 | Reply

  4. Who’s copying who here…

    http://blog.bumblemachine.com/archives/13

    Comment by Copycat | April 19, 2008 | Reply

  5. how would I add captions to a the loaded flv video you have in the above code?

    Comment by Shelby | September 2, 2008 | Reply

  6. FPlayer :: Open Source AS3 FLV PLayer version 2.00 released… It’s only 8kb :]]

    Comment by hayvanAdam | October 15, 2008 | Reply

  7. Ken, if you still hav’nt got Flash Pro 8 let me know and I can send you a working copy. But don’t tell anyone.

    Comment by denver salem | October 16, 2008 | Reply

  8. ^ Too late, because you just told the whole world.

    Comment by mad dog | February 12, 2009 | Reply

  9. thks man for sharing this example ūüėČ

    Comment by Reda Makhchan | June 2, 2009 | Reply

  10. I found your site very interesting and informative. Keep up the good work!

    Comment by JoAnn Warner | June 9, 2009 | Reply

  11. […] of the stream. When loading a video in Actionscript 3 you use the “NetStream()” class, here’s a nice tutorial. Now once we’ve got the stream playing, using “NetSteam.play( url )”, we can add […]

    Pingback by Ahmed Nuaman — Freelance Designer and Developer — Blog — Actionscript 3 Cue Points | June 18, 2009 | Reply

  12. any changes coming ?

    Comment by she was to drunk to fuck | July 24, 2009 | Reply

  13. Great summary. Thanks much. I found in the Adobe LiveDocs the following code that sorts the vid.x vid.y issues you were having.
    1.) Import these classes:

    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;

    2.) Add this to your constructor function:

    var swfStage:Stage = this.stage;
    swfStage.scaleMode = StageScaleMode.NO_SCALE;
    swfStage.align = StageAlign.TOP_LEFT;

    Kind Regards

    Comment by Linux Developer | July 30, 2009 | Reply

  14. Hi! I was surfing and found your blog post… nice! I love your blog. ūüôā Cheers! Sandra. R.

    Comment by sandrar | September 10, 2009 | Reply

  15. Nice example, kind of older but still good.
    here’s code for another very simple skinable flv player
    using newer Flex SDKs
    http://www.actiontad.com/#simpleflvplayer

    Comment by Ashely | December 28, 2009 | Reply

  16. I love your blog. I’ve added it to my favorite bookmarks and subscribed in a reader.

    Looking forward to reading more posts by you.

    Thanks.

    Comment by Web Video Tutorials | February 4, 2011 | Reply

  17. Thanks for the tips you have shared here. Something else I would like to convey is that laptop or computer memory requirements generally go up along with other developments in the technological know-how. For instance, when new generations of processors are introduced to the market, there is certainly usually a similar increase in the size and style demands of both computer memory plus hard drive space. This is because software program operated by means of these processor chips will inevitably boost in power to make use of the new technologies.

    Comment by Corazon Kiyuna | March 3, 2011 | Reply

  18. Kiddos on the blog, a well deserved pat. Made me think about a few things you talked about. Gautam T Goudar

    Comment by Gautam T Goudar, Irving TX | August 6, 2011 | Reply

  19. Very nice post. I just stumbled upon your blog and wished to mention that I’ve really enjoyed browsing your weblog posts. In any case I’ll be subscribing for your rss feed and I’m hoping you write again soon!

    Comment by magento commerce templates | January 19, 2012 | Reply

  20. Video players are nice specially if they are very compact in size. ^

    <a href="Visit our own blog site as well
    http://www.prettygoddess.com/index.php?board=5.0

    Comment by Belva Hals | November 26, 2012 | Reply

  21. A good online video player can make a huge difference in the reception of your website. Visitors want to watch videos on a full-featured online video platform that blends seamlessly into the look and feel of the site. A full-featured video player that works every time offers opportunities to build and maintain relationships with customers and encourages them to purchase from your site. In addition, it attracts leads and better ads, ultimately generating higher profits.So how can you judge if the video platform and service provider you’re considering is the right one? One thing you should always look for is a custom video player with customizable features. ,

    Make sure you visit our very own webpage as well
    <'http://www.caramoantourpackage.com

    Comment by Renea Pratley | February 25, 2013 | Reply

  22. […] creating a Simple FLV Player using ActionScript 3.0, I decided to extend my learning by going through the process of creating a simple MP3 player using […]

    Pingback by Creating a Simple MP3 Player using ActionScript 3.0 and Flex 2 | Biitlog | February 27, 2017 | Reply


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: