My presentation on using svg, canvas and video. Given at Doctype HTML5 - http://www.doctypehtml5.in

1. HTML5
Multimedia
Siddharta Govindaraj
siddharta@silverstripesoftware.com

2. Siddharta Govindaraj
Founder
Silver Stripe Software

3. Agenda
SVG
Canvas
Video

4. Agenda
SVG
Canvas
Video

5. SVG
Scalable Vector Graphics

8. <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>

9. SVG
Circles, rectangles, polygons
Paths, Groups
Fills, Gradients, Patterns, Filters
User interaction, Javascript & CSS
Synchronized Multimedia
Integration Language

10. Workflow
1. Create diagram in a vector graphics tool
2. Save as SVG
3. Display SVG in page
Inkscape: http://www.inkscape.org/

11. 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/

12. Use it today!
Replace graphs and charts
Replace illustrations
Generate scalable images

13. Agenda
SVG
Canvas
Video

14. Canvas
Allows you to interact directly
with the screen

15. <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);

16. Canvas
Draw arbitrary pictures onscreen
Display images
User interaction model

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

18. Use it today!
Dynamic charting
In-browser Games
Complex rendering
jQuery flot: http://code.google.com/p/flot/

19. Agenda
SVG
Canvas
Video

20. Video
Containers:
MP4, Ogg, WebM
Video:
H.264, Theora, VP8
Audio:
MP3, AAC, Vorbis

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

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

23. <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>

24. 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/

25. 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>

26. Use it today!
Play video directly through the browser

27. Questions
Siddharta Govindaraj
siddharta@silverstripesoftware.com
http://siddhi.blogspot.com
http://toolsforagile.com

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