The crossPlayer_basic.
Introduction.
We reckon you are familiar with those standalones application multimedia players like the Real G2 player, Windows Media Player and Crescendo player used to view/listen to all those different mediaformats around. You may also most certainly come across mediacontent embedded in HTML pages outhere. The crossPlayer_xxx extension is then best described as something in between those two ways described of viewing, simply speaking.

From a more technical point of view, the crossPlayer series is just plain embedded HTML, but with an extensive boost using javascript they are detached from that usual static HTML limitations and made dynamic, adapting the look and feel of a standalone application-style player of media content. This is achieved by the use what is commonly is referred to as "layers" and a set of hi-performance images, all together designed as a flexible skin. With hi-perf. we mean images that virtually requires nada bandwith. The skins that you'll see in this showoff totals less than 1kb (!)

Apart from the common console players mentioned earlier, this media-wrapping technique makes the crossPlayer able to host virtually any mediaType available, as long as there is a plug-in / ActiveX module that can handle it. And since the crossProbe interface currently can detect 19 of them, it makes a good line to choose the ones best suiting your needs.

Start a crossPlayer.
ok, let's start by trig an instance of crossPlayer.
Pick a skin and choose an initial media-size.


Graphical skins
By using this skin technique and a strict file-name convention, the "look" of the player can be completely changed just by switching skin-directory on-the-fly. Say, one visitor drops by with a German version of MSIE, pick this skin. Another got an US MSIE browser, pick that other skin. Are you following ?! The crossPlayer_basic used here has currently two different skins available. Since we wanted to bring forth the true meaning of skins, making a new custom skin fitting the crossPlayer_basic skeleton is a piecofcake task. If your are somewhat into graphics, that is :) We provide the Photoshop 4+ templates for the current skins at the support center for anyone interested, so that you can build your own. Thus we hope that you'll share your creations with the crowd by making it available at the center.

Scripting features.
This showoff uses media-content requiring the Macromedia Flash 3+ player, so in case you only see an image in the playerview, you appearantly do not have that plug-in available.
As you see the player is absolutely positioned and thereby not tied to the static HTML flow as these lines of text are. To point out the new possibilites absolute positioning brings, we have injected the player with an extension maiking it dragable. So,try drag the player around.
crossPlayer_basic scales itself to fit the media object at parsetime based upon the size of the plug-in/ ActiveX object set by the with the initial crossProbe setObjectArguments method. That is what just happened when pressed the button.
There is no limitation of how many crossPlayers you can run at the same time, that is up to what the client box can handle memorywize. Here though, we only use a single instance to make the src code more simple to swallow.

The player buttons you are seeing are added in separately by the addButton command. The current button are two out of three defualt buttons available for each skin. If you'd like to explore the realm of making your own custom buttons, I suggest you have a look at Photoshop 4+ skin-templates available at the support center.

As of version 1.50 of the crossPlayer, we put in effort to make it as dynamic as possible. You can now change text and style of both the player-title and the statusbar at anytime. This is useful when you want to reflect a description the current media-clip, show connection status or having a recieved-packet-meter info of a media stream etc.

Dynamic titling.
Setting a new titlevalue is done by the setTitle method. You can pass in two arguments here. 1. titletext, 2.CSS attributes. Try a textchange;

 
The statusbar
Replacing text in the statusbar is done using the setStatus method. Input arguments are the same as setTitle, text & CSS.
Note! The setStatus CSS argument does currently not work with Netscape .

 
Dynamically resizing the crossPlayer.
This piece is pretty cool. It allows users to resize the view area of the player whille running. Due to limitions in the current Netscape DOM, resizing looks far smoother in MSIE since this method when invoked, has to re-parse the Netscape "target layer", which has its estethical drawback. But it is as close we can get.
The resizeTo and resizeBy methods both takes two arguments, width and height. The action they perform is quite different from eachother as their names may imply. Click the buttons below to find out how.
Double the media-view.
resizeTo( width * 2, height * 2 )
Increase the the media-view by
100x100 px. resizeBy( 50, 50)
Decrease the the media-view by
100x100 px. resizeBy( -50, -50)
 
ok, feel free to investigate and perform cut and pasting the src-code of this page. Nearly every line of code is commented.

-cheers.
Feb 5, 2000, Betty Crossprobe.