Vimeo video player



9 Comments

Share




Amm, u ever needed that social networking stuff (twitter, youtube, vimeo etc.)?
Well, this one will help u at least with the vimeo video service. Yes, i know that there is a sample class at their web called moogaloop, but it’s buggy.
That’s why i’ve rewritten their class.

UPD: i’ve updated the class, as they’ve switched the moogaloop player version. Had to fix some security issues. Player now works charming again :)


Changes in my version:

  • load() method now loads via vimeo link (not id)
  • destroy() method for the gc work
  • fixed bug with the MouseEvent passing to the Moogaloop API (it has a bug, uses localX, localY vars)
  • fixed bug with the keyboard event (just had to pass the disable_keyboard var lol)
  • fixed setSize() method

Download source files

Demo available here

Sample:


import com.chargedweb.video.VimeoPlayer;

var vimeoPlayer:VimeoPlayer = new VimeoPlayer();
vimeoPlayer.setSize(550, 360);
vimeoPlayer.load("http://vimeo.com/moogaloop.swf?clip_id=2693546");
addChild(vimeoPlayer);

9 Comments (+add yours?)

  1. Donagh
    Aug 31, 2010 @ 23:41:49

    Nice Class, though it needs updating because moogaloop API has now been updated and requires an “oauth_key” to be passed when instantiating it.

    Good work.

  2. jloa
    Sep 01, 2010 @ 04:58:53

    Donagh >> who told u that kind of thing? Check out the demo -> http://chargedweb.com/labs/files/VimeoPlayer.swf
    No need for a oauth_key. The oauth_key is needed for the extended api only.

  3. wilson
    Oct 27, 2011 @ 12:00:08

    Hi,

    I’m using your .as file to embed my vimeo videos into swf. Thanks!
    BTW, I’d like to know if I can customize the player:
    autoplay=1
    title=0
    portrait=0

    Should I edit the .as file? and How?
    Or done by actionscript??
    thx

  4. jloa
    Oct 27, 2011 @ 15:09:00

    Sure, you can pass a bunch of vars to the moogaloop player through the params object, just like the “fullscreen” or “disable_keyboard” vars are defined and set in the VIMEO_LINK constant.
    For example join the default VIMEO_LINK value with “&autoplay=1″ etc
    The full list of available commands is available here http://vimeo.com/api/docs/player.

    
    // Moogaloop player api link
    private static const VIMEO_LINK:String = "http://a.vimeocdn.com/p/flash/moogaloop/5.1.24/moogaloop.swf?clip_id=%clip_id%&width=%width%&height=%height%&fullscreen=0&disable_keyboard=1";
    
    

  5. wilson
    Oct 28, 2011 @ 06:22:34

    Thanks for reply, it works!
    How about the event handler listed at the bottom of this page: http://vimeo.com/api/docs/moogaloop-as
    Can i also use them to check if the video finishes, back to and stop at the 1st frame of the movie?

    I tried the following, but doesn’t work:

    
    vimeoPlayer.addEventListener("finish",BackToBegining);
    function BackToBegining(event:Event):void{
                e.target.seek(0);
    }
    
    

    Thx!

  6. jloa
    Oct 30, 2011 @ 13:15:30

    You’ve got to listen for the event on the moogaloop instance inside the class:

    
    moogaloop.addEventListener("finish", onFinishHandler);
    
    private function onFinishHandler(event:Event):void
    {
     // since i've already implemented the the seek() method, just call it
     seekTo(0); 
    }
    
    

    If you want to listen for that event outside the class i.e. on the class instance, you will have to create a reference to the moogaloop in the class and add a listener on the linked moogaloop reference:
    VimeoPlayer.as add:

    
    public function get player():Object
    {
     return (moogaloop) ? moogaloop : null;
    }
    
    

    How to use:

    
    var vimeoPlayer:VimeoPlayer = new VimeoPlayer();
    vimeoPlayer.addEventListener(Event.COMPLETE, onVimeoPlayerApiReady)
    vimeoPlayer.setSize(550, 360);
    vimeoPlayer.load("video link here");
    addChild(vimeoPlayer);
    
    function onVimeoPlayerApiReady(event:Event):void
    {
      // now since we can reference to the actual moogaloop we add listener
      vimeoPlayer.player.addEventListener("finish", onFinishHandler);
    }
    function onFinishHandler(event:Event):void
    {
      vimeoPlayer.seekTo(0);
    }
    
    

  7. wilson
    Nov 02, 2011 @ 04:14:02

    Thx! I tried to added your 1st script into VimeoPlayer.as but didn’t work:

    moogaloop.addEventListener(“finish”, onFinishHandler);
    private function onFinishHandler(event:Event):void
    {
    seekTo(0);
    }

    Then I tried your 2nd solution but still not working.
    I’ve create a dynamic textfield called “a”, assigned it to be “0″, then do the following:

    function onVimeoPlayerApiReady(event:Event):void{
    vimeoPlayer.player.addEventListener(“finish”, onFinishHandler);
    MovieClip(root).a.text=”1″;
    }
    function onFinishHandler(event:Event):void{
    vimeoPlayer.seekTo(0);
    MovieClip(root).a.text=”2″;
    }

    The result is, when the vimeo starts playing, it changes to “1″. And after it finished, didn’t change to “2″.
    I wonder if “finish” Event handler is working or not. Is there other methods to check whether the vimeo has finished the playback?

  8. wilson
    Nov 07, 2011 @ 09:06:08

    Hi, sorry for so many questions.
    finally I can use .getDuration() & .getCurrentTime() to check the vimeo reaches the end and then seek(0).

    However I discovered another problem is the mouse over area.
    I have set the vimeoPlayer not at [0,0], but the mouse over area (to show/hide the control bar) still lying at [0,0] all the time.
    i.e. if I set my vimeo player: x=200, y=100, width=400, height=300
    the mouse over area: x=0, y=0, width=400, height=300

  9. jloa
    Nov 09, 2011 @ 05:51:16

    Yeap, that is because the mogaloop uses global coordinates. I’ll see what i can do 2 fix that ^_^

Leave a Reply

Spam protection by WP Captcha-Free