HTML5MultimediaSiddharta Govindarajsiddharta@silverstripesoftware.com
Siddharta GovindarajFounderSilver Stripe Software
AgendaSVGCanvasVideo
AgendaSVGCanvasVideo
SVGScalable 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="bl...
SVGCircles, rectangles, polygonsPaths, GroupsFills, Gradients, Patterns, FiltersUser interaction, Javascript & CSSSynchron...
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 S...
Use it today!Replace graphs and chartsReplace illustrationsGenerate scalable images
AgendaSVGCanvasVideo
CanvasAllows you to interact directlywith the screen
<canvas id=“draw“ width=“300“ height=“300“></canvas>var canvas_el = document.getElementById(“draw“);var context = canvas_e...
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/
AgendaSVGCanvasVideo
VideoContainers:MP4, Ogg, WebMVideo:H.264, Theora, VP8Audio:MP3, AAC, Vorbis
Compatibility          Theora +   H.264 +   VP8 +          Vorbis +   AAC +     Vorbis +          Ogg        MP4       Web...
<video src=“file.ogg“   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...
Workflow1. Record & edit video and audio tracks2. Encode into appropriate formats3. Insert into pageFirefogg: http://firef...
Internet Explorer 7 & 8!!!Use Flash fallback <video width=“640“ height=“480“>    <source .../>    <object width=“640“ heig...
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...
HTML5 Multimedia
HTML5 Multimedia
Upcoming SlideShare
Loading in …5
×

HTML5 Multimedia

7,934 views

Published on

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

Published in: Technology, Art & Photos
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
7,934
On SlideShare
0
From Embeds
0
Number of Embeds
4,531
Actions
Shares
0
Downloads
73
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 Multimedia

  1. 1. HTML5MultimediaSiddharta Govindarajsiddharta@silverstripesoftware.com
  2. 2. Siddharta GovindarajFounderSilver Stripe Software
  3. 3. AgendaSVGCanvasVideo
  4. 4. AgendaSVGCanvasVideo
  5. 5. SVGScalable Vector Graphics
  6. 6. <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>
  7. 7. SVGCircles, rectangles, polygonsPaths, GroupsFills, Gradients, Patterns, FiltersUser interaction, Javascript & CSSSynchronized MultimediaIntegration Language
  8. 8. Workflow1. Create diagram in a vector graphics tool2. Save as SVG3. Display SVG in pageInkscape: http://www.inkscape.org/
  9. 9. 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/
  10. 10. Use it today!Replace graphs and chartsReplace illustrationsGenerate scalable images
  11. 11. AgendaSVGCanvasVideo
  12. 12. CanvasAllows you to interact directlywith the screen
  13. 13. <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);
  14. 14. CanvasDraw arbitrary pictures onscreenDisplay imagesUser interaction model
  15. 15. Internet Explorer 7 & 8!!!Use excanvas: Simulates canvas through VMLExcanvas: http://code.google.com/p/explorercanvas/
  16. 16. Use it today!Dynamic chartingIn-browser GamesComplex renderingjQuery flot: http://code.google.com/p/flot/
  17. 17. AgendaSVGCanvasVideo
  18. 18. VideoContainers:MP4, Ogg, WebMVideo:H.264, Theora, VP8Audio:MP3, AAC, Vorbis
  19. 19. 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
  20. 20. <video src=“file.ogg“ width=“640“ height=“480“ controls=“controls“ preload=“preload“ autoplay=“autoplay“></video>
  21. 21. <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>
  22. 22. Workflow1. Record & edit video and audio tracks2. Encode into appropriate formats3. Insert into pageFirefogg: http://firefogg.org/Handbrake: http://handbrake.fr/
  23. 23. 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>
  24. 24. Use it today!Play video directly through the browser
  25. 25. QuestionsSiddharta Govindarajsiddharta@silverstripesoftware.comhttp://siddhi.blogspot.comhttp://toolsforagile.com
  26. 26. Image Creditshttp://www.sxc.hu/photo/1314784http://www.sxc.hu/photo/1033164http://www.sxc.hu/photo/949448http://www.sxc.hu/photo/1238789

×