HTML5 Multimedia
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5 Multimedia

  • 8,398 views
Uploaded 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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
8,398
On Slideshare
3,868
From Embeds
4,530
Number of Embeds
28

Actions

Shares
Downloads
71
Comments
2
Likes
2

Embeds 4,530

http://siddhi.blogspot.com 2,896
http://siddhi.blogspot.in 1,550
http://siddhi.blogspot.co.uk 10
http://siddhi.blogspot.com.au 9
http://siddhi.blogspot.ca 8
http://siddhi.blogspot.de 7
http://siddhi.blogspot.fr 6
http://siddhi.blogspot.com.es 6
http://www.siddharta.me 6
http://siddhi.blogspot.com.br 5
http://siddhi.blogspot.se 4
http://translate.googleusercontent.com 3
http://siddhi.blogspot.jp 2
http://feeds.feedburner.com 2
http://www.linkedin.com 2
http://siddhi.blogspot.it 2
http://siddhi.blogspot.gr 1
http://siddhi.blogspot.dk 1
http://siddhi.blogspot.com.ar 1
http://mukeshgarg29.blogspot.com 1
http://siddhi.blogspot.nl 1
http://siddhi.blogspot.co.nz 1
http://siddhi.blogspot.co.il 1
http://siddhi.blogspot.sg 1
http://www.blogger.com 1
http://www.siddhi.blogspot.com 1
http://www.newsblur.com 1
http://siddhi.blogspot.com.sixxs.org 1

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