HTML5MultimediaSiddharta Govindaraj

siddharta@silverstripesoftware.com

Siddharta Govindaraj

FounderSilver Stripe Software

Agenda

SVG

Canvas

Video

Agenda

SVGCanvas

Video

SVG

Scalable Vector Graphics

<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red"/>

</svg>

SVG

Circles, rectangles, polygons

Paths, Groups

Fills, Gradients, Patterns, Filters

User interaction, Javascript & CSS

Synchronized Multimedia Integration Language

Workflow

1. Create diagram in a vector graphics tool

2. Save as SVG

3. Display SVG in page

Inkscape: http://www.inkscape.org/

Internet Explorer 7 & 8!!!

Either use browser detection and serve an image

OR use a plugin for IE (Adobe SVG Viewer)

OR use SVGWeb

SVGWeb: http://code.google.com/p/svgweb/

Use it today!

Replace graphs and charts

Replace illustrations

Generate scalable images

Agenda

SVG

CanvasVideo

Canvas

Allows you to interact directly with 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);

Canvas

Draw arbitrary pictures onscreen

Display images

User interaction model

Internet Explorer 7 & 8!!!

Use excanvas: Simulates canvas through VML

Excanvas: http://code.google.com/p/explorercanvas/

Use it today!

Dynamic charting

In-browser Games

Complex rendering

jQuery flot: http://code.google.com/p/flot/

Agenda

SVG

Canvas

Video

Video

Containers: MP4, Ogg, WebM

Video: H.264, Theora, VP8

Audio: MP3, AAC, Vorbis

CompatibilityTheora +Vorbis +Ogg

H.264 +AAC +MP4

VP8 +Vorbis +WebM

IE 9 9Firefox 3.5 4.0Safari plugin 3.0 pluginChrome 5.0 5.0 6.0Opera 10.5 10.6iPhone 3.0Android 2.0

<video src=“file.ogv“ width=“640“ height=“480“ controls=“controls“ preload=“preload“ autoplay=“autoplay“></video>

<video src=“file.ogv“ width=“640“ height=“480“ controls=“controls“ preload=“preload“ autoplay=“autoplay“></video>

<video width=“640“ height=“480“>

<source src=“file.mp4“ type='video/mp4; codecs=“avc1.42E01E, mp4a.40.2“'/>

<source src=“file.webm“ type='video/webm; codecs=“vp8, vorbis“/>

<source src=“file.ogv“ type=“video/ogg; codecs=“theora, vorbis“/>

</video>

Workflow

1. Record & edit video and audio tracks

2. Encode into appropriate formats

3. Insert into page

Firefogg: 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

Questions

Siddharta Govindaraj

siddharta@silverstripesoftware.com

http://siddhi.blogspot.com

http://toolsforagile.com

Image Credits

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