SMIL in HTML

Internet Explorer can run SMIL presentations in HTML files.

Run SMIL Presentations in IE

With Internet Explorer 5.5 or higher versions, you can insert SMIL elements into HTML files.

In this way, any SMIL presentation can run as a standard HTML file on the Internet.

Add a reference

To use SMIL elements in HTML, you must define a "time" namespace for Internet Explorer so that it can recognize these elements. Please do this:

  • Add a namespace definition to the <html> tag
  • Add an <?import> element to import the "time" namespace

To add SMIL attributes to standard HTML elements, you must define a "time" class for Internet Explorer so that it can recognize these attributes. Please do this:

  • Add a <style> element to define a "time" class
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>

In the next section, you can see a complete running example.

Add SMIL Elements

To run SMIL presentations in HTML, just add a prefix and a class attribute to the SMIL elements:

<time:seq repeatCount="indefinite">
  <img class="time" src="image1.jpg" dur="3s" />
  <img class="time" src="image2.jpg" dur="3s" />
</time:seq>

In the above examples, we have added the class="time" to the <img> element and added the "time" prefix to the SMIL element.

Tip:Classes and namespaces do not necessarily have to be called "time". Any name can be used.

An instance of Internet Explorer

<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>
<body>
  <time:seq repeatCount="indefinite">
    <img class="time" src="image1.jpg" dur="3s" />
    <img class="time" src="image2.jpg" dur="3s" />
  </time:seq>
</body>
</html>

Try It Yourself (TIY)