The VideoPresentations Architecture

The VideoPresentations Architecture

The VideoPresentations class manages four visible elements in applications. One element is the video window in which the speaker can be seen and heard. Another element is a sequence of slides that reflect the current subtopic. The third element is a list of subtopics (or a table of contents) with which users can navigate to desired subtopics. And last is a VCR-like control with which users can perform operations such as pause and stop. You can see the application window that displays the video presentations in Figure 20.1.

Figure 20.1. The Video Presentations Demo Application

The Video Window

The video window is an embedded instance of the Microsoft Media Player. The Media Player displays the streamed video data. The Windows Media Player is an ActiveX control and is embedded in the HTML code with an <OBJECT> tag.

The <OBJECT> tag supports quite a few parameters, but the VideoPresentations class sets only six of the possible parameters all of the other parameters use the default values. The six parameters can be set with properties of the VideoPresentations class. The parameters that are output to HTML code are FileName, AnimationStart, TransparentAtStart, AutoStart, Volume, and ShowControls. (Refer to Table 20.1 for a complete reference for the VideoPresentations properties.)

In addition to the six parameters, the width and height of the ActiveX control can be set with the PlayerWidth and PlayerHeight properties of the VideoPresentations class. The following code is a typical example of the HTML code for the multimedia player:

[View full width]
 <OBJECT  Name="VideoPlay"   width="320" height="240"   class codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5 ,1,52,701"   standby="Loading Microsoft Windows Media Player components..."   type="application/x-oleobject">  <PARAM NAME="FileName" VALUE="Poem1/video.asx">  <PARAM NAME="AnimationatStart" VALUE="True">  <PARAM NAME="TransparentatStart" VALUE="True">  <PARAM NAME="AutoStart" VALUE="True">  <PARAM NAME="Volume" VALUE="-100">  <PARAM NAME="ShowControls" VALUE="False"> </OBJECT> 

The Subtopic Slides

The subtopic slides for the demo are GIF images that were created with PowerPoint. PowerPoint actually created JPG images that I converted to GIF images. Although converting from JPG to GIF might seem like a waste of time, the multimedia class expects GIF images and not JPG. Before saving the images from PowerPoint, though, you need to remove any animations because animations will give the rendered images layered elements that may not have the appearance that you desire. The main reason that the presentation needs to be saved as HTML is that otherwise everyone will have to have PowerPoint installed to view the slides. The demonstration application contains lines to the poems being read. If you use the VideoPresentations class for a training program, your presentation might contain bullet points summarizing the points that are being discussed in the video feed. If your presentation's purpose is to teach a programming topic, your presentation might contain source code examples.

The HTML uses a <DIV> tag so that the JavaScript can easily change the image source when the time is appropriate. A <DIV> tag allows you to easily change attributes on the fly. The width and height of the image can be set with the ImageWidth and ImageHeight properties of the Video Presentations class. PowerPoint saves slides as images that are 454 pixels wide and 340 pixels high. But setting the ImageWidth and ImageHeight properties to other values will accommodate different sizes. The following HTML code is a typical example of the <DIV> tag:

 <div  Name="Window"  style="text-align:center;z-index:10;padding-top : 20;" >   <img  Name="Slide" src='/books/2/627/1/html/2/Poem1/Slides/M1.gif' border="0"     width="454" height="340"> </div> 

The Table of Contents

To let the user navigate to any subtopic, a list of subtopics is displayed. Each item in the list responds to a mouse click, letting the user navigate to the appropriate subtopic in the video presentation.

The list uses JavaScript to set focus on particular items and to respond to user selections. The following is the HTML for a typical example:

 <a href="#" onclick="GoMarker(1); return false">   <div   onmousedown="TOCmouseDown();"    onmouseout="TOCmouseOut();" onmouseover="TOCmouseOver();">    I Never Saw a Moor   </div> </a> 

The JavaScript in this HTML calls four different methods: GoMarker(), TOCmouseDown(), TOCmouseOut(), and TOCmouseOver(). These four methods are discussed in detail in the section entitled "The Notable JavaScript."

The VCR Control

You can give your users a VCR control with which they can control the progress of the video stream. The control has Stop, Play, Pause, and Seek buttons. The VCR control is made up of individual images (for each VCR command), each of which calls a JavaScript method to perform an action.