HTML5 and Timed Media Playback

Uploaded on

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. HTML5 is the latest version of HTMLmarkup language for Open web Platform.This paper presents the generalintroduction into the capabilities,specifications and standardization ofHTML5 and discusses its API for TimedMedia Playback. Moreover Use of OGGformats and its controversy is alsodiscussed.
  • 2. Improved markupWeb ApplicationsInteroperability ReducedComplexity(Flash , CSS, JavaScript) HTML (Hypertext, Forms)
  • 3.  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
  • 4.  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.
  • 5. Compatible with HTML4 and XHTML1.Presentational elements droppedHTML4 was based on SGML.Character encoding is simplified over HTML4.Allows MathML and SVG elements.
  • 6. 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
  • 7. Heading Phrasing Flow Embedded SectioningMetadata Content Interactive Categories
  • 8. Graphics Media GeoLocationNew, Extended, Web Local WebChanged and Applications Storage WorkersDeprecated APIs. Speech Editing Drag & Drop InputAPI for Timed Media CrossPlayback is discussed document Media Capture History Management Messagingin detail. Timed callback Microdata Scheduling
  • 9. • Mechanisms to • Develop highly • Part of markup. draw, animate animated • Media element and scale graphics. API graphics. Video andSVG 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 WebAPI Technology Workers
  • 10. data files of videoTimed chapter audio streamsmedia isvery Mediadynamicand offers Filesmany Meta captionschallengesto tacklewith. synchron ization
  • 11. Before HTML5  It was FLASHHTML5 includes special tags for supporting audio and video andbunch of interfaces for scripting.Formats: H.264, OGG and WebMMedia Elements include audio and video elements which can beused to play audio/video.Track element allows specifying text tracks for media element.Source Element allows authors to specify source for the mediaelement.
  • 12. • Top level interface for scripting audio/video HTML5 • Used to Play, Pause and Control media Media element Element • Provides attributes and methods for MediaInterface 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 supportedAttributes •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.
  • 13. 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.
  • 14. 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.
  • 15. Sets playback Reset position to Attributes zero Stop resource selection Start algorithm Reset resource flags selection algorithm.Unregister any pending task Check network state
  • 16. Start Resource Resolves Fetch the URL algorithmCheckssourcespecified
  • 17. 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
  • 18. Media element API provides the play method toinvoked on media element.Play method then invokes resource selectionalgorithm or invoke seek or trigger relevant eventdepending upon the state of media element.It also provides pause method which pauses themedia element.
  • 19. Seeking attribute shows if the browser is currently seeking. • Browser sets time offsets Seeking using seekable attribute thatAlgorithm: gives current seekable range • Triggers relevant events .
  • 20.  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.
  • 21. 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.
  • 22.  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.
  • 23. Will HTML5 Media Element API replace FLASH..?
  • 24.  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
  • 25.  Recent Activities  RDFa Core 1.1  XHTML + RDFa 1.1  RDFa Lite 1.1Last activity before this update was on 23rdNovember 2010
  • 26.  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
  • 27.  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.