SMIL in HTML

Internet Explorer kann SMIL-Präsentationen in HTML-Dateien ausführen.

SMIL-Präsentationen im IE ausführen

Mit Internet Explorer 5.5 oder höher können SMIL-Elemente in HTML-Dateien eingefügt werden.

Auf diese Weise kann jede SMIL-Präsentation als Standard-HTML-Datei im Internet ausgeführt werden.

Fügen Sie eine Referenz hinzu

Um SMIL-Elemente in HTML zu verwenden, müssen Sie für Internet Explorer einen Namensraum "time" definieren, damit diese Elemente erkannt werden können. Tun Sie dies wie folgt:

  • Fügen Sie der <html>-Marke eine Namensraumdefinition hinzu
  • Fügen Sie ein <?import>-Element hinzu, um den Namensraum "time" zu importieren

Um SMIL-Attribute an Standard-HTML-Elemente hinzuzufügen, müssen Sie für Internet Explorer die Klasse "time" definieren, damit diese Attribute erkannt werden können. Tun Sie dies wie folgt:

  • Fügen Sie ein <style>-Element hinzu, um die Klasse "time" zu definieren
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>

Im nächsten Abschnitt können Sie ein vollständiges Beispiel sehen.

Fügen Sie SMIL-Elemente hinzu

Um SMIL-Präsentationen in HTML auszuführen, müssen Sie nur einem SMIL-Element einen Präfix und eine Class-Attribut hinzufügen:

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

In den obigen Beispielen haben wir der <img>-Elemente die Klasse "time" hinzugefügt und den SMIL-Elementen den Präfix "time" hinzugefügt.

Hinweis:Klassen und Namespaces müssen nicht unbedingt "time" heißen. Jeder Name ist möglich.

Ein Beispiel für 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>

TIY