SMIL dans HTML

Internet Explorer peut exécuter des présentations SMIL dans des fichiers HTML.

Exécuter une présentation SMIL dans IE

Avec Internet Explorer 5.5 ou une version supérieure, vous pouvez insérer des éléments SMIL dans un fichier HTML.

De cette manière, toute présentation SMIL peut être exécutée sur un fichier HTML standard sur Internet.

Ajouter une référence

Pour utiliser des éléments SMIL dans HTML, vous devez définir un espace de noms "time" pour Internet Explorer afin de pouvoir reconnaître ces éléments. Faites ainsi :

  • Ajouter une définition d'espace de noms à l'étiquette <html>
  • Ajouter un élément <?import> pour importer l'espace de noms "time"

Pour ajouter des attributs SMIL à des éléments HTML standards, vous devez définir une classe "time" pour Internet Explorer afin de pouvoir reconnaître ces attributs. Faites ainsi :

  • Ajouter un élément <style> définissant la classe "time"
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>

Dans le paragraphe suivant, vous pouvez voir un exemple complet de exécution.

Ajouter un élément SMIL

Pour exécuter des présentations SMIL dans HTML, il suffit d'ajouter un préfixe et une propriété class à l'élément SMIL :

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

Dans l'exemple ci-dessus, nous avons ajouté la classe "time" aux éléments <img> et le préfixe "time" aux éléments SMIL.

Astuce :Les classes et les espaces de noms n'ont pas nécessairement besoin d'être appelés "time". Toute autre appellation est possible.

Un exemple d'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