"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>