The Notable JavaScript

This section discusses the JavaScript code that's emitted by the VideoPresentations class. Each of the following sections talks about a selected portion of the JavaScript code.

The Table of Contents Mouse Over, Out, and Down Code

The table of contents list gives feedback to the user for three mouse events. One event is when the mouse enters the space for an entry in the list. When this happens, the code calls the TOCmouseOver() method shown in Listing 20.1, which changes the text color of the target item to green. Another event is when the mouse leaves the space for an entry in the list. When this happens, the TOCmouseOut() method shown in Listing 20.2 is called, which changes the text color back to the original. If the user clicks an entry in the list, the TOCmouseDown() method is called (shown in Listing 20.1), which sets the item text to purple. This user interaction is important because it lets users know that something will happen if they click on these items. Green and purple were chosen for the contrast that they offer.

The code below is interesting for several reasons. The first thing I'd like to point out is that the name of the class is checked to make sure that only the Marker and MarkerTitle classes are affected.

Listing 20.1 Code That Responds to Mouse Events for the Table of Contents

 function TOCmouseOver()  {   var vSrc = window.event.srcElement;   if( vSrc.className == "Marker" || vSrc.className == "MarkerTitle" )   {    fColor = vSrc.style.color;    vSrc.style.color = "Green";    window.event.cancelbubble = true;   }  } function TOCmouseOut() {  var vSrc = window.event.srcElement;  if( vSrc.className == "Marker" || vSrc.className == "MarkerTitle" )  {   vSrc.style.color = fColor;   window.event.cancelbubble = true;  } } function TOCmouseDown() {  var vSrc = window.event.srcElement;  if( vSrc.className == "Marker" || vSrc.className == "MarkerTitle" )  {   vSrc.style.color = "Purple";   window.event.cancelbubble = true;  } } 

Navigation Code

There's a JavaScript method named GoMarker() that seeks, and moves to a given marker number in the video stream. Markers are special events that can be inserted into video streams to alert the player when something needs to happen. In the case of this application, the something that needs to happen is the change of a slide. I use Vegas Video to edit files and insert markers. The GoMarker() method can be seen in Listing 20.2. It uses the instantiated Windows Media Player object named VideoPlay seek to the marker. For Microsoft IE browsers (Versions 4.0 and later), this method sets the CurrentMarker property to the appropriate marker number, calls the Play() method, the sets the appropriate slide for the <DIV> object on the page named Slide.

Listing 20.2 JavaScript Code That Performs Navigation within the Video Stream

 function GoMarker( markernumber ) {  if( IE4)  {   if( document.VideoPlay.PlayState == 2)   {    document.VideoPlay.Pause();   }   document.VideoPlay.CurrentMarker = markernumber;   document.VideoPlay.Play();   document.all.Slide.src="/books/2/627/1/html/2/Poem1/Slides/M" + markernumber + ".gif"  }  else  {   document.VideoPlay.SetCurrentMarker( markernumber );  } } 

NOTE: When you edit the video file, you must be careful to insert markers and text in the correct manner. All markers must follow the format M1, M2, M3, and so on. All text should follow the format M1, M2, M3, and so on. The markers and text must occur at exactly the same location. For instance, marker M1 should be in the same spot as text M1.

Multimedia Player Event Handler

An event is fired by the VideoPlay object each time a script command named ScriptCommand() has been encountered in the video stream. Because the only commands in the video stream are Text commands that represent the slide name, the ScriptCommand() event handler can take the value of the command and create the file path to the slide. Listing 20.3 shows this method.

Listing 20.3 The Event Handler That Is Called When There Is a Script Command in the Video Stream

 <script language='JavaScript' for="VideoPlay"    event="ScriptCommand(bstrType, bstrParam)">     document.all.Slide.src="/books/2/627/1/html/2/Poem1/Slides/" + bstrParam + ".gif" </script> 

VCR Control Mouse Over, Out, and Down Code

The VCR image buttons respond to mouse events similarly to the buttons for the table of contents items. The VCR control images change when the mouse hovers over the image, when it leaves the image area, and when the user clicks one of the VCR images.

The code in Listing 20.4 shows the mouseOver(), mouseOut(), and mouseDown() methods that handle the mouse interaction. One note: browsers before IE 4.0 cannot understand document.all objects.

Listing 20.4 The Mouse Event-Handling Methods for the VCR Control

 function mouseOver( flame ) {  if( IE4 )  {   felEl = eval( "document.all." + flame );   felEl.src="/books/2/627/1/html/2/images/" + flame + "_roll.gif";  }  else  {   felEl = eval( "document." + flame );   felEl.src="/books/2/627/1/html/2/images/" + flame + "_roll.gif";  } } function mouseDown( flame ) {  if( IE4 )  {   felEl = eval( "document.all." + flame );   felEl.src="/books/2/627/1/html/2/images/" + flame + "_down.gif";  }  else  {   felEl = eval( "document." + flame );   felEl.src="/books/2/627/1/html/2/images/" + flame + "_down.gif";  } } function mouseOut( flame ) {  if( IE4 )  {   felEl = eval("document.all." + flame );   felEl.src="/books/2/627/1/html/2/images/" + flame + "_norm.gif";  }  else  {   felEl = eval("document." + flame );   felEl.src="/books/2/627/1/html/2/images/" + flame + "_norm.gif";  } }