Accessible SMIL Templates

SMIL offers developers of rich media the ability to incorporate a variety of elements, including ones that help make rich media presentations accessible to people with visual or auditory impairments. This page offers templates for SMIL presentations. Feel free to copy and paste any template for your own use.

SMIL 1.0
QuickTime SMIL 1.0
SMIL 2.0

SMIL 1.0 Templates

Video with caption area underneath.

<smil>

<head>
   <layout>
     <root-layout background-color="black" height="266" width="320"/>
     <region id="video" background-color="black" top="26" left="0" height="144" width="320"/>
     <region id="captions" background-color="black" top="186" height="80" left="0" width="320"/>
   </layout>
</head>

<body>	
   <par>
   		<textstream src="captions.rt" region="captions" system-captions="on" title="captions"/>
   		<video src="movie.rm" begin="00:00.0" region="video" title="video"/>
   </par>	  
</body>

</smil>

Video with captions and audio descriptions.

<smil>

<head>
   <layout>
     <root-layout background-color="black" height="266" width="320"/>
     <region id="video" background-color="black" top="26" left="0" height="144" width="320"/>
     <region id="captions" background-color="black" top="186" height="80" left="0" width="320"/>
   </layout>
</head>

<body>	
   <par>
   		<textstream src="captions.rt" region="captions" system-captions="on" title="captions"/>
   		<video src="movie.rm" region="video" title="video"/>
		<audio src="audiodesc.rm" title="audio descriptions" />
   </par>	  
</body>

</smil>

Video with captions and multiple language options for program audio and audio descriptions.

<smil>
 <head>
		<meta name="title" content="yourtitle"/>
		<meta name="author" content="yourname"/>
		<meta name="copyright" content="2001 yourname" />
  <layout>
   <root-layout background-color="black" height="180" width="250"/>
   <region id="videoregion" background-color="black" top="5" left="35" height="130" width="180"/>
   <region id="textregion" top="135" left="-37" height="120" width="250"/>
   </layout>
 </head>

    <body>

     <par>

<!-- VIDEO -->
 
     <video src="carsilent.rm" region="videoregion"/>

<!-- PROGRAM AUDIO -->

     <switch>
       <audio src="carnarde.rm" system-language="de"/>
       <audio src="carnarren.rm"/>
     </switch>

<!-- AUDIO DESCRIPTIONS -->

     <switch>
       <audio src="cardescde.rm" system-language="de"/>
       <audio src="cardescen.rm"/>
     </switch>

<!-- CAPTIONS -->

     <switch>
       <textstream src="carcapsde.rt" region="textregion" system-language="de" system-captions="on"/>
       <textstream src="carcapsen.rt" region="textregion" system-captions="on"/>
     </switch>

    </par>

   </body>
</smil>

QuickTime SMIL 1.0 Templates

Video with caption area underneath.

<smil xmlns:qt="http://www.apple.com/quicktime/resources/smilextensions">

<head>
   <layout>
     <root-layout background-color="black" height="266" width="320"/>
     <region id="video" background-color="black" top="26" left="0" height="144" width="320"/>
     <region id="captions" background-color="black" top="186" height="80" left="0" width="320"/>
   </layout>
</head>

<body>	
   <par>
   		<textstream src="captions.txt" region="captions" system-captions="on" title="captions"/>
   		<video src="movie.mov" begin="00:00.0" region="video" title="video"/>
   </par>	  
</body>

</smil>

SMIL 2.0 Templates

Video with captions.

<smil>

<head>
   <layout>
     <root-layout backgroundColor="black" height="266" width="320"/>
     <region id="video" backgroundColor="black" top="26" left="0" height="144" width="320"/>
     <region id="captions" backgroundColor="black" top="186" height="80" left="0" width="320"/>
   </layout>
</head>

<body>	
  <par>
	<textstream src="captions.rt" region="captions" systemCaptions="on" title="captions"/>
	<video src="movie.rm" region="video" title="video"/>
  </par>
</body>

</smil>

Video with extended audio descriptions and captions.

<smil>

<head>
   <layout>
     <root-layout backgroundColor="black" height="266" width="320"/>
     <region id="video" backgroundColor="black" top="26" left="0" height="144" width="320"/>
     <region id="captions" backgroundColor="black" top="186" height="80" left="0" width="320"/>
   </layout>
</head>

<body>	
   <excl>
		<priorityClass peers="pause">
		  <par>
   			<textstream src="captions.rt" region="captions" systemCaptions="on" title="captions"/>
   			<video src="movie.rm" region="video" title="video"/>
   	 	  </par>
   	 	  <audio src="desc1.rm" begin="12.85s"/>
  		  <audio src="desc2.rm" begin="33.71s"/>
		  <audio src="desc3.rm" begin="42.65s"/>
		  <audio src="desc4.rm" begin="59.80s"/>	 
		</priorityClass>
	</excl>	
   
</body>

</smil>

Video with both extended and non-extended audio descriptions and captions.

<smil>

<head>
   <layout>
     <root-layout backgroundColor="black" height="266" width="320"/>
     <region id="video" backgroundColor="black" top="26" left="0" height="144" width="320"/>
     <region id="captions" backgroundColor="black" top="186" height="80" left="0" width="320"/>
   </layout>
</head>

<body>	
   <par>
   	  <audio src="desc2.rm" begin="33.71s"/>
   	  <excl>
		<priorityClass peers="pause">
		  <par>
   			<textstream src="captions.rt" region="captions" systemCaptions="on" title="captions"/>
   			<video src="movie.rm" region="video" title="video"/>
   	 	  </par>
   	 	  <audio src="desc1.rm" begin="12.85s"/>
		  <audio src="desc3.rm" begin="42.65s"/>
		  <audio src="desc4.rm" begin="59.80s"/>	 
		</priorityClass>
	  </excl>	
   
</body>

</smil>