HTML5 Multimedia
- 2. Siddharta Govindaraj Founder Silver Stripe Software
- 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
- 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/
- 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