Description
GOAL: Use a NetShow Services audio stream to control and synchronize DHTML events
on the page.
To do this, we use Internet Explorer 4.x, and a NetShow Services 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 Services stream. NSPlay1 refers to the
Windows Media Player control. This segment of code should come after the <TITLE>
tag in your HTML.
<Script Language=VBScript>
dim bFadeWhite, bFadeBlack
dim bLogoIn, bLogoOut
dim bBannerIn, bBannerOut
dim bControlsIn, bControlsOut
sub window_OnLoad()
Cap1.style.left = 300
Cap1.innerText = "Please Wait..."
Cap1.style.color=&HFFFFFF
'document.all.test.style.top=350
'document.all.test.style.left=175
end sub
'****************************************
'* Driver Timer Routines*
'****************************************
sub driver_Timer
Window.Status = "Driver Enabled"
if bFadeWhite OR bFadeBlack OR bLogoIn OR bLogoOut OR bBannerIn OR bBannerOut OR bControlsIn OR bControlsOut then
if bBannerIn then
BannerTop=Cint(left(document.all.Banner.style.top,len(document.all.Banner.style.top)-2))
BannerTop=BannerTop+1
if BannerTop > 25 then
document.all.Banner.style.top=25
bBannerIn=False
end if
document.all.Banner.style.top = BannerTop
end if
if bBannerOut then
BannerTop=Cint(left(document.all.Banner.style.top,len(document.all.Banner.style.top)-2))
BannerTop=BannerTop-1
if BannerTop <-39 then
document.all.Banner.style.top=-40
bBannerOut=False
end if
document.all.Banner.style.top = BannerTop
end if
if bControlsIn then
ControlsLeft=Cint(left(document.all.Controls.style.left,len(document.all.Controls.style.left)-2))
ControlsLeft=ControlsLeft+12
if ControlsLeft > 10 then
document.all.Controls.style.left=10
bControlsIn=False
end if
document.all.Controls.style.left = ControlsLeft
end if
if bControlsOut then
ControlsLeft=Cint(left(document.all.Controls.style.left,len(document.all.Controls.style.left)-2))
ControlsLeft=ControlsLeft-12
if ControlsLeft <-275 then
document.all.Controls.style.left=-275
bControlsOut=False
end if
document.all.Controls.style.left = ControlsLeft
end if
if bFadeWhite then
dLumens = Cdbl("&H" & Right(Document.BgColor,6))
dLumens = dLumens + Cdbl(&H111111)
if dLumens > Cdbl(&HEEEEEE) then
dLumens = Cdbl(&HFFFFFF)
bFadeWhite=false
end if
document.BgColor=Hex(dLumens)
end if
if bFadeBlack then
dLumens = Cdbl("&H" & Right(Document.BgColor,6))
dLumens = dLumens - Cdbl(&H111111)
if dLumens < Cdbl(&H111111) then
dLumens = Cdbl(&H000000)
bFadeblack=false
end if
document.BgColor=Hex(dLumens)
end if
if bLogoIn then
LogoLeft=Cint(left(document.all.logo.style.left,len(document.all.logo.style.left)-2))
LogoLeft=LogoLeft+12
if LogoLeft > 10 then
document.all.logo.style.left=10
bLogoIn=False
end if
document.all.logo.style.left = LogoLeft
end if
if bLogoOut then
LogoLeft=Cint(left(document.all.logo.style.left,len(document.all.logo.style.left)-2))
LogoLeft=LogoLeft-12
if LogoLeft <-275 then
document.all.logo.style.left=-275
bLogoOut=False
end if
document.all.logo.style.left = LogoLeft
end if
else
Driver.enabled=false
Window.Status = "Driver disabled"
end if
end sub
'****************************************
'* Script command director*
'****************************************
sub NSPlay1_ScriptCommand(scType, mark)
if ScType="sc" then
end if
end sub
sub BookMark(mark)
select case mark
case 1
Cap2.style.left = 315
Cap2.style.color=&H000000
Cap2.innerText = ""
call fadeWhite
case 2
document.all.Cap1.style.left = 275
Cap1.innerText = "Dynamic HTML"
Cap1.style.color=&HFFFFFF
call fadeBlack
case 3
Cap2.innerText = ""
call FadeWhite
case 4
case 5
case 6
Cap1.innerText = ""
fadeBlack
case 7
Cal1.style.top =200
Cal1.style.left=400
Cal2.style.left=-300
case 8
Cal2.style.top =200
Cal2.style.left=400
Cal1.style.left=-300
case 9
Day17.style.BackGroundColor=&H00CCFF
case 10
Cal1.style.left=-300
Cal2.style.left=-300
case 11
document.all.logo.style.left = -275
ControlsIn
case 12
Cap1.innerText = "_OnMouseOver"
case 13
Cap1.innerText = "_OnMouseOut"
case 14
Cap1.innerText = "_OnClick"
case 15
Cap1.innerText = ""
controlsOut
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 = ""
case 17
end select
end sub
'****************************************
'* Move routines*
'****************************************
sub BannerIn
bBannerIn=true
bBannerOut=false
driver.enabled=true
end sub
sub BannerOut
bBannerOut=true
bBannerIn=false
driver.enabled=true
end sub
sub ControlsIn
bControlsIn=true
bControlsOut=false
driver.enabled=true
end sub
sub ControlsOut
bControlsOut=true
bControlsIn=false
driver.enabled=true
end sub
sub FadeWhite
bFadeBlack=false
bFadeWhite=true
Driver.enabled=true
end sub
sub FadeBlack
bFadeWhite=false
bFadeBlack=true
Driver.enabled=true
end sub
sub LogoIn
bLogoOut=false
bLogoIn=true
Driver.enabled=true
end sub
sub LogoOut
bLogoOut=true
bLogoIn=false
Driver.enabled=true
end sub
</Script>
This says that if the NetShow Services control sends an event (scType) called sc, to plug the parameter it sends
with it (Mark)
into the subroutine called BookMark. This subroutine 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 subroutine 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.
EVENTS AND PARAMETERS TO PUT IN YOUR NETSHOW SERVICES STREAM: The preceding subroutine will
wait for events and parameters from the NetShow Services 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 |
For more information about using DHTML, see the DHTML, HTML & CSS area of the SBN Workshop.
