Developers / Moogaloop

Moogaloop is the code name for Vimeo's video player. You are able to access its functionality through Javascript or embed Moogaloop in Flash.

Player Info

The URL of the Moogaloop player is the same as the one that is in the Vimeo embed code:

http://www.vimeo.com/moogaloop.swf

Arguments

All arguments are sent as query parameters and must be urlencoded (as per RFC 1738).

Note: if the owner of a video is a Plus member, some of these settings may be overridden by their preferences.

Javascript Access

You can use Javascript to control Moogaloop if you use SWFObject to embed the player. Make sure to add the js_api parameter to enable Javascript access.

Functions

These are the functions that you can call to control Moogaloop or get data from it. All functions are prepended with "api_" to avoid Flash keyword conflicts.

Events

You can listen for these events by calling api_addEventListener.

Example

We have a simple example for you that demonstrates the methods available in the Moogaloop API.

Moogaloop Javascript Example

Be sure to check out the Downloads page for more examples.

Flash Embedding

You can embed Moogaloop into other Flash applications, but currently there are a few limitations/obstacles:

1. You have to use AS3
2. You can only embed one Vimeo player at a time
3. Fullscreen is disabled

Example VimeoPlayer AS3 code

/**
 * VimeoPlayer
 * 
 * A wrapper class for Vimeo's video player (codenamed Moogaloop)
 * that allows you to embed easily into any AS3 application.
 * 
 * Example on how to use:
 * 	var vimeo_player = new VimeoPlayer(2, 400, 300);
 * 	vimeo_player.addEventListener(Event.COMPLETE, vimeoPlayerLoaded);	
 * 	addChild(vimeo_player);
 * 
 * http://vimeo.com/api/docs/moogaloop
 */
package {
  
  import flash.net.URLRequest;
  import flash.display.Loader;
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.TimerEvent;
  import flash.events.MouseEvent;
  import flash.utils.Timer;
  import flash.system.Security;
  
  public class VimeoPlayer extends Sprite {

		private var container:Sprite = new Sprite(); // sprite that holds the player
		private var moogaloop:Object = false; // the player
		private var player_mask:Sprite = new Sprite(); // some sprites inside moogaloop go outside the bounds of the player. we use a mask to hide it

		private var player_width:int = 400;
		private var player_height:int = 300;

		private var load_timer:Timer = new Timer(200);

		public function VimeoPlayer(clip_id:int, w:int, h:int) {
			this.setDimensions(w, h);

			Security.allowDomain("http://www.vimeo.com");

			var loader:Loader = new Loader();
			var request:URLRequest = new URLRequest("http://www.vimeo.com/moogaloop.swf?clip_id=" + clip_id + "&width=" + w + "&height=" + h + "&fullscreen=0");
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			loader.load(request); 
		}

		private function setDimensions(w:int, h:int):void {
			player_width  = w;
			player_height = h;
		}

		private function onComplete(e:Event) {
			// Finished loading moogaloop
			container.addChild(e.target.loader.content);
			moogaloop = e.target.loader.content;

			// Create the mask for moogaloop
			addChild(player_mask);
			container.mask = player_mask;
			addChild(container);

			redrawMask();

			load_timer.addEventListener(TimerEvent.TIMER, playerLoadedCheck);
			load_timer.start();
		}

		/**
		 * Wait for Moogaloop to finish setting up
		 */
		private function playerLoadedCheck(e:TimerEvent):void {
			if (moogaloop.player_loaded) {
				// Moogaloop is finished configuring
				load_timer.stop();
				load_timer.removeEventListener(TimerEvent.TIMER, playerLoadedCheck);

				// remove moogaloop's mouse listeners listener
				moogaloop.disableMouseMove(); 
				stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);

				dispatchEvent(new Event(Event.COMPLETE));
			}
		}

		/**
		 * Fake the mouse move/out events for Moogaloop
		 */
		private function mouseMove(e:MouseEvent):void {
			if (e.stageX >= this.x && e.stageX <= this.x + this.player_width &&
				e.stageY >= this.y && e.stageY <= this.y + this.player_height) {
				moogaloop.mouseMove(e);
			}
			else {
				moogaloop.mouseOut();
			}
		}

		private function redrawMask():void {
			with (player_mask.graphics) {
				beginFill(0x000000, 1);
				drawRect(container.x, container.y, player_width, player_height);
				endFill();
			}
		}

		public function play():void {
			moogaloop.api_play();
		}

		public function pause():void {
			moogaloop.api_pause();
		}

		/**
		 * returns duration of video in seconds
		 */
		public function getDuration():int {
			return moogaloop.api_getDuration();
		}

		/**
		 * Seek to specific loaded time in video (in seconds)
		 */
		public function seekTo(time:int):void {
			moogaloop.api_seekTo(time);
		}

		/**
		 * Change the primary color (i.e. 00ADEF)
		 */
		public function changeColor(hex:String):void {
			moogaloop.api_changeColor(hex);
		}

		/**
		 * Load in a different video
		 */
		public function loadVideo(id:int):void {
			moogaloop.api_loadVideo(id);
		}

		public function setSize(w:int, h:int):void {
			this.setDimensions(w, h);
			moogaloop.api_setSize(w, h);
			this.redrawMask();
		}
	}
}