HTML5 Multimedia

HTML5MultimediaSiddharta Govindarajsiddharta@silverstripesoftware.com

Siddharta GovindarajFounderSilver Stripe Software

AgendaSVGCanvasVideo

SVGScalable Vector Graphics

SVGCircles, rectangles, polygonsPaths, GroupsFills, Gradients, Patterns, FiltersUser interaction, Javascript & CSSSynchronized MultimediaIntegration Language

Workflow1. Create diagram in a vector graphics tool2. Save as SVG3. Display SVG in pageInkscape: http://www.inkscape.org/

Internet Explorer 7 & 8!!!Either use browser detection and serve an imageOR use a plugin for IE (Adobe SVG Viewer)OR use SVGWebSVGWeb: http://code.google.com/p/svgweb/

Use it today!Replace graphs and chartsReplace illustrationsGenerate scalable images

CanvasAllows you to interact directlywith the screen

<canvas id=“draw“ width=“300“ height=“300“></canvas>var canvas_el = document.getElementById(“draw“);var context = canvas_el.getContext(“2d“);context.fillRect(50, 25, 150, 100);

CanvasDraw arbitrary pictures onscreenDisplay imagesUser interaction model

Internet Explorer 7 & 8!!!Use excanvas: Simulates canvas through VMLExcanvas: http://code.google.com/p/explorercanvas/

Use it today!Dynamic chartingIn-browser GamesComplex renderingjQuery flot: http://code.google.com/p/flot/

VideoContainers:MP4, Ogg, WebMVideo:H.264, Theora, VP8Audio:MP3, AAC, Vorbis

Compatibility Theora + H.264 + VP8 + Vorbis + AAC + Vorbis + Ogg MP4 WebMIE 9 9Firefox 3.5 4.0Safari plugin 3.0 pluginChrome 5.0 5.0 6.0Opera 10.5 10.6iPhone 3.0Android 2.0

Workflow1. Record & edit video and audio tracks2. Encode into appropriate formats3. Insert into pageFirefogg: http://firefogg.org/Handbrake: http://handbrake.fr/

Internet Explorer 7 & 8!!!Use Flash fallback <video width=“640“ height=“480“> <source .../> <object width=“640“ height=“480“ type=“application/x-shockwave-flash“> ... </object> </video>

Use it today!Play video directly through the browser

QuestionsSiddharta Govindarajsiddharta@silverstripesoftware.comhttp://siddhi.blogspot.comhttp://toolsforagile.com

Image Creditshttp://www.sxc.hu/photo/1314784http://www.sxc.hu/photo/1033164http://www.sxc.hu/photo/949448http://www.sxc.hu/photo/1238789

http://siddhi.blogspot.com	2856
http://siddhi.blogspot.in	996
http://siddhi.blogspot.com.au	7
http://siddhi.blogspot.co.uk	6
http://siddhi.blogspot.ca	6
http://siddhi.blogspot.com.es	5
http://siddhi.blogspot.de	3
http://translate.googleusercontent.com	3
http://siddhi.blogspot.jp	2
http://siddhi.blogspot.com.br	2
http://siddhi.blogspot.fr	2
http://siddhi.blogspot.it	2
http://feeds.feedburner.com	2
http://siddhi.blogspot.com.ar	1
http://siddhi.blogspot.com.sixxs.org	1
http://www.blogger.com	1
http://www.newsblur.com	1
http://www.siddhi.blogspot.com	1
http://siddhi.blogspot.se	1

HTML5 Multimedia

by Siddhi on Nov 27, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

19 Embeds 3,898

Statistics

HTML5 Multimedia — Presentation Transcript