"Synchronized Multimedia on the Web" by Larry Bouthillier Web Techniques, September 1998 Web Techniques grants permission to use these listings (and code) for private or commercial use provided that credit to Web Techniques and the author is maintained within the comments of the source. For questions, contact editors@web-techniques.com. NOTE: Remove line numbers! [LISTING ONE] 1 <smil> 2 <head> 3 <layout> 4 <root-layout height="425" 5 width="450" 6 background-color="black"/> 7 8 <region id="title" 9 left="50" 10 top="150" 11 width="350" 12 height="200"/> 13 14 <region id="full" 15 left="0" 16 top="0" 17 height="425" 18 width="450" 19 background-color="#602030"/> 20 21 <region id="video" 22 left="200" 23 top="200" 24 height="180" 25 width="240" 26 z-index="1"/> 27 </layout> 28 </head> 29 30 <body> 30 <seq> 31 <!-- This img tag displays the title screen --> 32 <text src="title.rt" 33 type="text/html" 34 region="title" 35 dur="20s"/> 36 <!-- This section displays the animated map with an audio soundtrack --> 37 <par> 38 <audio src="map_narration.ra"/> 39 <img src="map.rp" 40 region="full" 41 fill="freeze"/> 42 </par> 43 <!-- This section contains the video-annotated slideshow --> 44 <par> 45 <img src="slideshow.rp" 46 region="full" 47 fill="freeze"/> 48 <seq> 49 <video src="slide_narration_video1.rm" 50 region="video"/> 51 <audio src="slide_narration_audio1.ra"/> 52 <video src="slide_narration_video2.rm" 53 region="video"/> 54 </seq> 55 </par> 56 </seq> 57 </body> 58 </smil> [LISTING TWO] 1 <imfl> 2 <head duration="00:47" 3 width="450" 4 height="425" 5 bitrate="13500" 6 preroll="00:20" 7 aspect="true" 8 timeformat="dd:hh:mm:ss.xyz"/> 9 10 <image handle="1" name="topo.jpg"/> 11 <image handle="2" name="whole_map.jpg"/> 12 <image handle="3" name="detailmap.jpg"/> 13 <image handle="4" name="detailmap_road.jpg"/> 14 <image handle="5" name="lathrop_topo.jpg"/> 15 16 <fadein start="00:01" 17 duration="00:02" 18 target="1"/> 19 <crossfade start="00:06" 20 duration="00:15" 21 target="2"/> 22 <viewchange target="2" 23 start="00:25" 24 duration="00:05" 25 srcx="290" 26 srcy="139" 27 srcw="98" 28 srch="95"/> 29 <crossfade start="00:30" 30 duration="00:02" 30 target="3"/> 31 <wipe target="4" 32 start="00:32" 33 duration="00:08" 34 srch="195" 35 dsth="195" 36 type="normal" 37 direction="down"/> 38 <crossfade start="00:42" 39 duration="00:04" 40 target="5"/> 41 </imfl> [LISTING THREE] 1 <smil> 2 <head> 3 <layout> 4 <root-layout height="425" 5 width="625" 6 background-color="black"/> 7 8 <region id="title" 9 left="50" 10 top="150" 11 width="350" 12 height="200"/> 13 14 <region id="full" 15 left="0" 16 top="0" 17 height="425" 18 width="450" 19 background-color="#602030"/> 20 21 <region id="video" 22 left="200" 23 top="200" 24 height="180" 25 width="240" 26 z-index="1"/> 27 28 <region id="toc" 29 left="450" 30 top="0" 31 height="425" 32 width="175"/> 33 </layout> 34 </head> 35 36 <body> 37 <par> 38 <text src="toc.rt" 39 region="toc"/> 40 <seq> 41 <!- This img tag displays the title screen -> 42 <text src="title.rt" 43 type="text/html" 44 region="title" 45 dur="20s"/> 46 <!- This section displays the interactive map with an audio soundtrack -> 47 <par> 48 <audio src="map_narration.ra"/> 49 <img src="map.rp" 50 region="full" 51 fill="freeze"/> 52 </par> 53 <!- This section contains the video-annotated slideshow -> 54 <par> 55 <img src="background.rp" 56 region="full" 57 fill="freeze"/> 58 <seq> 59 <video src="slide_narration_video1.rm" 60 region="video"/> 61 <audio src="slide_narration_audio1.ra"/> 62 <video src="slide_narration_video2.rm" 63 region="video"/> 64 </seq> 65 </par> 66 </seq> 67 </par> 68 </body> 69 </smil> [LISTING FOUR] 1 <WINDOW TYPE=generic 2 duration="3:00.0" 3 scrollrate=0 4 height=425 5 width=175 6 BGCOLOR="#602030" 7 link="#DDBBBB" 8 LOOP=true> 9 10 <font size="4" color="white" face="times"><pos y="10"/> 11 <I>What I did last summer...</I><P> 12 13 <b> Table of Contents</b></font> 14 <BR/><BR/> 15 16 <time begin ="00:00"/> 17 <font size="3" color="white" face="times"> 18 <a href="command:seek(00:00)" target="_player">Title Sequence</a> 19 </font><BR/> 20 21 <time begin="00:20"/> 22 <font size="3" color="white" face="times"> 23 <a href="command:seek(00:20)" target="_player">Map animation</a> 24 </font><BR/> 25 26 <time begin="01:15"/> 27 <font size="3" color="white" face="times"> 28 <a href="command:seek(01:15)" target="_player">Video Interview</a> 29 </font><BR/><BR/><BR/> 30 30 <font size="4" color="white" face="times"> 31 Further References<BR/><BR/> 32 </font> 33 34 <font size="2" color="white" face="times"> 35 <a href="nextyear.smi" target="_player"><I>What I'll do next summer...</i></a> 36 <BR/><BR/> 37 <a href="http://www.nps.gov"><I>National Park Service</i></a> 38 </font> 39 </WINDOW> [EXAMPLE ONE] 1 <par> 2 <switch> 3 <img src="slideshow_hires.rp" region="full" fill="freeze" system-bitrate="45000"/> 4 <img src="slideshow_lowres.rp" region="full" fill="freeze" system-bitrate="20000"/> 5 </switch> 6 <audio src="video_narration.ra"/> 7 </par>