| |
NetShow Services
Dynamic HTML Streamed by NetShow Services |
|
 |
Demo |
|
Description
GOAL: Use a NetShow audio stream to control and synchronize DHTML events
on the page.
To do this, we use Internet Explorer 4.x, and a NetShow ASF file with script events
embedded into the stream that fire off DHTML events at specific times in the playback
of the audio file. Note that in this case, we made the Windows Media Player control invisible and
used audio only. You could certainly have the Windows Media Player control appear on the page and
contain audio only, illustrated audio, or video.
CODE TO PUT IN YOUR HTML: These subroutines are used to receive and interpret
the events and parameters being sent from the NetShow stream. NSPlay1 refers to the
Windows Media Player control. This segment of code should come after the <TITLE>
tag in your HTML.
<Script Language=javascript>
var bFadeWhite, bFadeBlack;
var bLogoIn, bLogoOut;
var bBannerIn, bBannerOut;
var bControlsIn, bControlsOut;
function InitializePage()
{
Cap1.style.left = 300;
Cap1.innerText = "Please Wait...";
Cap1.style.color = 0xFFFFFF;
} /* end InitializePage() */
window.onload = InitializePage;
//---------------------------------------
// Driver Timer Routines
//---------------------------------------
function Driver_Timer ()
{
window.status = "Driver Enabled";
if (bFadeWhite || bFadeBlack || bLogoIn || bLogoOut || bBannerIn || bBannerOut || bControlsIn || bControlsOut) {
if (bBannerIn) {
BannerTop = parseInt(document.all.Banner.style.top);
BannerTop += 1;
if (BannerTop > 25) {
document.all.Banner.style.top = 25;
bBannerIn = false;
}
document.all.Banner.style.top = BannerTop;
}
if (bBannerOut) {
BannerTop = parseInt(document.all.Banner.style.top);
BannerTop -= 1;
if (BannerTop < -39) {
document.all.Banner.style.top = -40;
bBannerOut = false;
}
document.all.Banner.style.top = BannerTop;
}
if (bControlsIn) {
ControlsLeft = parseInt(document.all.Controls.style.left);
ControlsLeft += 12;
if (ControlsLeft > 10) {
document.all.Controls.style.left = 10;
bControlsIn = false;
}
document.all.Controls.style.left = ControlsLeft;
}
if (bControlsOut) {
ControlsLeft = parseInt(document.all.Controls.style.left);
ControlsLeft -= 12;
if (ControlsLeft < -275) {
document.all.Controls.style.left = -275;
bControlsOut = false;
}
document.all.Controls.style.left = ControlsLeft;
}
if (bFadeWhite) {
dLumens = document.bgColor;
dLumens += 0x111111;
if (dLumens > 0xEEEEEE) {
dLumens = 0xFFFFFF;
bFadeWhite = false;
}
document.bgColor = dLumens;
}
if (bFadeBlack) {
dLumens = document.bgColor;
dLumens -= 0x111111;
if (dLumens < 0x111111) {
dLumens = 0;
bFadeblack = false;
}
document.bgColor = dLumens;
}
if (bLogoIn) {
LogoLeft = parseInt(document.all.logo.style.left);
LogoLeft += 12;
if (LogoLeft > 10) {
document.all.logo.style.left = 10;
bLogoIn = false;
}
document.all.logo.style.left = LogoLeft;
}
if (bLogoOut) {
LogoLeft = parseInt(document.all.logo.style.left);
LogoLeft -= 12;
if (LogoLeft < -275) {
document.all.logo.style.left = -275;
bLogoOut = false;
}
document.all.logo.style.left = LogoLeft;
}
} else {
Driver.enabled = false;
Window.Status = "Driver disabled";
}
} /* end driver_Timer() */
//---------------------------------------
// Script command director
//---------------------------------------
function BookMark (mark)
{
switch (mark) {
case '1':
Cap2.style.left = 315;
Cap2.style.color = 0;
Cap2.innerText = "";
FadeWhite();
break;
case '2':
document.all.Cap1.style.left = 275;
Cap1.innerText = "Dynamic HTML";
Cap1.style.color = 0xFFFFFF;
FadeBlack();
break;
case '3':
Cap2.innerText = "";
FadeWhite();
break;
case '4':
case '5':
case '6':
Cap1.innerText = "";
FadeBlack();
break;
case '7':
Cal1.style.top = 200;
Cal1.style.left = 400;
Cal2.style.left = -300;
break;
case '8':
Cal2.style.top = 200;
Cal2.style.left = 400;
Cal1.style.left = -300;
break;
case '9':
Day17.style.BackGroundColor = 0x00CCFF;
break;
case '10':
Cal1.style.left = -300;
Cal2.style.left = -300;
break;
case '11':
document.all.logo.style.left = -275;
ControlsIn();
break;
case '12':
Cap1.innerText = "_OnMouseOver";
break;
case '13':
Cap1.innerText = "_OnMouseOut";
break;
case '14':
Cap1.innerText = "_OnClick";
break;
case '15':
Cap1.innerText = "";
ControlsOut();
break;
case '16':
document.all.Cap1.style.left = 325;
Cap1.innerText = "NetShow";
document.all.Cap2.style.Top = 125;
document.all.Cap2.style.Left = 250;
document.all.Cap2.style.fontsize = 72;
Cap2.innerText = "Dynamic";
Banner.innertext = "";
break;
case '17':
default:
}
} /* end BookMark() */
//---------------------------------------
// Move routines
//---------------------------------------
function BannerIn ()
{
bBannerIn = true;
bBannerOut = false;
Driver.enabled = true;
}
function BannerOut ()
{
bBannerOut = true;
bBannerIn = false;
Driver.enabled = true;
}
function ControlsIn ()
{
bControlsIn = true
bControlsOut = false
Driver.enabled = true
}
function ControlsOut ()
{
bControlsOut = true;
bControlsIn = false;
Driver.enabled = true;
}
function FadeWhite ()
{
bFadeBlack = false;
bFadeWhite = true;
Driver.enabled = true;
}
function FadeBlack ()
{
bFadeWhite = false;
bFadeBlack = true;
Driver.enabled = true;
}
function LogoIn ()
{
bLogoOut = false;
bLogoIn = true;
Driver.enabled = true;
}
function LogoOut ()
{
bLogoOut = true;
bLogoIn = false;
Driver.enabled = true;
}
</Script>
This says that if the Windows Media Player control sends an event (scType) called sc, to plug the parameter it sends
with it (Mark)
into the function called BookMark. This function triggers
different DHTML actions based on the Mark number being
sent at that time. For example, if the event is sc and the parameter
is number 12, then the function called will execute the
command Cap1.innerText = "_OnMouseOver", or the text in the
middle of the document should change to read, "_OnMouseOver."
Remember that this won't work unless your ASF stream contains these events and parameters.
Also, you will need to add the following to the body of the HTML page. The first
<OBJECT> called Driver handles the fade in/fade out
and movement tempo of events on the page. The NSPlay1 <OBJECT>
tag is the Windows Media Player control that plays the ASF. Note that the width and height are set
to zero so the player won't show on the page at all. The NSPlay1
JavaScript block simply allows the Windows Media Player control to send events that are interpreted
by the JavaScript code above.
<OBJECT ID=Driver valign=bottom Height=0 width=0 classid="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2">
<param name="Interval" value="1">
<param name="Enabled" value="false">
</OBJECT>
<script LANGUAGE="JavaScript" FOR="Driver" EVENT="Timer">
</script>
<OBJECT ID="NSPlay1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95">
<PARAM NAME="AnimationAtStart" VALUE="0">
<PARAM NAME="ClickToPlay" VALUE="0">
<PARAM NAME="FileName" VALUE="http://servername/path/leefin_288.asx">
</OBJECT>
<script LANGUAGE="JavaScript" FOR="NSPlay1" EVENT="ScriptCommand(ScType, mark)">
if (ScType = "sc")
BookMark(mark);
</script>
EVENTS AND PARAMETERS TO PUT IN YOUR NETSHOW STREAM: The preceding subroutine will
wait for events and parameters from the NetShow stream to be sent to it before it will
do anything. In this example, here are the events and parameters we used:
| Time |
Event (scType) |
Parameter (Mark) |
| 00:06.0 |
SC |
1 |
| 00:19.0 |
SC |
2 |
| 00:25.0 |
SC |
3 |
| 00:29.0 |
SC |
4 |
| 00:39.0 |
SC |
5 |
| 00:47.0 |
SC |
6 |
| 00:51.0 |
SC |
7 |
| 00:57.0 |
SC |
8 |
| 01:04.0 |
SC |
9 |
| 01:08.0 |
SC |
10 |
| 01:10.0 |
SC |
11 |
| 01:14.0 |
SC |
12 |
| 01:15.0 |
SC |
13 |
| 01:18.6 |
SC |
14 |
| 01:20.0 |
SC |
15 |
| 01:22.3 |
SC |
16 |
| 01:29.0 |
SC |
17 |
Here, at specific times, the sc events and
mark parameters are sent to the browser, where the BookMark
function acts upon them.
For more information about using DHTML, see the Dynamic HTML area of the Site Builder Workshop.
