Embedding the player in Flex

As of version 4.2 of the JW Player, it is possible to embed the Player inside of a Flex application. This brief tutorial explains how. If you're an experienced Flex developer who wants to use the JW Player inside one of your applications, this document is for you.

People have had difficulty in the past embedding the Player into a Flex application. The simplest way to pull the player into Flex was by using a SWFLoader to load in the compiled Player, but since the Player expected to be by itself on the Flash stage, resizing was a problem.

Getting started

Before you start, you'll need the latest version of the JW Player. It can be downloaded with Subversion:

svn co http://developer.longtailvideo.com/svn/trunk

Next, create an empty Flex application. You'll then need to add the Player's source code tree to your application's source path. Right-click on your new Flex project, choose "Flex Build Path" and click the "Add Folder..." button. Navigate to the folder where you downloaded the player, and add it to the project. Then, copy the player.swf and video.flv files to your Flex Project's source path.

Code

Next, you can create applications that embed the player. Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Script>
		<![CDATA[
			import com.jeroenwijering.events.*;
			import mx.events.ResizeEvent;

			[Bindable]
			/* Pass FlashVars to the Player here.  Player.swf should be in the source root of your Flex application */
			private var file:String = "player.swf?file=video.flv&" + 
					"controlbar=over&" + 
					"resizing=false";

			private var playerObject : Object;
			
			/* This method is called when the SWFLoader has completed its loading and the Player has been initialized.  Due
			    to timing issues, we have to check whether the player's view has been loaded or not.  If not, listen to the 
			    Player's new PlayerEvent.READY event.
			 */
			private function loaderFinished(e:Event) : void {
				playerObject = e.target.content as Object;

				if(playerObject.view == null) {
					playerObject.addEventListener(PlayerEvent.READY, this.playerReady);
				} else {
					playerReady();
				}
			}
			
			/* Once the Player has been initialized, we can begin to send and receive events from it */
			private function playerReady(e:Event=null) : void {
				// Wait for the view to load the file.				
				playerObject.view.addViewListener(ViewEvent.LOAD, loadedHandler);
				
				// Set the player screen to the correct dimensions.
				resizePlayer();
			} 
			
			/* The event loading the file has fired, we can now start the video playback. */
			private function loadedHandler(e:Event=null):void {
				playerObject.view.addModelListener(ModelEvent.TIME, timeHandler);
				playerObject.view.sendEvent(ViewEvent.PLAY, true);
			}

			/* To resize the player, simply set its width and height, and send the view a ViewEvent.REDRAW event. */
			private function resizePlayer() : void {
				if(playerObject != null && playerObject.view != null) {
					playerObject.config['width'] = player.width;
					playerObject.config['height'] = player.height;
					playerObject.view.sendEvent(ViewEvent.REDRAW);
				}

			}

			/* Respond to time events */
			private function timeHandler(evt:ModelEvent) : void {
				if(evt.data.position > 3.0) {
					// Pause the video after 3 seconds)
					playerObject.view.sendEvent(ViewEvent.PLAY, false);
				}
				
				timelabel.text = "Time tracker: " + evt.data.position;
			}
		]]>
	</mx:Script>

	<mx:VBox width="100%" height="100%">
		
		<mx:Label fontSize="36" text="The JW Player in a Flex Application" height="50" />


		<mx:HDividedBox width="100%">

			<!-- Load the Player's SWF here.  Make sure to turn off the aspect ratio and scaling properties. -->
			<mx:SWFLoader id="player" source="{file}" 
				maintainAspectRatio="false" scaleContent="false" 
				width="50%" height="100%" minHeight="200"
				init="loaderFinished(event);"
				resize="resizePlayer();">
			</mx:SWFLoader>
			
			<mx:Text text="A description of some sort could go here" width="50%" />			
		</mx:HDividedBox>	
		
		<mx:Text text="Time tracker" id="timelabel" />
		
	</mx:VBox>
	
</mx:Application>

That's all there is to it. Note the divided horizontal box allows you to resize the width of the player as desired.

Player API

Through the playerObject set up in this application, you can access the full API of the player?, just like from javascript or from plugins.