Slides for the session on HTML5 at DoctypeHTML5 in Hyderabad about Multimedia. Topics covered include Canvas, Audio, Video, SVG, WebGL http://nparashuram.com

1. HTML5 Multimedia Canvas, Audio, Video and more..

2. Agenda Canvas Audio Video SVG WebGL

3. whoami /r Parashuram Work for a company that makes browsers Web Enthusiast – spends time writing code Worked on IndexedDB standards and demos http://nparashuram.com http://blog.nparashuram.com @nparashuram

4. Canvas

5. Pixel based drawing surface 2d context The drawing API Lines and Curves Fille and Gradients Image data, security context GPU accelerated, possible trace-JITed JS code Works well with Videos, WebWorkers Canvas

6. Canvas - Code <canvas id = “myCanvas” width = “100px” height = “100px” style = “width:200px;height:200px”> Canvasnot supported </canvas> <script> varelem= document.getElementById('myCanvas'); </script>

7. Canvas - Code varcontext = elem.getContext('2d'); context.fillRect(0, 0, 150, 100); context.moveTo(10, 10); context.lineTo(100, 10); context.stroke(); context.closePath(); context.drawImage(img_elem, dx, dy, dw, dh);

8. Canvas - Code context.font = 'italic 30px sans-serif'; context.strokeText('Hello world!', 0, 50); context.fillText ('Hello world!', 0, 0); context.shadowColor = 'rgba(255, 0, 0, 0.5)'; context.shadowBlur = 4; context.shadowColor = 'rgba(255, 0, 0, 0.5)'; context.fillRect(20, 20, 150, 100); var g= context.createLinearGradient(sx, sy, dx, dy); context.fillStyle = g;

9. Canvas - Demos http://canvaspaint.org/ http://nparashuram.com/seamcarving/index.html http://www.canvasdemos.com/type/games/ http://www.benjoffe.com/code/demos/canvascape/ http://caniuse.com/#search=canvas

10. Video Native support to play video in browser Codecs (What data is stored) H.264 Theora VP8 Containers (How data is stored) MPEG4 Flash Ogg WebM Should be Served with correct MIME-TYPE Fallback mechanism

11. Video - Code <video poster="star.png" autoplay loop preload controls > <sourcesrc="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <sourcesrc="movie.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'/> Video tag not supported. Use Flash Tags here or Download <a href="movie.webm">here</a>. <video>

12. Video - Code video.play(); video.pause() video.playbackRate = 0.8; video.addTrack(kind, label, language) onPlay, canplaythrough, progress, stalled, loadeddata, loadedmetadata, waiting,

13. Video - Demos http://html5demos.com/video http://html5demos.com/two-videos http://sublimevideo.net/demo http://caniuse.com/video

14. Audio Native support for sound Controls, API similar to Video Play audio files, control playback Audio Data API – work in progress

15. Audio - Code <audiocontrols preload="auto" autobuffer> <sourcesrc="elvis.mp3" /> <sourcesrc="elvis.ogg" /> <!-- now include flash fall back --> </audio>

16. Audio - Demos http://www.jplayer.org/latest/demo-01/# http://tinyurl.com/4v8yu42 http://apm.ircam.fr/page/audio-tag/

17. SVG XML Based Scalable Vector Graphics Embed inline in HTML Scalable Images Elements scriptable on DOM SVG in CSS as background images SVG Filters for Video

18. SVG - Code <svgxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'> <title> Small SVG example </title> <circle cx='120' cy='150' r='60' style='fill: gold;'> <animateattributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /> </circle> <polyline points='120 30, 25 150, 290 150' stroke-width='4’ stroke='brown' style='fill: none;' /> <text x='60' y='250' fill='blue'> Hello, World! </text> </svg>

19. SVG - Demo http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html http://slides.html5rocks.com/#inline-svg http://caniuse.com/svg-html5

20. WebGL 3D Graphics API Based on OpenGL ES 2.0 On Canvas element Learning WebGL Demos http://www.ambiera.com/coppercube/webgldemos.html http://www.khronos.org/webgl/wiki/Demo_Repository

21. Demos http://www.craftymind.com/factory/html5video/CanvasVideo.html https://developer.mozilla.org/samples/video/chroma-key/index.xhtml http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml http://media.chikuyonok.ru/ambilight/ http://9elements.com/io/projects/html5/canvas/ http://www.canvasdemos.com/