HTML5 Multimedia
-
Upload
siddhi -
Category
Technology
-
view
7.604 -
download
0
description
Transcript of HTML5 Multimedia
![Page 2: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/2.jpg)
Siddharta Govindaraj
FounderSilver Stripe Software
![Page 3: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/3.jpg)
Agenda
SVG
Canvas
Video
![Page 4: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/4.jpg)
Agenda
SVGCanvas
Video
![Page 5: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/5.jpg)
SVG
Scalable Vector Graphics
![Page 6: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/6.jpg)
![Page 7: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/7.jpg)
![Page 8: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/8.jpg)
<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>
![Page 9: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/9.jpg)
SVG
Circles, rectangles, polygons
Paths, Groups
Fills, Gradients, Patterns, Filters
User interaction, Javascript & CSS
Synchronized Multimedia Integration Language
![Page 10: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/10.jpg)
Workflow
1. Create diagram in a vector graphics tool
2. Save as SVG
3. Display SVG in page
Inkscape: http://www.inkscape.org/
![Page 11: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/11.jpg)
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/
![Page 12: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/12.jpg)
Use it today!
Replace graphs and charts
Replace illustrations
Generate scalable images
![Page 13: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/13.jpg)
Agenda
SVG
CanvasVideo
![Page 14: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/14.jpg)
Canvas
Allows you to interact directly with the screen
![Page 15: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/15.jpg)
<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);
![Page 16: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/16.jpg)
Canvas
Draw arbitrary pictures onscreen
Display images
User interaction model
![Page 17: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/17.jpg)
Internet Explorer 7 & 8!!!
Use excanvas: Simulates canvas through VML
Excanvas: http://code.google.com/p/explorercanvas/
![Page 18: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/18.jpg)
Use it today!
Dynamic charting
In-browser Games
Complex rendering
jQuery flot: http://code.google.com/p/flot/
![Page 19: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/19.jpg)
Agenda
SVG
Canvas
Video
![Page 20: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/20.jpg)
Video
Containers: MP4, Ogg, WebM
Video: H.264, Theora, VP8
Audio: MP3, AAC, Vorbis
![Page 21: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/21.jpg)
CompatibilityTheora +Vorbis +Ogg
H.264 +AAC +MP4
VP8 +Vorbis +WebM
IE 9 9Firefox 3.5 4.0Safari plugin 3.0 pluginChrome 5.0 5.0 6.0Opera 10.5 10.6iPhone 3.0Android 2.0
![Page 22: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/22.jpg)
<video src=“file.ogv“ width=“640“ height=“480“ controls=“controls“ preload=“preload“ autoplay=“autoplay“></video>
![Page 23: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/23.jpg)
<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>
![Page 24: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/24.jpg)
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/
![Page 25: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/25.jpg)
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>
![Page 26: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/26.jpg)
Use it today!
Play video directly through the browser
![Page 27: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/27.jpg)
Questions
Siddharta Govindaraj
http://siddhi.blogspot.com
http://toolsforagile.com
![Page 28: HTML5 Multimedia](https://reader035.fdocuments.us/reader035/viewer/2022062312/55514fa5b4c905bd1c8b5634/html5/thumbnails/28.jpg)
Image Credits
http://www.sxc.hu/photo/1314784http://www.sxc.hu/photo/1033164http://www.sxc.hu/photo/949448http://www.sxc.hu/photo/1238789