Movie player element

Challenge

In order to play webcast some flash movies to many users As a consultant I want to create a portal element showing a list of flash movies, and playing movies on selection

Solution

• Create a user defined element
• Add flash movies as attachments to the element
• Add script:
  • Use CGFlashPlayers to play flashes

Code

var MovieclipViewer3 =
{
	onInit: function(clip, element, linkText)
	{
		MovieclipViewer3.flash = CGFlashPlayers.initialize("cgflash", "http://fire.catglobe.com/Script/CGFlashPlayer/CGFlashPlayer.swf", 298,265);
		MovieclipViewer3.flash.appendTo(element);		
				
		var p = $("<p>");
		$(p).append($("<u>" + linkText + "</u>").css("cursor","pointer").css("font-style", "italic").click(
			function()
			{
				getPlayList();
			}
		));
		$(element).append($("<br/>"));
		$(element).append($(p));
		$(element).append($("<br/>"));
		
		MovieclipViewer3.flash.visiblePlaylistButton(false);
		MovieclipViewer3.flash.visibleControlBar(false);
		MovieclipViewer3.flash.registerEvent(CGFlashPlayers.Events.OnPlayListReady, MovieclipViewer3.onPlayListReady);
		MovieclipViewer3.flash.registerEvent(CGFlashPlayers.Events.OnStop, MovieclipViewer3.onStop);

		// Prepare the play list
		MovieclipViewer3.flash.openPlayList(clip);
	},
	
	onPlayListReady: function()
	{
		MovieclipViewer3.flash.play();
	},
	onStop: function()
	{
		getPlayList();
	}
}

var _this;

//get the play list
function getPlayList()
{
	_this.set_title("Main list");
	var clipLinks = new Array();
	clipLinks[0] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369842";
	clipLinks[1] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369843";
	clipLinks[2] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369844";
	clipLinks[3] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369845";
	clipLinks[4] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369846";
			
	var clipNames = new Array();
	clipNames[0] = "Clip 1";
	clipNames[1] = "Clip 2";
	clipNames[2] = "Clip 3";
	clipNames[3] = "Clip 4";
	clipNames[4] = "Clip 5";	

	var content = _this.get_contentDiv();
	content.innerHTML = "";
	var p = $("<p>").css("padding-bottom", "5");
	var ul = $("<ul>");
	
	$(content).append($(p));
	$(p).append($(ul));
	
	for(var i= 0; i<clipLinks.length; i++)
	{
		$(ul).append($("<li>").text(clipNames[i]).css("cursor","pointer").css("font-style", "italic").val(i)
			.click(
				function()
				{	
					_this.set_title(clipNames[this.value]);
					MovieclipViewer3.onInit(clipLinks[this.value], content, "&lt;&lt;&lt; Back to main list");
				}
			)
		)	
	}
}

this.onload = function()
{
	_this = this;	
	//play a default clip
	_this.set_title("Intro");	
	getPlayList();
}