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 reader 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 id="id1"
           epub:textref="chapter_001.xhtml"
           epub:type="bodymatter chapter">
      
         <par id="heading1">
            <text src="chapter_001.xhtml#c01h01"/>
            <audio
                   src="audio/c01.mp4"
                   clipBegin="0:00:00.000" 
                   clipEnd="0:00:05.250"/>
         </par>
         
         <par id="para1">
            <text src="chapter_001.xhtml#c01p0001"/>
            <audio
                   src="audio/c01.mp4"
                   clipBegin="0:00:05.250"
                   clipEnd="0:00:58.100"/>
         </par>
         
         <par id="para2">
            <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:

Moby Dick