Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
I was very happy after completing my extended VimeoPlayer Class, so happy that I had enough motivation to wrote a Flex Component. With my component it is now very easy to use the moogaloop API in Flex. The functionality features are the same as my VimeoPlayer class, except that I also support some Flex-based features (Data-Binding, updatedRendering).
I created a very ugly and simple Flex GUI Interface, which demonstrates the functionality of this Flex Component. The component has some useful attributes / properties and some Functions. Here a short overview:
FlexVimeoPlayer Properties:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[Bindable] public videoClipID:int; // The vimeo video clip id [Bindable] public duration:Number; // read-only property [Bindable] public currentTime:Number; // read-only property [Bindable] public playerState:String; // Have look on the VimeoPlayingState Attributes [Bindable] public playerColor:uint; // HexValue of the Player Color [Bindable] public volume:Number; // Volume of the video Player instance //-------------------------------------------------------------------------- // // Additional getters and setters // //-------------------------------------------------------------------------- [Bindable] public isPlayerLoaded:Boolean; // read-only property public isVideoPlaying:Boolean; // read-only property |
FlexVimeoPlayer API Functions:
The API functions to control the vimeo player api are still the same, except the setSize() Function is not available anymore. You can use the width and height properties of the component as every other Flex Component. Here are the available functions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public function stop():void; public function play():void ; public function pause():void; /** * Seek to specific loaded time in video (in seconds) */ public function seekTo(time:int):void; public function unloadVideo():void; public function destroyPlayer():void; public function toggleLoop():void; //---------------------------------- // Screen and RenderManagement //---------------------------------- /** * enable HD for the player, but it seems that it is not working?! */ public function hd_on():void; public function hd_off():void; public function showLikeScreen():void; public function showEmbedScreen():void; public function showHDScreen():void; public function showShareScreen():void; public function showVimeoScreenControlls():void; |
FlexVimeoPlayer Events:
|
1 2 3 |
[Event(name="vimeoPlayerLoaded", type="de.derhess.video.vimeo.VimeoEvent")] [Event(name="vimeoDurationChange", type="de.derhess.video.vimeo.VimeoEvent")] [Event(name="vimeoStatus", type="de.derhess.video.vimeo.VimeoEvent")] |
The Events are the same as the VimeoPlayer Events. If you have got some questions for the events, please have a look on my Blog Post Moogaloop and Flash.
That is all information about my FlexVimeoPlayer Component. You can see the component in action here or download it.
Download FlexVimeoPlayer Component and Flex-App Source
Thanks a lot for the tutorial. I would like to put your link into my blog.
Is it ok for you?
have a nice day.
Here is the problem. Your class works awesome. However, when I try to call video inside a Canvas Component in Flex, I can’t control events such as ‘play, pause…’. Do you have any idea how can I fix this? Or can it be bug or something else?
Hi again,
Sorry for many comments. Finally, I got the problem. The problem is in the
VimeoPlayer.as class. It’s something weird and I had a problem like this before. Here is my solution as it follows;
private function mouseMove(e:MouseEvent):void {
if( mouseX >= this.x && mouseX = this.y && mouseY <= this.y + this.player_height ) {
moogaloop.mouseMove(e);
}else {
moogaloop.mouseOut();
}
}
I changed 'e.stageX' with 'mouseX' and so on…
The problem is solved for me. I thought, you would like to know this weird thing .)
thanks again.
@alptugan: yeah, of course you can put a link of my blog to your blog 🙂 The other thing with play() and pause() problem sounds strange. I wrapped my FlexVimeoPlayer into a canvas component and it perfomed well. So I don’t know what went wrong on your machine… But anyway, thanks a lot for your hint and especially for posting the solution for this problem!!
@all: So if someone has got the same problem as alptugan described, please leave a comment! Maybe I have to change my code…
Hello there, works very well 🙂
One thing when the videoPlayer container is on a modal window you have to update VimeoPlay.as line 472 to take the parent position into account. Otherwise the mouse move detection will work on the top left area whereas your modal window could be on the top right.
Hi Greg,
thanks a lot for your advice! That sounds like the problem which alptugan had. I am going to chance the this mouse behaviour tommorrow and then I am going to upload it. 🙂
Bye
Flo
@admin
Actually i had to do parent.parent.parent.x to the modal window position. Kind of ugly. So a new way of handling the mouse move would be great !
@Greg
Hi Greg
I updated the vimeo class mouse move behaviour, how @alptugan has already described. The file is uploaded and should now solve your problem… I hope it works for your now 🙂
Great ! One last question is there a way to avoid the doubleclick error of death in debug mode ? when double clicking on the video ? I tried disabling doubleclick on the container whith no success.
@Greg
Sorry, I don’t understand your problem. This problem appears only in the Flash Debug Player or what do you mean?! Because if I do a doubleclick in the example above, the only thing which happens that the video will pause?!
Hi dear Readers,
@Dave A from the Flash vimeo blog post is right why the vimeo examples are not working at the moment. This forum post http://vimeo.com/forums/topic:21967 figures out why my example and my classes are not working!! You have to change the Sercurity.loadPolicy() function, the Security.allowDomain() URL and the loadURL Path at the Constructor Function of my VimeoPlayer class:
http://code.google.com/p/derhess/source/browse/trunk/AS3/de/derhess/video/vimeo/VimeoPlayer.as
Unfortunately, I have to say that I am not very happy with the update process of the moogaloop API. It seems that the vimeo staff is working on a new version of their API without any notification… I am going to update my classes if a real long term solution of the moogaloop API is available! Sorry, but at the moment I have no time to deal with these short changing intervals…
Do you like to share the Flex Project , please ?
oops sorryoverlooked it
playback only starts when i scrub ?!
I know that problem. I don’t know how to fix it. I mentioned above my reasons why I did not maintain this component. Maybe you find a solution at the vimeo developer forum http://vimeo.com/forum:API I wish you good luck!