http://cdramuneer.blogspot.se/2013/01/html5-and-timed-media-playback.html

2. HTML5 is the latest version of HTML
markup language for Open web Platform.
This paper presents the general
introduction into the capabilities,
specifications and standardization of
HTML5 and discusses its API for Timed
Media Playback. Moreover Use of OGG
formats and its controversy is also
discussed.

3. Improved markup
Web Applications
Interoperability
Reduced
Complexity(Flash
, CSS,
JavaScript)
HTML
(Hypertext,
Forms)

4.  HTML5will supersede HTML4, XHTML1 and
DOM2 HTML
1991 HTML came into existence
1995 HTML extended to HTML 3.0
1997 HTML 3.2 Completed
1998 HTML4
1999 HTML 4.01
2003 Work on HTML5 started

5.  Many APIs are now
• Infrastructure separate
Specs also includes:
Specification includes
• Semantics
• Microdata specifications.
• Structure
• APIs • Web workers  Some APIs are now
• Elements available as
• Web Storage extensions.
• Loading Web
Pages
• Communicati
• Web Application
on APIs.  Backward
API
compatibility in
• User Interaction
which browsers
• Syntax of HTML
handle deployed
and XHTML. content.

6. Compatible with HTML4 and XHTML1.
Presentational elements dropped
HTML4 was based on SGML.
Character encoding is simplified over HTML4.
Allows MathML and SVG elements.

7. New Changed Obsolete
• Elements • Attributes • A number of
and made global elements
Attributes. • Modified and
• Tags. meanings of attributes
• Video, audio elements are now
and track obsolete
elements.
• Embed tag
• Events and
their
attributes

8. Heading Phrasing
Flow
Embedded
Sectioning
Metadata
Content Interactive
Categories

9. Graphics Media GeoLocation
New, Extended,
Web Local Web
Changed and Applications Storage Workers
Deprecated APIs.
Speech
Editing Drag & Drop
Input
API for Timed Media Cross
Playback is discussed document
Media
Capture
History
Management
Messaging
in detail.
Timed
callback Microdata
Scheduling

10. • Mechanisms to • Develop highly • Part of markup.
draw, animate animated • Media element
and scale graphics. API
graphics.
Video and
SVG Canvas API
Audio
• Resulted in • Application • Running
Location enabled Cache and JavaScript in
browsers. databases background even
• Allows offline in different
web content contexts.
access.
GeoLocation Web Storage Web
API Technology Workers

11. data files
of video
Timed chapter
audio
streams
media is
very Media
dynamic
and offers Files
many
Meta captions
challenges
to tackle
with. synchron
ization

12. Before HTML5  It was FLASH
HTML5 includes special tags for supporting audio and video and
bunch of interfaces for scripting.
Formats: H.264, OGG and WebM
Media Elements include audio and video elements which can be
used to play audio/video.
Track element allows specifying text tracks for media element.
Source Element allows authors to specify source for the media
element.

13. • Top level interface for scripting audio/video
HTML5 • Used to Play, Pause and Control media
Media element
Element • Provides attributes and methods for Media
Interface Controller, Controls, Tracks, error state,
network state, ready state etc
•src, preload, autoplay, mediagroup, loop, muted and controls (common to
all media elements)
•Allow to specify a media resource
•Check if the MIME type is supported
Attributes •Determine the current network activity of media element
•Allow metadata to load as playback begins
•Determine the time range of currently buffered data
•Check if playback is paused, or reached at end, playback rate, played time
range
•Automatically begin playback of the media resource etc.

14. MediaError Interface
• contains error codes for the media element.
AudioTrackList/VideoTrackList Interface
• represents a dynamic list of zero or more audio/video tracks represented by
AudioTrack/VideoTrack object.
AudioTrack/VideoTrack Interface
• represents a specific audio/video track in the resource having id, kind,
language, label and state associated with it.
MediaController Interface
• Attributes similar to that provided by media element but in this case it applies
to multiple media elements.
TimeRanges Interface
• provides list of time ranges with start and end times.
TrackEvent Interface
• allows obtaining a track object related to the specific event.

15. Media Timeline
• Specified by media resource to map its
time in seconds to position in the resource.
Ready State
• Describes to what degree a media resource
is ready to be rendered at the current
playback position.

16. Sets
playback Reset
position to Attributes
zero
Stop
resource
selection Start
algorithm Reset resource
flags selection
algorithm.
Unregister any
pending task Check
network
state

17. Start
Resource
Resolves Fetch
the URL algorithm
Checks
source
specified

18. Handles abort Aborts overall
Clears previous
initiated by the resource selection
text tracks
user algorithm.
Fetches the media
Start playback.
data
Establishes the
Creates relevant
timeline and
object
playback positions
(videoTrack/audioT
once enough data
rack)
has been fetched

19. Media element API provides the play method to
invoked on media element.
Play method then invokes resource selection
algorithm or invoke seek or trigger relevant event
depending upon the state of media element.
It also provides pause method which pauses the
media element.

20. Seeking attribute shows if the
browser is currently seeking.
• Browser sets time offsets
Seeking using seekable attribute that
Algorithm: gives current seekable range
• Triggers relevant events .

21.  A media resource can contain multiple components
such as video, audio, dubbed dialogs, sign language
overlays, commentaries, descriptions.
 Media Controller
 Used to coordinate playback of multiple media tracks
 Created when multiple media elements are grouped
 Slaves uses same clock.
 Three playback states i.e. waiting, playing or ended.
 When Controller object is created it is in waiting state.
 Controller has its own timeline and duration. Each slaved
media elements resources are temporally aligned
according to their defined offsets (their relative offsets
which are the difference between their timeline offsets).
 A play method invoked on controller invokes the play
method of each slaved element.
 For every new playback position media controller is
required to seek and thus is every slaved media element.

22. A text track consists of kind, label, inband
metadata track dispatch type, language,
readiness state, mode and a list of cues.
 Represented by a TextTrack object.
 Browser is responsible for
 populating the pending text track list of the
media element.
 to run the steps to expose a media resource
specific text track.

23.  Control attribute of a media element if true
specifies that author wants browser to
incorporate controls to play, pause, seek,
volume change, caption display, resize,
select audio track etc.
 Example: When volume is changed browser
fires a volume change event on media
element which then determines the effective
media volume and so on.

24. Will HTML5 Media Element API
replace
FLASH..?

25.  2007  Working group formed
 January 2008  First working draft
 October 2009  Last Call by WHATWG
 December 2009  Un-versioned development
Model
 January 2011  HTML5 renamed as HTML,
Living Standard declared by WHATWG
 May 2011  Last Call by W3C
 May 2012  Latest Working Draft
 2014  (Expected) Release of HTML5
Standard

26.  Recent Activities
 RDFa Core 1.1
 XHTML + RDFa 1.1
 RDFa Lite 1.1
Last activity before this update was on 23rd
November 2010

27.  HTML5 was officially recognized in May 2007
 Use Ogg Codecs
 Opposition by many entities including Nokia
and Apple
 Supported by Mozilla and Opera
 June 2009, presentation tags removed,
media and canvas elements introduced
 Google’s Role
 Microsoft’s Role
 Current Situation

28.  HTML5 is open
 Uses well understood and well supported
technologies
 Open Source Libraries, Debugging Tools and
Developer communities
 HTML 5 is still a draft.
 Expected to complete and become a
recommendation by 2014.