PYRO

Pyro flash  video player sweetness

The first real life exemple of a Pyro integration made available to the community is finally here.
None other than the NFB’s much praised video player is now ready for download.

Its all on here on agit8 and google code.

Pyro –flash video player engine

Pyro is a small video player API for flash I coded in the last year, along with great development inputs from my friends at Turbulent Media.

Not a full fledge player like whats available out there, pyro is, plain and simple, a video player API for flash.

The only graphical aspect of pyro is, well, a video. Thats right NO buttons, NO skins, nothing but the video. All this GUI-UI stuff is left to anyone with actionscript 3 knowledge to deal with.

Pyro is lightweight, has quite a small footprint,  and holds very limited external dependencies.

Why no UI  ? Mental issues… ?

This is the question that comes up the most when peer developers hear about this project. Let me explain.

With as little experience as I have with building video players in flash, I’ve come to notice that my two main time wasters on doing such projects were:

  • Recoding-copy-pasting the same snippets of code for netStream, netConnection, resizing and buffering and applying it to the project.
  • While using a third party skinnable player, figuring out how to make it behave and look exactly how I need it.

With Pyro you won’t waste precious production time on tucktaping and gluing together bloated pieces of code. Nor will you spend time trying to understand someone else’s code. Pyro was coded with those two main reasons in mind at all time. The API gives you more control than you could wish for for playing videos and lets you either build your own singular skin everytime or empowers you to create your own skinnable player with whatever feature you would like.

Times of jerking around with netStream and netConnection related stuff, keeping up to date with new file formats, adding new callback methods to match certain types of streams, parsing seemingly good URLs for playback in different streaming servers, resizing and aligning correctly, all pretty much gone.  Thanks Pyro !  :)

Flatlined learning curve _________________________ !

You can get started using pyro in no time.

Once basic understanding kicks in, I find its the quickest, most flexible way to integrate video in whatever flash related platform/framework you are working with.

Well suited for:

  • Standard Flash IDE projects.
  • Actionscript projects from either Eclipse, FlexBuilder, FDT, Flash Develop, TextMate and the likes.
  • Flex projects.
  • Papervision, Away3D, and the likes

Now you can finally do the skinnable video player you told everyone on your team you would code, with half the effort that is required than doing it from scratch. Pyro is the flash video API/engine of choice for such a task. Just focus on how your player looks, how the skin behaves and what the buttons do. Then sit back and  let Pyro do its thing.

In ‘résumé’, using Pyro saves time. A lot of time.

So what does it do exactly:

  • Progressive, RTMP (and the likes) and middleware induced streaming all united in one API.
  • Loading and progress ratios.
  • Client side bandwidth detection.
  • Resizing and proportion calculations.
  • Auto adjusts buffertime or lets you handle it as you see fit.
  • Manages dual treshold bufferTime strategies and single treshold bufferTime.
  • Dispatches a flock of Pyro events.
  • Regular play, pause, toggle pause , mute, volue, toggle mute, stop, close, width, height methods…. and so on.
  • and more.

Whats up with the ca.turbulent package ? Shouldn’t it be com.gronour ?

The ca.turbulent package was picked for practical reasons. Since I share office space and work a lot for Turbulent, and that most of the real life testing of Pyro has been executed by Turbulent’s production floor teammates, I felt, at the time, that it was the proper package to use. Pyro is both our property and code. So the package will stay under ca.turbulent and its fine by me. And geez, why would  you care, as long as the stuff works right ?

Where the hell do I get Pyro:

You can find Pyro under version control and in downloadable state here: http://code.google.com/p/pyro-player/

I’m also an active member of turbulent.ca development team and blog enhancer, check out the inital blog post on pyro on agit8 :

{ 35 comments… read them below or add one }

1 greg_dd June 28, 2010 at 3:27 am

Thank you so much for your hard work on this project!
Awesome project Dude!

I was wondering if you will have any (even very simple example) of this API in use. Yes I have seen the enormous project done by NFB. Even if it was very simple and wasnt really complete at least it would get a lot of us started.

Thanks again!

2 Eric April 24, 2010 at 7:00 pm

If you are not using a server side solution such as FMS, Wowza or Red5, or a proxied-streaming solution like lighttpd (lighty) you cannot do this. Pyro handles streams of whatever nature, but its not a streaming solution… You can however put the streaming on hold (pause) and wait for that point to be loaded, but you will never get something precise with a regular progressive download type of stream.

3 p_pyro April 23, 2010 at 11:11 am

Thank you for your answare, but the problem is on “Caching pyro’s status property whenever the user clicks on the progressBar”.
How to solve it?
E.G. When i click on the progress bar, and the movie are not loaded, the movie don’t start on this point but in the latest position when the movie is loaded.
A small example?
I hope in your help.

4 Eric April 22, 2010 at 4:51 pm

Either register a function to an EnterFrame event or use a timer and always listen to loadRatio and progressRatio. Both these properties are based on 1, so they are always in between 0 and 1.
Easiest way to use this is to adjust the scaleX properties of your progressBars…

Sorry I do not provide code exemples on demand, this is really easy, you will figure it out.

Small exemple:

in your class;

addEventListener(Event.ENTER_FRAME, frameEntered);
private function frameEntered(evt:Event):void
{
yourBufferingBar.scaleX = yourPyroInstance.loadRatio;
yourProgressBar.scaleX = yourPyroInstance.progressRatio;
}

5 p_pyro April 22, 2010 at 4:28 pm

Please, can you write any sample to use the pyro and the seek bar with buffer!
Ho to do it?

6 Eric April 22, 2010 at 1:43 am

Geeez that comment got stuck in a pile of spam, sorry for the delay.
Well the answer is no, Pyro is just a simple API that plays videos in the flash player, it does not parse thru youtube tags, nor does it uses the chromeless youtube API.

7 paolo March 5, 2010 at 8:33 am

Hi guys.
Is possible import youtube’s video in pyro?

8 Eric March 1, 2010 at 6:09 pm

Well, what I said above is not detailled enough. This happens in some videos when they get scaled or smoothened, but it has nothing to do with the API itself. The line is probably present in your videos but you cant see it at normal size. Now would that be possible ?

9 Eric March 1, 2010 at 5:52 pm

I have no idea, I never had this issue. Pyro does not draw anything on the stage, it just handles the video itself.
Do you have a public url of a video feed I could test ?

You can send it by email : e@gronour.com

10 Tino March 1, 2010 at 3:19 pm

Hi!

Thanks for the great API. You did a really great job!
I’m using it inside a flash project to playback some mp4 movie files on top of a white background. Now I’ve noticed, that the player seems to add a gray, 1px height line at the bottom of those clips. Normally you wouldn’t notice if your background is a dark one, but it is really distracting on a white one, when the video shows a bright frame.
Do you have any idea what causes this? I’m 100% sure this line is not in the video files.

Thanks in advance,
Tino

11 paolo January 10, 2010 at 6:23 pm

Can you post an example please?
Than you.

12 Eric January 10, 2010 at 5:02 am

Ok, I’ll try to clarify this.
Once you receive the METADATA_RECEIVED event, you can check the cuePoints property for cuePoints. It’s an Array so you can do something like pyroInstance.cuePoints.length, if it’s greater than 0, than you know you actually have cuePoints loaded into the video file. Now it could very well be that you have no cuePoints. Also, to parse thru the actual metadata, you can loop thru the metadata property once the METADATA_RECEIVED event is triggered. And last, since you are using .f4v, could it be possible your cuePoints are inserted as XMP data ?

13 paolo January 9, 2010 at 9:02 pm

Thank’s for the fantastic API.
I used in my project, but now i have a problem… Ho can obtain the CuePoint or metadata from f4v?

I have try with the CUE_POINT_RECEIVED but don’t receive nothing.
//THIS IS A SAMPLE
pyroInstance.addEventListener(CuePointEvent.CUE_POINT_RECEIVED, receive);

I recive the cuepoint with the METADATA_RECEIVED but how can obtain the name and the time of the event?
Thank you so much.
I hope in your help.
p

14 Eric November 15, 2009 at 5:21 pm

Oooops sorry.

Well, it is not a bug, much more a problem with the NetStream API.
You can circumvent this by:
1) Caching pyro’s status property whenever the user clicks on the progressBar,
2) then unpause your stream (togglePause() or play()),
3) Seek to desired time.
4) On PyroEvent.SEEKED, reset status to the cached value.

To know if the player is playing could be ambiguous. If you mean by that, that the actual playhead is moving, you can check for pyro’s status if it equals Pyro.STATUS_PLAYING you can bet it is playing.
However you could also mean if the player has loaded (or is loading) a video and is not necessarily playing, you could check a few things, best way to figure it out is to register a listener on the StatusUpdateEvent.STATUS_UPDATE and then to trace out the status either from inside the Event itself or from within your PyroInstance (same result anyways). You will notice a chain of status changes that always comes back, you can act upon one of those statuses.

For me, I usually check for Pyro.STATUS_PLAYING, Pyro.STATUS_PAUSED, Pyro.STATUS_STOPPED or Pyro.STATUS_PENDING .

Hope this helps.

15 Luis Fonseca November 11, 2009 at 9:13 pm

Hi Eric,

Could you just please tell me if this is something that is a known bug or am I doing something wrong?

Also, is there a method that returns if the player is playing or not?

Thanks in advance,
Luís

16 Eric November 11, 2009 at 2:15 pm

I will get back to you in a short while, as soon as I can.

Thanks for your good words.

17 Luis Fonseca November 11, 2009 at 1:41 pm

Hi Eric,

Nice work with the Pyro! It’s really great and saved me a lot of time! :)

Now, there is a small glitch that I don’t know how to solve… When the player is paused and you use the “seek” method, all goes well but when we trace “_pyro.time” on the “PyroEvent.SEEKED” event handler we get the time from where the player was seeked from instead of the new position!!

Do you have any idea how to solve this?

Thanks in advance,
Luís

18 Eric August 29, 2009 at 11:41 pm

Ce genre de mécanique fonctionne pourtant très bien, nous l’utilisons à tous les jours comme ça.

Y faut évidemment faire un addChild avant de commencer la lecture, sinon y se passera rien.
Si il s’agit d’un projet flex, ou d’un projet 3D (papervision ou away3D) il faut passer “allOff” comme 3ième paramètres à l’instanciation (dans le constructeur). Comme ça pas besoin de faire un addChild.

Si c’est pas le truc de addChild, y doit avoir autre chose qui l’empêche de jouer. As-tu un url d’un vidéo utilisé dans le projet que je te confirme si ça fonctionne ?

Désolé pour le tutoiement, seulement, c’est un peu bizarre pour moi de vouvoyer dans un blog.

19 Fepia August 28, 2009 at 1:13 pm

Bonjour,

Oui, c’est plus facile en français (démasqué).

En fait j’ai apparemment un problème avec le paramètre autoPlay. Lorsque je fais :

vid = new Pyro();
vid.autoPlay = false;
vid.play(“monUrl”);

//des actions, du chargement, plein de trucs…

vid.play();

cela ne fonctionne pas. J’ai essayé avec un pause() entre les deux play() puis un seek() mais toujours rien.

Voila, j’espère avoir été un peu plus clair.

Merci

20 Eric August 27, 2009 at 11:52 pm

I’m not quite sure of what you mean exactly, or of what you are trying to do.
Can you please explain a bit more.

Si c’est plus facile en français, j’ai pas d’objection à ce qu’on discute en français.

21 Fepia August 27, 2009 at 10:16 am

Hi,

First, thanks for this great API.
But I have a little problem with the autoPlay property (I don’t know if I am on the good place to ask for my problem).

When my pyroInstance.autoPlay is set to true , no problem, it works.
But when it’s turn to false : I called my video with the play() method (here it’s ok the video don’t play) and then (after some action) I called again the play() method. And the video don’t play…
I tried to put a pause() function between but it doesn’t work…

If somebody have a solution…

Thanks

22 martin August 17, 2009 at 5:50 am

Hi,

thanks for the quick response Eric. Damn busy, sounds familiar :)

Yes my question was around a simple example, not asking this from you in particular yet hoping some folks who are using pyro already have one made and are happy to share it.

Nevertheless as good as the pyro API is documented I am very confident that I will get pretty much everything sorted out quite easily. Also I will further dig into the NFB example for clarifications, which is of course a bit more complicated yet surely covers by far all I want to get done. If after this there are questions left I will address these questions here, thanks for offering support.

Thanks for your open source spirit

martin

23 Eric August 17, 2009 at 4:21 am

Well thanks Martin.

I’m not too sure if your asking if a simple exemple of a pyro integration is available yet . If so, well, not really. I really want to do it and it will be done as soon as I get a day or two to release pyro version 2.
My problem right now is that I’m just too damn busy.

However, I will answer any questions you might have on how to integrate pyro.

24 martin August 17, 2009 at 4:05 am

Thanks Pyro !

Gosh so happy that I finally found this great video player lib targeting developer – thanks GRÖNOUR. And having also the NFB terrific real world example available as open source is just wonderful. I was just wondering I somebody has on top of all these gems a meant to be ugly simple non real life exAmple made available for the community.

Best

martin

25 paranoio May 8, 2009 at 4:20 am

thanks gronour im sure next version will be great.
if i could request a feature it will be simulate DYNAMIC STREAMING , this is a new feature of Flash media server but i remember the author of flowplayer commented that he did it with his player.
The idea is to have copies of the same video with different quality/bitrates in the server and choose the best for the user bandwith and keep listening for changes so if user sudenly has a low bandwith the player will show the low bitrate video but changes between videos are made transparently.
This feature will be great for developers like me using Red5

26 gronour May 5, 2009 at 3:02 pm

Well, your right my friend. Thats how the API behaves for now.
You need to listen for the stream completion, then to stop and play.

I’m working on a major update of the API, (well we could call it Pyro version 2.0.0), and I am tackling a lot of issues, as well as adding new ones and removing ones I dont like. I will probably insert an autoreplay feature so we can stream video in a loop.

The next version will rock. guaranteed.

Thansk for your comments, very well appreciated, and sorry about the time it took to answer, I’m buried under a pile of work.

Keep on the good work (yes, I’ve visited your blog, and sites).

Cheers
Eric

27 paranoio May 4, 2009 at 7:27 pm

it also seems to work calling stop and then play

28 paranoio May 4, 2009 at 5:47 pm

thanks gronour will wait for your answer, meanwhile the only way i found to do it is deleting and creating a new instance of pyro

29 gronour May 2, 2009 at 11:27 pm

I’ll answer this shortly paranoio. Trying to reproduce. Should not be too long.

30 paranoio May 2, 2009 at 8:10 pm

Hi
i cant find a way to autoreplay a video using rtmp, i set autoplay to true and when complete event is fired i use the seek method and play() method but nothing seems to work.
hope you can give me a clue , thanks.

31 gronour April 15, 2009 at 1:55 pm

**NEWSFLASH**
You asked for it: http://code.google.com/p/nfb-video-player/

Your welcome ;)

Thanks for the comment wmfx.

Yes some tutorials will be made available, you are not the only one asking for this.
I just cant say when exactly.

I’ll try to post some of them in the following weeks.

32 wmfx April 14, 2009 at 11:41 pm

I saw a version of pyro used in a web site ” http://www.NFB.ca ” and thought ” wow ‘ thats an awesome player.
I downloaded the source and have been playing with it. I’m not a developer nor am I very good with action script and wish you had a video tutorial showing Me how to configure the PYRO player. Thanks for sharing.
-wmfx

33 gronour March 18, 2009 at 9:31 pm

C’est probablement parce que c’en est pas tout à fait un.

34 Jonny King March 18, 2009 at 9:16 pm

Bravo Éric c’est le plus versatile player que j’ai jamais vu! bravo!

35 mcp February 27, 2009 at 4:30 pm

bleuwibeula WOW une page dédiée a ce piece of ART qu’est PYRO
it’s Alive !!

Leave a Comment