SmilText that is embedded within an HTML file should be placed within <smilText> tags, such as:
<div id="region01" style="background-color:red;width:500"> <smilText textColor="green"> This is an example of content in merry holiday colors. <tev begin="2s"></tev> This second sentence comes shortly after the first, based on an absolute offset. <tev next="3s"></tev> This third sentence get rendered three seconds after the previous, based on a relative offset. <clear begin="7s"></clear> Here we clear the rendering area, seven seconds into the presentation. <tev next="3s"></tev> Doei! </smilText> </div> <script> var docs = cwi.smilText.Parser.parseHTML(); docs.play(); </script>
(Note that this functionality is NOT supported by Internet Explorer, but it is possible in Firefox, Opera and Safari.)
External smilText format
The format of an external <smilText> fragment is shown below:
<smilText xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="smilText"> The is a bit of text. <tev begin="3s"/> Here, the line is continued after 3 seconds. <clear begin="2s"/> At 5 seconds into the text, the area is cleared and a new fragment starts. <clear begin="3s"/> </smilText>
A smilText object placed in an external file should have its path placed in the HTML source text as follows:
<div id="region02"> <script> var doc1 = cwi.smilText.Parser.parseFile('examples/example18.xml', 'region2'); doc1.play(); </script> </div>
(Note that this functionality is NOT supported by Safari, but it is possible in Firefox, Opera and IE7+.)
External smilText samples
Ten very techie pages illustrate a host of browser-embedded smilText examples. Note that some pages have many simultaneous smilText fragments active at once. Consider them eye tests for your mind. The samples are:
- A set of simple external smilText file examples, including links to the sources.
- A set of structured external smilText file examples, including links to the sources.
- A set of motion-based embedded smilText file examples, including links to the sources.
- A set of browser-specific tests for Firefox, IE-7, Opera and Safari, all including links to the sources.
- This demonstrator shows how smilText JS can caption a YouTube video (NOT supported by Safari).
- This example shows how event listeners can be associated to the presentation of a smilText document.
- This example shows how to create smilText documents on the fly.
For more information on composing a timed text file using smilText, see the chapter on smilText, taken from the book SMIL 3.0: Interactive Multimedia for the Web, Mobile Devices and Daisy Talking Books.