The Web is all about modularity, composition and interoperability, and this
applies across the board, from layout and styling defined in \emph{Hypertext
Markup Language (HTML)} to JavaScript-based tools and frameworks.
Unfortunately, there is a notable exception to this rule. Composing
presentations from multiple, timed media components is far from easy. For
example, consider a Web page covering motor sport, using Web
Audio~\cite{webaudio} for sound effects and visuals made from HTML5~\cite{html5} videos, a
map with timed GPS-data, WebGL~\cite{webgl} for timed infographics, a timed
Twitter~\cite{twitter} widget for social integration, and finally an ad-banner
for paid advertisements timed to the race.

In this chapter we focus on media synchronization challenges of this kind,
making multiple, heterogeneous media components operate consistently with
reference to a common timeline, as well as common media control. We call this
\emph{temporal interoperability}. Lack of support for temporal
interoperability represents a significant deviation from the core principles
of the Web. Harnessing the combined powers of timed media components
constitutes a tremendous potential for Web-based media experiences, both in
single-device and multi-device scenarios.

The key to temporal interoperability is finding the right approach to media
synchronization. There are two basic approaches: \emph{internal
timing} or \emph{external timing}. Internal timing
is the familiar approach, where media components are coordinated by
manipulating their control primitives. External timing is the
opposite approach, where media components are explicitly designed to be parts
of a bigger experience, by accepting direction from an external timing source.

Though internal timing is currently the predominant approach in Web-based media, 
external timing is the key to temporal interoperability.
If multiple media components are connected to the same source of external timing,
synchronized behavior across media components follows by implication. This
simplifies media synchronization for application developers. Furthermore,
by allowing external timing sources to be synchronized and shared across a
network, external timing is also a gateway to precise distributed multimedia
playback and orchestration on the Web platform.

This chapter provides an introduction to external timing as well as the
flexible media model and programming model that follow from this approach,
proposed for standardization within the \emph{W3C Multi-device Timing
Community Group (MTCG)}~\cite{mtcg} to encourage temporal interoperability on
the Web platform. The \emph{timing object} is the central concept in this
initiative, defining a common interface to external timing and control for the
Web. The MTCG has published a draft specification for the timing
object~\cite{timingobject} and also maintains
\emph{Timingsrc}~\cite{timingsrc}, an open source JavaScript implementation of
the timing object programming model. The chapter also describes the
\emph{motion model}, which provides online synchronization of timing objects.

The chapter is structured as follows: Section~\ref{sec:mediasync} defines media
synchronization as a term and briefly presents common challenges for
synchronization on the Web. The motion model is presented in
Section~\ref{sec:model} followed by an introduction to temporal interoperability
and external timing in Section~\ref{sec:interoperability}. Section~\ref{sec:web} surveys the abilities and limitations of Web technologies with respect to media synchronization.
Section~\ref{sec:motion} gives a more detailed presentation of the motion model, including online motion synchronization, synchronization of AV media and timed data. Evaluation is presented in Section~\ref{sec:eval}.
Section~\ref{sec:standard} briefly references the standardization initiative before
conclusions are given in Section~\ref{sec:concl}.
