xm.components.ToobPlayerComponent

Class:
xm.components.ToobPlayerComponent
Inheritance:
MovieClip > xm.corpus.resizableComponent > xm.components.ToobPlayerComponent
Edition:
Flash 8
Language Version:
ActionScript 2.0
Player Version:
Flash Player 8 (full-screen mode requires Flash Player 9 at the visitor's side)
Microsite:
Toobplayer Microsite

About

ToobPlayer is a lightweight (approx. 14-18 KB) FLV player component that comes in five flavors, provides a mechanism to play back YouTube videos, and can also display preview images.

ToobPlayer ties several components (FLVDisplayComponent, FLVControlerComponent, and ImageAreaComponent) together, adds the YouTube functionality (playback, and preview image of the YouTube videos), and the full-screen support (implemented within the component movie clips, and only managed through this class).

Other features

Not supported features

Quick Links

Methods

loadYouTubePreviewImage(Void) : Void

Loads the preview image of the YouTube video specified by the url property into the image image container.

checkYouTubeId(p_id:String, p_handler:Function) : Void

Validates the YouTube ID specified by p_id. After the validation is complete, p_handler will be invoked with the results of the validation.

checkYouTubeId method can be used to validate user input. extractYouTubeId can also be used to validate a YouTube ID, however, checkYouTubeId will check if the video is actually available on the YouTube.

Example
function myHandler(p_isValid, p_id) {
	trace("["+p_id+"] is "+(p_isValid ? "a valid YouTube id." : "an invalid YouTube id."));
}

myToobPlayer.checkYouTubeId("XOXOXOXOXOX", myHandler); 
// output: [XOXOXOXOXOX] is an invalid YouTube id.

myToobPlayer.checkYouTubeId("T8oRFcA0mFM", myHandler);
// output: [T8oRFcA0mFM] is a valid YouTube id.

static extractYouTubeId(p_url:String) : String

Extracts the YouYube ID from a string. If the YouTube ID cannot be extracted, method returns undefined.

Example
import xm.components.ToobPlayerComponent;

var youTubeUrl:String;

youTubeUrl = "T8oRFcA0mFM";
trace(ToobPlayerComponent.extractYouTubeId(youTubeUrl));

youTubeUrl = "http://www.youtube.com/watch?v=T8oRFcA0mFM";
trace(ToobPlayerComponent.extractYouTubeId(youTubeUrl));

youTubeUrl = "...'><param name='movie' value='http://www.youtube.com/v/T8oRFcA0mFM&rel=1'></par...";
trace(ToobPlayerComponent.extractYouTubeId(youTubeUrl));

youTubeUrl = "...<embed src='http://www.youtube.com/v/T8oRFcA0mFM&rel=1' type='appl...";
trace(ToobPlayerComponent.extractYouTubeId(youTubeUrl));

youTubeUrl = "my.flv";
trace(typeof ToobPlayerComponent.extractYouTubeId(myFlvUrl));

Output:

T8oRFcA0mFM
T8oRFcA0mFM
T8oRFcA0mFM
T8oRFcA0mFM
undefined

Methods inherited from the resizableClip class

setSize(p_width:Number, p_height:Number) : Void

Resizes the component to the requested size. (Dimensions are always rounded.)

addEventListener(p_eventName:String, p_handler) : Void

Registers a listener object or function (p_handler) with a component instance that is broadcasting an event. When the event occurs, the listener object or function is notified. If p_handler is a function, it will be invoked from within the dispatching object's scope.

Example 1
myToobPlayer.display.addEventListener("complete", this);

function complete(e:Object):Void {
	if (myToobPlayer.display.playing) {
		// finished playing current video; play next video
		myToobPlayer.url = nextClip;
	}
}
Example 2
myToobPlayer.display.addEventListener("complete", myCompleteHandler);

function myCompleteHandler(e:Object):Void {
	if (myToobPlayer.display.playing) {
		// finished playing current video; play next video
		myToobPlayer.url = nextClip;
	}
}

addEventListenerL(p_eventName:String, p_obj:Object, p_handler) : Void

Registers a listener function (p_handler) with a component instance that is broadcasting an event. When the event occurs, the listener function is invoked using the p_obj scope.

Example
myToobPlayer.display.addEventListenerL("complete", this, "myCompleteHandler");
myToobPlayer.display.addEventListenerL("complete", myToobPlayer, function() { trace("Finished playing: "+this.url); });

function myCompleteHandler(e:Object):Void {
	if (myToobPlayer.display.playing) {
		// finished playing current video; play next video
		myToobPlayer.url = nextClip;
	}
}

removeEventListener(p_eventName:String, p_handler) : Void

Unregisters a listener.

Example 1
myToobPlayer.display.removeEventListener("complete", this);
Example 2
myToobPlayer.display.removeEventListener("complete", myCompleteHandler);

removeEventListenerL(p_eventName:String, p_obj:Object, p_handler) : Void

Unregisters a listener.

Example
myToobPlayer.display.removeEventListener("complete", this, "myCompleteHandler");

removeAllEventListeners(p_eventName:String) : Void

Unregisters all listeners registered with a p_eventName event.

Example
myToobPlayer.display.removeAllEventListeners("complete");

dispatchEvent(p_eventObj:Object) : Void

Dispatches an event to any listener registered with an instance of the class. This method is usually called from within a component's class file. p_eventObj is passed to all listeners, and must contain a type property indicating the name of the event.

Example
// trigger a custom event
myToobPlayer.dispatchEvent({ type: "myCustomEvent"});

Properties

url : String

Specifies an FLV file to play. If a YouTube video URI is specified, the temporary direct link to youTube video will be acquired using the youTubeProxy. If autoPlay property is set to true, playback will start immediately, i.e., in case of a YouTube video URI, as soon as the temporary direct link has been acquired. Otherwise, use display.play method to start the playback programmatically.

url is mostly identical to display.url. However, display.url does not handle acquiring of YouTube links.

url uses extractYouTubeId to detect YouTube IDs.

Please note: url property is delayed in its execution, if the component had not been fully initialized.

Example
if (myToobPlayer.autoPlay) {
	// start playing the video
	myToobPlayer.url = "clip.flv";
}
else {
	// url property is delayed during the component initialization,
	// and because of this, myToobPlayer.display.play() will not be able to
	// work properly, if we do not wait a frame for the component to 
	// fully initialize
	onEnterFrame = function() {
		myToobPlayer.url = "clip.flv";
		myToobPlayer.display.play();
		delete onEnterFrame;
	}
}

// or simpler
myToobPlayer.autoPlay = true;
myToobPlayer.url = "clip.flv";

Example with YouTube

if (myToobPlayer.autoPlay) {
	// start playing the video
	myToobPlayer.url = "http://www.youtube.com/watch?v=T8oRFcA0mFM";
}
else {
	myToobPlayer.url = "http://www.youtube.com/watch?v=T8oRFcA0mFM";
	myToobPlayer.display.addEventListener("acquiredYouTubeUrl", function () {
		myToobPlayer.display.play(); });
	// or you could simply activate myToobPlayer.autoPlay
}

autoPlay : Boolean

autoPlay is an alias for the display.autoPlay property. If set to true, causes the FLV file to play immediately when the url property is set. The default value is true.

Example
// do not auto-play the video
myToobPlayer.autoPlay = false;

// load preview image from YouTube
myToobPlayer.autoLoadYouTubePreviewImage = true;
myToobPlayer.url = "http://www.youtube.com/watch?v=T8oRFcA0mFM";

autoRepeat : Boolean

autoRepeat is an alias for the display.autoRepeat property. If set to true, causes the FLV file to play continuously, i.e. to start over each time upon reaching its end. The default value is false.

Example
myToobPlayer.autoRepeat = true;

volume : Number

volume is an alias for the display.volume property. It indicates the volume control setting. The default value is 50.

Example
// mute
myToobPlayer.volume = 0;

showFullScreenButton : Boolean

Toggles the display of the full-screen button.

Example
myToobPlayer.showFullScreenButton = true;

mouseWheel : String

Determines how the component behaves when the user rolls the mouse wheel over the component area. Possible values are "none", "seek", and "volume". By default, this value is "seek".

Example
// disable mouse wheel
myToobPlayer.mouseWheel = "none";

mouseWheelSeekStep : Number

Indicates the playhead increment or decrement (in seconds) for each notch the user rolls the mouse wheel. Larger value produces faster seeking. The default value is 5 seconds.

Example
myToobPlayer.mouseWheel = "seek";

// faster seeking using mouse wheel
myToobPlayer.mouseWheelSeekStep = 10;

mouseWheelVolumeStep : Number

Indicates the volume increment or decrement (in percent) for each notch the user rolls the mouse wheel. Larger value produces faster volume change. The default value is 5 percent.

Example
myToobPlayer.mouseWheel = "volume";

// faster volume control using mouse wheel
myToobPlayer.mouseWheelVolumeStep = 10;

autoLoadYouTubePreviewImage : Boolean

Defines whether or not the YouTube preview image will be loaded automatically upon setting the url property.

Example
myToobPlayer.autoPlay = false;
myToobPlayer.autoLoadYouTubePreviewImage = true;
myToobPlayer.url = "http://www.youtube.com/watch?v=T8oRFcA0mFM";

isAcquiringYouTubeUrl : Boolean [read-only]

After setting the url property, there is a short period of time indicated by the isAcquiringYouTubeUrl property, during which the direct link to the YouTube video is acquired.

Example
myToobPlayer.display.addEventListener("acquiringYouTubeUrl", this);
myToobPlayer.display.addEventListener("acquiredYouTubeUrl", this);

myToobPlayer.url = "http://www.youtube.com/watch?v=T8oRFcA0mFM";

function acquiringYouTubeUrl() {
	trace(myToobPlayer.isAcquiringYouTubeUrl); // true
}

function acquiredYouTubeUrl() {
	trace(myToobPlayer.isAcquiringYouTubeUrl); // false
	trace(myToobPlayer.display.url); // the acquired address of the YouTube video
}

isFullScreen : Boolean [read-only]

Indicates whether the full-screen mode is active.

display : xm.components.FLVDisplayComponent

Reference to the FLVDisplay component. This component handles the FLV video.

Example
// rewind the video
myToobPlayer.display.time = 0;
myToobPlayer.display.pause(true);

ctrl : xm.components.FLVControllerComponent

Reference to the FLVController component. This component provides a user interface to control the video playback, set the video volume, etc.

image : xm.components.ImageContainerComponent

Reference to the ImageContainer component. This component is used to implement automatic loading of the YouTube preview images, and may also be used to display custom preview images.

Example
myToobPlayer.display.clear();
myToobPlayer.image.clear();

myToobPlayer.autoPlay = false;
myToobPlayer.image.url = "myPreviewImage.jpg";
myToobPlayer.url = "myVideo.flv";

Properties inherited from the resizableClip class

width : Number

The width of the component, in pixels. (This value is always rounded.)

Example
myToobPlayer.width = 400;

height : Number

The height of the component, in pixels. (This value is always rounded.)

Example
trace("h: "+myToobPlayer.height);

minWidth : Number

The minimal width of the component, in pixels. By default, equals to 0.

minHeight : Number

The minimal height of the component, in pixels. By default, equals to 0.

maxWidth : Number

The maximal width of the component, in pixels. By default, equals to Infinity.

maxHeight : Number

The maximal height of the component, in pixels. By default, equals to Infinity.

Aligner : xm.corpus.aligner

Reference to the aligner object that manages the aligning within the component.

Events

enterFullScreen

Broadcast before entering the full-screen mode.

Example
myToobPlayer.addEventListener("enterFullScreen", this);

function enterFullScreen() {
	trace("entering full-screen");
}

exitFullScreen

Broadcast after exiting the full-screen mode.

Example
myToobPlayer.addEventListener("exitFullScreen", this);

function enterFullScreen() {
	trace("back from full-screen");
}

Events inherited from the resizableClip class

resize

Broadcast when the component has been resized.

Example
myToobPlayer.addEventListener("resize", this);

myToobPlayer._x = 0;
myToobPlayer._y = 0;
myToobPlayer.setSize(Stage.width, Stage.height);

function resize() {
	trace("w: "+myToobPlayer.width+" h: "+myToobPlayer.height);
}

Possible output:

w: 1280 h: 1024

Class Summary

Methods

Methods inherited from the resizableClip class

Properties

Properties inherited from the resizableClip class

Events

Events inherited from the resizableClip class

License and Links

The MIT License

Copyright (c) 2008 Elvis Mehmedović

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Links