SMIL in HTML

Ang Internet Explorer ay makakapagpatakbuhin ang SMIL pagtatampok sa file na HTML.

Patakbuhin ang SMIL pagtatampok sa IE

Sa pamamagitan ng Internet Explorer 5.5 o mas mataas na bersyon, magagamit ang pagidagdag ng SMIL element sa file na HTML.

Sa ganitong paraan, ang anumang pagtatampok na SMIL ay maaaring patakbuhin bilang isang standard na file na HTML sa internet.

Magdagdag ng sanggunian

Kung gusto mong gamitin ang SMIL element sa HTML, dapat mong ilalarawan ang isang "time" namespace para sa Internet Explorer upang makilala ang mga element na ito. Gawin ito sa ganito:

  • Magdagdag ng paglalarawan ng namespace sa <html> tag
  • Magdagdag ng isang <?import> element upang maimportahin ang "time" namespace

Kung gusto mong idagdag ng SMIL attribute sa mga standard na HTML element, dapat mong ilalarawan ang klase "time" para sa Internet Explorer upang makilala ang mga attribute na ito. Gawin ito sa ganito:

  • Magdagdag ng isang <style> element na naglalarawan ng klase "time"
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>

Sa susunod na talataan, makikita ninyo ang kumpletong halimbawa ng pagpatakbo.

Magdagdag ng SMIL Element

Para mapataas ang pagpapakita ng SMIL sa HTML, magdagdag lamang ng isang prefix at isang class attribute sa SMIL element:

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

Sa mga halimbawa sa itaas, nagdagdag kami ng class="time" sa <img> element at ng "time" prefix sa SMIL element.

Mga Tipan:Ang klase at ang namespace ay hindi dapat na pangalanin "time". Anumang pangalan ay pwedeng gamitin.

Isang instance ng 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)