Smile

SMIL Tutorial

SMIL Tutorial for

SMIL Tutorial for XHTML

The code below shows the HTML code that will utilise the <embed> tag along with the <object> tag together. This will display well in Internet Explorer and possibly play in Netscape type Browsers with the correct plug-ins and control attributes in the <embed> tag. If you notice there is a specific classid attribute that specifies using the Real Player for viewing.

<html >
<head >
<title >Forest ,Forest in British Columbia,British Columbia Forest,Prince George,Walk in the Forest,Hiking,Woods,SMIL Forest,SMIL </title >
<meta name="keywords" content="SMIL,Slideshow,Prince George Forest Region,Forest,Hiking,Woods,Walk,Photo." / >
<meta name="description" content="A walk in the Forest,SMIL slideshow of pictures taken in the Prince George Forest Region." / >
<meta name="LOCATION" content="Prince George, British Columbia, Canada" / >
<meta name="ROBOTS" content="ALL" / >
<meta name="copyright" content=" copyright 2003 Sean Ginter" / >;
<style type="text/css" >
<!--
body{
background-color: #2F4F4F;
}
table{
cursor: crosshair;
border-width: thin;
}
h1{
color: #A52A2A;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: bold;
font-stretch: semi-expanded;
}
.time{
color: #f8f8ff;
font-family: "Courier New", Courier, monospace;
font-size: large;
font-weight: bold;
text-align: center;
}
h2{
color: #f8f8ff;
font-family: "Courier New", Courier, monospace;
font-size: large;
font-weight: bold;
text-align: center;
}
.c{
text-align: center;
}
a:link{
color: #D02090;
font-family: "Courier New", Courier, monospace;
font-size: medium;
font-weight: bold;
}
a:visited{
color: #99FFFF;
font-family: "Courier New", Courier, monospace;
font-size: medium;
font-weight: bold;
}
a:hover{
color: #993300;
font-family: "Courier New", Courier, monospace;
font-size: medium;
font-weight: bold;
}
a:active{
color: #993366;
font-family: "Courier New", Courier, monospace;
font-size: medium;
font-weight: bold;
}
h3{
font-family: "Courier New", Courier, monospace;
font-size: medium;
font-weight: bold;
text-align: center;
}
-- >
</style >
</head >
<body text="FFD700" >
<h1 >A WALK IN THE FOREST </h1 >
<table align="center" border="0" >
<tr >
<td align="center" >

<object id="RVOCX" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="640" height="350" >
<param name="SRC" value="http://www.oocities.org/seang64/swamp/for.smil" / >
<param name="CONTROLS" value="ImageWindow" / >
<param name="CONSOLE" value="one" / >
<param name="CONTROLS" value="PlayOnlyButton" / >
<param name="AUTOSTART" value="true" / >
<embed src="//www.oocities.org/seang64/swamp/for.smill" width="640" height="350" nojava="true" controls="ImageWindow" consol="one" / >
</object >

</td >
</tr >
</table >
</body >
</html >

In this example the In-line CSS is left in to show one of the other necessities of cross browser compatibility. The CSS is also linked out with the <link> tag in the head section of the document. The <object > tag also contains the <param> tag. This controls the properties of the Player or viewer being used for the presentation. The <embed > tag uses attributes for similar results. It is not necessary to include the <embed > in the document if you are designing for Internet Explorer and not any of the Netscape Browsers.
Using the <embed > tag also invalidates a XHTML document.But it is valid for older specifications of HTML.
Here are some links to examples.

This is the working example for Internet Explorer with the RealPlayer.
This is the SMIL file being used for the above demonstration.
Here is a cross browser example using the Soja Player using the applet element.
This is the best working example so far for Internet Explorer and Netscape Browsers.

First page of the tutorial.

Previous page of the tutorial.

Contents