Overview

EPUB 3 defines an implementation of synchronized media known as Media Overlays. This 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:

Related Links