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. |