SMIL Sequence
- Previous Page SMIL Timing
- Next Page SMIL Parallel
<seq> - Most Common SMIL Element - Defines a Sequence.
Sequence Element <seq>
The <seq> element defines a sequence. The child elements of the <seq> element are displayed in sequence.
You can use the <seq> element to define a list of images to be displayed, a list of paragraphs, a list of videos, or any other elements.
The <seq> element has many attributes, the most commonly used attributes are:
Attribute | Value | Description |
---|---|---|
begin | time | The delay before the element is displayed. |
dur | time | Set the duration to display. |
repeatCount | number | Set the number of repetitions to display. |
For a complete list of SMIL elements and attributes, please visit CodeW3C.com SMIL Reference Manual.
Example: Display Image Sequence
<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.t {behavior: url(#default#time2)}</style> </head> <body> <t:seq repeatCount="indefinite"> <img class="t" src="image1.jpg" dur="1s" /> <img class="t" src="image2.jpg" dur="1s" /> </t:seq> </body> </html>
Example: Display Text Sequence
<html xmlns:t="urn:schemas-microsoft-com:time"> <head> <?import namespace="t" implementation="#default#time2"> <style>.t {behavior: url(#default#time2)}</style> </head> <body> <t:seq repeatCount="indefinite"> <h2 class="t" dur="1s"> I will display for one second</h2> <h2 class="t" dur="2s"> I will display for two seconds</h2> <h2 class="t" dur="3s"> I will display for three seconds</h2> </t:seq> </body> </html>
- Previous Page SMIL Timing
- Next Page SMIL Parallel