MultimediaAudio and video are first class citizens in theHTML5 web, living in harmony with yourapps and sites. Lights, camera, action!
Nigel Parker - http://nigelparker.nameHTML5 Video & Audio<audio <videosrc= src= The url to the audio or video width= The width of the video element height= The height of the video element poster= The url to the thumbnail of the videopreload= preload= (none, metadata, auto) Start downloadingautoplay autoplay Audio or video should play immediatelyloop loop Audio or video should return to start and playcontrols controls Will show controls (play, pause, scrub bar)> >… …</audio> </video>
The browser will use the first recognized format <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>PAGE 57
Nigel Parker - http://nigelparker.nameAudio & Video Codecs – Browser Support ! ! * * Chrome is removing support for H.264 * If WebM is installed ! Microsoft released a H.264 Extension for Chrome on Windows 7PAGE 58
HTML5 Video Codec Browser H.264 (MP4) VP8 (WebM) Internet Explorer 9 X X Google Chrome 12 X X Mozilla Firefox 4 - X Apple Safari 5 X - Opera 11 - XPAGE 59
Nigel Parker - http://nigelparker.nameApple’s HLS (HTTP Live Streaming) HTML5 doesn’t specify any form of adaptive streaming Apple’s HLS is not a part of an industry standard 3GPP and MPEG are in the process of standardizing DASH(Dynamic Adaptive Streaming over HTTP)PAGE 60
CSS3 StylingCSS3 delivers a wide range of stylization andeffects, enhancing the web app withoutsacrificing your semantic structure orperformance. Additionally Web Open FontFormat (WOFF) provides typographicflexibility and control far beyond anythingthe web has offered before.
ConnectivityMore efficient connectivity means more real-time chats, faster games, and bettercommunication. Web Sockets and Server-Sent Events are pushing (pun intended) databetween client and server more efficientlythan ever before.
Craig Kitterman & Paul Batum @ Mix’11The concept of “Real Time Web” is awesome.
Craig Kitterman & Paul Batum @ Mix’11 WebSockets a socket that works anywhere across the web …even through network intermediaries Bidirectional Single TCP socket In & out of browser Real time performance Simple programming model Bandwidth savings Scalability advantages PAGE 69
DEMO http://www.html5labs.comPAGE 70
3D, Graphics, EffectsBetween SVG, Canvas, WebGL, and CSS3 3Dfeatures, youre sure to amaze your userswith stunning visuals natively rendered in thebrowser.
Jatinder Mann @ Mix’11What’s Canvas? HTML5 element that allows for dynamic, scriptable rendering of 2D shapes and bitmaps Immediate mode rendering Simple API: 45 methods, 21 attributes
Offline & StorageWeb Apps can start faster and work even ifthere is no internet connection, thanks to theHTML5 App Cache, as well as the LocalStorage, Indexed DB, and the File APIspecifications.
HTML 5 SemanticsGiving meaning to structure, semantics arefront and center with HTML5. A richer set oftags, along with RDFa, microdata, andmicroformats, are enabling a more useful,data driven web for both programs and yourusers.
Device AccessBeginning with the Geolocation API, WebApplications can present rich, device-awarefeatures and experiences. Incredible deviceaccess innovations are being developed andimplemented, from audio/video input accessto microphones and cameras, to local datasuch as contacts & events, and even tiltorientation.
Performance & IntegrationMake your Web Apps and dynamic webcontent faster with a variety of techniquesand technologies such as Web Workers andXMLHttpRequest 2. No user should ever waiton your watch.