www.mediacollege.com | Support Forum
MC Media Player

MC Altair Examples: Single Video File Player

The examples below show different configurations of the MC Altair player. They use a heavily improved version of mcmp_0.8.js that allows json config style configuration.
Notice the extra call to build each player is just made after configuring it with mccode(), this avoids to include the js script each time you want to build a player. As shown in the first example, the mccode function accepts two parameters. the first one is the player version, here 0.8 and the second, a name of a config or a config object holding all settings à la json style.However, for backward compatibility with Dave's work, when no params is provided, it will use directly global variables.
IMPORTANT NOTICE: In all examples, beware of one thing if you use relative paths for local videos, fpFileURL is relative not to the current html page in which the player will run but to the player file (mcmp_0.8.swf) that may be not in the same directory but in a shared one (this is a bit like css for images)..First sample was not working due to this, FIXED


Example 1  Download
 
This is the default player configuration—the only things defined are the video file and preview image. The control panel (CP) is positioned at the bottom of the screen, overlaid on the video at 60% opacity. The CP can be hidden with the small button on the left.
var version=0.8; //Should be provided when a config is given
var config='Example 1'; //A new config name
config=configs[config]={ //Here I show the two variations, choose one. If you remove 'config=' on this line, you will be able to reuse registered config 'Example 1' later
  //playerFile: computed from version,
  fpFileURL:"vision2004.flv",
  fpPreviewImageURL:"vision2004.jpg"
};
mccode(version,config);

Example 2  Download
 
This example uses a slightly different color scheme. The big play button is larger and more transparent. The CP is positioned below the video screen so there is no overlay. The video file is the same as the first example but this time it is served from a streaming server.
streamingServerURL = "rtmp://example.com/StreamingServer";
fpFileURL = "vision2004.flv";
fpPreviewImageURL = "vision2004.jpg";
playerSize = "480x294";
colorScheme = "437089";
cpPosition = "0x270";
cpBackgroundOpacity = "100";
cpHidePanel = "never";
fpButtonSize = "240x240";
fpButtonOpacity = "20";
playerBackgroundColor = "000000";
videoScreenSize = "480x270";
mccode();
//or simply mccode(version,'Example 2'); with 2.js previously included.

Example 3  Download
 
This smaller player has a 4x3 aspect ratio. The CP and background color are blue. The CP fades out when the mouse leaves the player (with a 1.5-second delay). The big play button is in the top left corner.
fpFileURL = "sts120-overview.flv";
fpPreviewImageURL = "sts120-overview.jpg";
playerSize = "320x240";
playerBackgroundColor = "000066";
cpBackgroundColor = "66cc";
cpBackgroundColor = "66cc";
cpBackgroundOpacity = "30";
cpHidePanel = "mouseout";
cpHideDelay = "1.5";
fpButtonOpacity = "20";
fpButtonPosition = "-28x-20";
mccode();
//or simply mccode(version,'Example 3'); with 3.js previously included.

Example 4  Download
 
In this example the CP elements are spread around the video screen, which has been reduced in size. This demonstrates how the various elements can be positioned anywhere within the player.
fpFileURL = "spaceship2.flv";
fpPreviewImageURL = "spaceship2.jpg";
cpCounterPosition = "227x150";
cpFullscreenBtnPosition = "286x108";
cpHidePanel = "never";
cpInfoBtnPosition = "286x121";
cpPlayBtnPosition = "7x65";
cpRepeatBtnPosition = "286x95";
cpScrubberPosition = "38x155";
cpStopBtnPosition = "7x85";
cpVolumeBtnPosition = "277x65";
fpButtonOpacity = "0";
playerSize = "306x170";
playerBackgroundColor = "0";
videoScreenPosition = "30x10";
videoScreenSize = "243x137";
mccode();
//or simply mccode(version,'Example 4'); with 4.js previously included.

Example 5  Download
 
Getting back to basics, this player shows only the play/pause and stop buttons.
fpFileURL = "shuttle-names.flv";
fpPreviewImageURL = "shuttle-names.jpg";
cpBackgroundColor = "ffffff";
cpCounterPosition = "0x220";
cpFullscreenBtnPosition = "0x220";
cpPlayBtnColor = "9900";
cpStopBtnColor = "990000";
cpHidePanel = "never";
cpInfoBtnPosition = "0x220";
cpRepeatBtnPosition = "0x220";
cpScrubberPosition = "0x220";
cpVolumeBtnPosition = "0x220";
fpButtonOpacity = "0";
playerSize = "240x204";
playerBackgroundColor = "ffffff";
videoScreenSize = "240x180";
mccode();
//or simply mccode(version,'Example 5'); with 5.js previously included.