Your SlideShare is downloading. ×
0
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
HTML5 Multimedia
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Multimedia

7,617

Published on

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

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,617
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
72
Comments
2
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×