Tutorial – Playing FLV video in plain AS3 – Part 3 (Updated)

26 actionscript,as3,as3 tutorials,flash,work  |   September 24, 2008  |     1782

Hi Everyone,

it’s been a while.. a long while. I have been selling my time to Adobe, doing Flex work with a great team in NYC; we are working on the MediaStore for Verizon Wireless since July 21st? I forget.. NYC is nice, but not for me. I’m a nature lover!

A few people posted comments on the second part of this tutorial, kudos to you! You’re partly to blame for this late evening blog post 😉

For those who didn’t read them already, I strongly suggest starting by reading the first parts of this tutorial :

The Events

In part 2, pretty much all the functionality was covered, except the events class. I like to use custom events, which are derived from flash.events.Event
because then you are allowed to add custom properties to your events, which are easy to pick up by the listeners. For this particular case, I have identified 3 different types of events I would like to dispatch, based on the properties that are associated with each:

  • MediaEvent — for basic events that don’t require any data
  • MediaSizeEvent — for events related to the size (in pixels) of the media playing
  • MediaTimeEvent — for the events related to time (lenght, time position)

MediaEvent

MediaSizeEvent

MediaTimeEvent

Integration inside of the code

In the preview part, I hadn’t yet seperated the events to different classes in the code. So here is the updated source for FLVPlayer

MediaData
and just in case you missed it in the other parts, here is the source for the MediaData class..

That’s it folks!
I have used these classes in many projects so far, they work great! With each project they got refined a bit, so the version in this tutorial is actually the latest, which I fine-tuned for ZooToo PetWars widget. They are also used for all the work I did for Music Nation, and I am sure I will re-use them again and again. Hope you enjoyed, I will put the source .zip file up here in a few days.

[2009.12.10] UPDATE — SOURCE CODE
Due to popular request, and although I believe I shouldn’t do this, here is the source code.

Thanks!

Martin

Comments
  • September 26, 2008 at 12:47 am

    Andy

    Excellent tutorial, looking forward to getting all the bits together and playing around with it! Thanks again 🙂

  • September 29, 2008 at 1:56 am

    Sven

    Hi,

    This is great stuff, I’m sure (I get no errors when referencing the classes). But I’m having a little hard time finding out how to implement it so that I can actually get a video to play (anywhere. On stage or another MC instance).

    Do I have to create an instance of a video component of some sort first to get it to work, or? It all seem a bit abstract to me (yes, fairly new to OOP concepts. But learning though).

    Will there be a chance to see a (simple) tutorial on how to implement this thing?

  • September 29, 2008 at 2:17 am

    Sven

    OK, this is what I try to do. So you may get why I’m off in the wrong direction:

    (first I reference the classes in my class using the import statement), then:

    var myMediaData = new MediaData(“some.flv”, “some title”, 234, “some.jpg”, 508, 169);
    var myFLVPlayer = new FLVPlayer();
    myFLVPlayer.playMedia(myMediaData);

    But when I dispatch an event from a thumbnail (movieclip) to play a given flv file, I get an Error #1009: Cannot access a property or method of a null object reference.

    Any idea what I’m missing?

  • September 29, 2008 at 10:42 am

    Andy

    Ok, i’ve got it working, having a few problems with the aspect ratio (but i’m sure that’s a small issue)

    You need to create an instance of the Video class and then set that to the video instance for the FLVPlayer to use.

    So something like this…

    var myMediaData = new MediaData(“videos/test.flv“, “some title“, 234, “image.jpg“, 320, 200);

    var myFLVPlayer = new FLVPlayer();

    var video:Video = new Video(320, 200);

    myFLVPlayer.video = video;

    myFLVPlayer.playMedia(myMediaData);

    stage.addChild(video);

    Hope that helps!

    Andy

  • September 29, 2008 at 11:18 am

    Marti Legris

    very good!

    As for the aspect ratio, you want to catch the “MediaSizeEvent”, and adapt accordingly:

    If my memory serves well, this should do the trick!

  • November 20, 2008 at 10:52 pm

    Sven

    Hi (again)

    Martin, you should post a complete tutorial on using this :).

    I can’t seem to get the MediaTimeEvent to work.

    I have added a simple class that stretches according to a percentage recieved. I’ve added an eventListener to this, that listen for MediaTimeEvent. But it doesn’t seem to hear anything. When I simply run trace within the attached handler it never gets called. I’ve tried to enable bubbles but that didn’t seem to help.

    Would you be able to show a simple example of how to set this up?

  • November 20, 2008 at 10:53 pm

    Sven

    Correction ‘listen for MediaTimeEvent.TIME’

  • November 30, 2008 at 3:36 pm

    Rob Thomson

    Very nice piece. Well done.

    Just a quick note tho incase someone did a cut n paste, you spelt height wrong in your September 29th, 2008 at 11:18 am comment 😛

    ie
    video.heigth = evt.height;

  • December 8, 2008 at 9:52 pm

    steve

    Great tutorial! Does this code also work with RTMP using either FMS or Red5? If not, any chance for an updated tutorial with the additional code required?

  • December 25, 2008 at 4:38 pm

    tillkee

    Great tutorial,

    anyone knows, how you can assign buttons to different video files, so the video plays only when you click a button. lets say i have 5 different movies, and 5 buttons assigned to them. by clicking a button, the asigned video starts to play…
    can i use the netconnect method? anyone knows how?

    would be great to get some help

  • April 7, 2009 at 4:54 am

    Anar

    It seems like a very useful tutorial, but I don’t have much time now to inspect the code now.
    Could you please, tell me, if this media player gives the opportunity to stream video from the middle of it. I mean, before it downloaded 100%, lets’s say it has only downloaded 20% of the video, and if the user moves the pointer to 60% on bar, will it start downloading the video from the 60% of the it or it will continue from 20%?
    Thanks in advance.

  • April 23, 2009 at 1:47 am

    pushp

    hi, very nice tutorial, it helps me a lot. Thank u very much.

  • June 4, 2009 at 3:35 am

    Jk_

    Great tutorial! It has been very helpful.

    Thanks for sharing your knowledge.

  • July 9, 2009 at 3:46 am

    Flv Player

    Thanks for given this great post…

  • August 13, 2009 at 11:27 am

    Jack

    Hey,

    I was wondering why you dont override the Clone function and the toString functions as required by the documentation?

    Thanks in advance

  • August 27, 2009 at 3:39 am

    simone

    Hi Martin,

    but there isn’t the “source.zip” file???

    Thanks

  • September 12, 2009 at 6:19 am

    David

    Hi Martin.

    A quick ‘thank you!’ for writing this article. I’m new to ActionScript and thirsty for well written, object-oriented code – your work is really helping me to understand.

    Again, thank you!

  • September 29, 2009 at 4:41 pm

    Acts7

    I took the aspect ratio on with a different method.
    I defined a variable for the width – and then used scaleX scaleY to maintain proper proportions.

    //
    var vWidth:Number = new Number(350);
    var vHeight:Number = new Number(178);
    //
    //~~~~~~`

    private function doMediaSize(e:MediaSizeEvent):void {

    // make sure the “video” variable is available in this scope

    // If I want to use the default size of the media – do it this way
    //video.width = e.width;
    //video.height = e.height;

    // If I want to specify a size and constrain to that spec / dimension – do it this way:
    video.width = vWidth;
    video.scaleX = video.scaleY;

    }

  • October 5, 2009 at 9:35 am

    Edwin Rios

    Nice tutorial!!!
    Would you mind to publish the zip file?

    Thanks

  • October 12, 2009 at 11:43 am

    corbanb

    hey marti, not sure why but your RSS feed and your homepage http://blog.martinlegris.com are not updating correctly. I am only seeing posts from July? Some how stumbled on this post via google.

  • October 21, 2009 at 8:07 am

    John

    Hello Mr. Legris,

    thank you very much for your tutorial on how to create own flv player.

    I am trying to find a way how to add subtitles feature to your implementation. Please may you point me in right direction ? I am just beginner of AS (but have some programming skills from other languages).

    I was thinking of adding textbox over player, parse XML TimedText subs format amd register ASCuePoints (for every single line of subs), than display text from CUEPoint when it is reached (OnCuePoints event) in textbox…

    Is it doable ? Is there any easier solution ? (FLVCaptioning component seems not to work for me). I am using pseudo streaming throught xmoov PHP script, so I guess I need to re-register all the subtitles cuePoints every time user seeks to different time…

    XML TText subs do not work with any major FLV player on net (e.g. JWplayer/Flowplayer etc.). So I guess I need to implement it myself 🙂

    Thank you very much for any tip & info you want to share!

    Have a great day!

    John

  • November 11, 2009 at 4:11 pm

    Chris Miller

    Hi,

    I am having a problem I wonder if anyone can help with.

    I’ve used the player as so:

    var myMediaData = new MediaData(“videos/”+videoToPlay, “title”, 234, “image.jpg”, vidWidth, vidHeight);
    myFLVPlayer = new FLVPlayer();
    var video:Video = new Video(vidWidth, vidHeight);
    myFLVPlayer.video = video;
    myFLVPlayer.playMedia(myMediaData);
    addChild(video);

    in a function.

    the first time I call the function it plays video A with sizes 640 x 360,
    I then have function which removes the video object
    and re-runs the above function with a new video to play with a new size of: 1024 x 576

    The first video is removed successfully, and the second video is loaded and added to the stage, the problem is, it has the wrong sizes.
    The second video object has the same height and width of the original video object. The actual video on the stage though, has the correct height, but the old width. Seems very strange.

    is there a better to way to play back another video of a different size?

    Many thanks
    Chris

  • November 11, 2009 at 4:40 pm

    mlegris

    @Chris, you need to listen to the event MediaSizeEvent from the FlvPlayer.. so

    Otherwise, in FLVPlayer.as on the function “onMedaData” I do this:

    which means if the FLVPlayer doesn’t trigger a MediaSizeEvent, there is a default behavior which is probably not what you want at this time..

    Hope this helps.. Martin

  • November 11, 2009 at 4:41 pm

    mlegris

    @all who want a ZIP file..

    it is not hard to copy paste this code somewhere. In the process you will learn things; I am all about learning and understand and not so much about mindless integration of other people’s code.. If you want a zip file, just send me a request by email and I will package it for you.

  • November 16, 2009 at 12:06 pm

    Justin

    Hi. I was greatly appreciate it if you sent me a package of your “Playing FLV video” file. Thanks.

    Justin

  • November 23, 2009 at 11:17 am

    plumpNation

    Thanks so much for this buddy, I’d written out 80% of this beforehand but you’ve out-eleganced me by miles with these custom events. Really appreciate the tutorial format too, it forces me to read through before the trial and error begins. I read something about over-riding the clone and the toString functions in the custom events, so have done that, but not sure if it is necessary – I know that it’s not always the case. The issue I always had with the NetStream technique was the lack of onComplete when dealing with progressive download. I think you’ve got that sorted though…not there yet.

Leave a Reply