Accessible Publishing Knowledge Base

Media Overlays Overview

The EPUB 3.0 Media Overlays specification defines a profile of the SMIL grammar for synchronizing text rendering with audio playback.

Media Overlays documents are built using the following elements:

Element Use
smil The smil element is the root element of each Media Overlay, and contains an optional head and required body element
head The head element may contain metadata in an optional metadata element, but none is required by the EPUB 3 specification
metadata The metadata element is an extension element that allows metadata from foreign namespaces to be included in the overlay
body The body element defines playback through the order of seq and par elements it contains
seq The seq element is used to structure an overlay. It is used to represent complex structures such as sections, tables and lists that a user may want to skip or escape from
par The par element defines a synchronization point in its child text and/or audio elements
text The text element identifies the content document and element to synchronize visual rendering to
audio The audio element identifies the audio file and optional start and end points for playback

In order to synchronize a publication, each content document in a publication must have its own overlay associated with it. Overlays are tied to content documents in the package document manifest using a media-overlay attribute with the ID of the item that defines the overlay.

Examples

Example 1 — A basic overlay document

The following example shows an overlay document for a chapter that consists of only a heading and two paragraphs.

<smil xmlns="http://www.w3.org/ns/SMIL"
	  xmlns:epub="http://www.idpf.org/2007/ops"
	  version="3.0">
   <body>
	  <seq
		   epub:textref="chapter_001.xhtml"
		   epub:type="bodymatter chapter">
	  
		 <par>
			<text src="chapter_001.xhtml#c01h01"/>
			<audio
				   src="audio/c01.mp4"
				   clipBegin="0:00:00.000" 
				   clipEnd="0:00:05.250"/>
		 </par>
		 
		 <par>
			<text src="chapter_001.xhtml#c01p0001"/>
			<audio
				   src="audio/c01.mp4"
				   clipBegin="0:00:05.250"
				   clipEnd="0:00:58.100"/>
		 </par>
		 
		 <par>
			<text src="chapter_001.xhtml#c01p0002"/>
			<audio
				   src="audio/c01.mp4"
				   clipBegin="0:00:58.100"
				   clipEnd="0:02:04.000"/>
		 </par>
	  </seq>
   </body>
</smil>
Example 2 — Linking a chapter document to its overlay
<item id="xchapter_001"
	  href="chapter_001.xhtml"
	  media-type="application/xhtml+xml"
	  media-overlay="chapter_001_overlay"/>

<item id="chapter_001_overlay"
	  href="chapter_001_overlay.smil"
	  media-type="application/smil+xml"/>

Samples

The EPUB Samples Project contains the following publications that implement Media Overlays:

References