EPUB Media Overlays

Introduction

This tutorial will teach you how to add support for playback of EPUB Media Overlays . You will create a SyncMediaTimeline from an EpubReaderPublication that has embedded Media Overlays, create a SyncMediaPlayer using the timeline instance, and create a GUI to manage playback etc.

Audience

Developer who knows Typescript and some basic HTML and CSS.

Prerequisites

This tutorial builds upon the app that was created in the Basic Navigation tutorial.

Not included in this tutorial

Playback of formats other than EPUB Media Overlays.

Code for this tutorial

This tutorial is available as source code only. The code for this tutorial is available in the Web framework tutorial repository.

In order to set up the developer environment including where to put your credentials, please follow the steps described in Set up tutorial environment.

Concepts

ReaderView

Handles rendering and navigation.

SyncMediaTimeline

A SyncMediaTimeline instance is a highlevel representation of the following audio timelines for TTS, Media Overlays and W3C Audiobooks. Each publication format supports different sync media formats. EPUB supports Media Overlays as well as content block based TTS, whereas PDF only supports content block based TTS. A SyncMediaTimeline is created by calling any of the createSyncMediaTimeline() methods on a ReaderPublication.

SyncMediaPlayer

Used for playing synchronized media such as EPUB Media Overlays or TTS (Text-To-Speech), but also for playing W3C Audiobooks. The SyncMediaPlayer coordinates the playback of a SyncMediaTimeline and exposes methods for controlling playback, such as play/pause/seek.