0
HTML5 Multimedia<br />Canvas, Audio, Video and more..<br />
Agenda<br />Canvas<br />Audio<br />Video<br />SVG<br />WebGL<br />
whoami /r<br />Parashuram<br />Work for a company that makes browsers<br />Web Enthusiast – spends time writing code<br />...
Canvas<br />
Pixel based drawing surface<br />2d context<br />The drawing API<br />Lines and Curves<br />Fille and Gradients<br />Image...
Canvas - Code<br /><canvas id = “myCanvas” width = “100px” height =  “100px” style = “width:200px;height:200px”><br />Canv...
Canvas - Code<br />varcontext = elem.getContext('2d');<br />context.fillRect(0, 0, 150, 100);<br />context.moveTo(10, 10);...
Canvas - Code<br />context.font = 'italic 30px sans-serif'; <br />context.strokeText('Hello world!', 0, 50);<br />context....
Canvas - Demos<br />http://canvaspaint.org/<br />http://nparashuram.com/seamcarving/index.html<br />http://www.canvasdemos...
Video<br />Native support to play video in browser<br />Codecs (What data is stored)<br />H.264<br />Theora<br />VP8<br />...
Video - Code<br /><video <br />poster="star.png" autoplay loop preload controls ><br /><sourcesrc="movie.webm" <br />	type...
Video - Code<br />video.play(); video.pause()<br />video.playbackRate = 0.8;<br />video.addTrack(kind, label, language) <b...
Video - Demos<br />http://html5demos.com/video<br />http://html5demos.com/two-videos<br />http://sublimevideo.net/demo<br ...
Audio<br />Native support for sound<br />Controls, API similar to Video<br />Play audio files, control playback<br />Audio...
Audio - Code<br /><audiocontrols preload="auto" autobuffer><br /> 	<sourcesrc="elvis.mp3" /><br />	<sourcesrc="elvis.ogg" ...
Audio - Demos<br />http://www.jplayer.org/latest/demo-01/#<br />http://tinyurl.com/4v8yu42<br />http://apm.ircam.fr/page/a...
SVG<br />XML Based Scalable Vector Graphics<br />Embed inline in HTML<br />Scalable Images <br />Elements scriptable on DO...
SVG - Code<br /><svgxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='30...
SVG - Demo<br />http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html<br />http://slides.html5rocks.com/#...
WebGL<br />3D Graphics API<br />Based on OpenGL ES 2.0<br />On Canvas element<br />Learning WebGL<br />Demos<br />http://w...
Demos<br />http://www.craftymind.com/factory/html5video/CanvasVideo.html<br />https://developer.mozilla.org/samples/video/...
Upcoming SlideShare
Loading in...5
×

DoctypeHTML5 (Hyderabad) Presentation on Multimedia

2,196

Published on

Slides for the session on HTML5 at DoctypeHTML5 in Hyderabad about Multimedia.

Topics covered include Canvas, Audio, Video, SVG, WebGL
http://nparashuram.com

Published in: Education
2 Comments
0 Likes
Statistics
Notes
  • i need presentation which u made in chennai camp
    thanx....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • can i get in ppt format
    if yes do mail
    yogeshjain91@gmail.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
2,196
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "DoctypeHTML5 (Hyderabad) Presentation on Multimedia"

  1. 1. HTML5 Multimedia<br />Canvas, Audio, Video and more..<br />
  2. 2. Agenda<br />Canvas<br />Audio<br />Video<br />SVG<br />WebGL<br />
  3. 3. whoami /r<br />Parashuram<br />Work for a company that makes browsers<br />Web Enthusiast – spends time writing code<br />Worked on IndexedDB standards and demos<br />http://nparashuram.com<br />http://blog.nparashuram.com<br />@nparashuram<br />
  4. 4. Canvas<br />
  5. 5. Pixel based drawing surface<br />2d context<br />The drawing API<br />Lines and Curves<br />Fille and Gradients<br />Image data, security context<br />GPU accelerated, possible trace-JITed JS code<br />Works well with Videos, WebWorkers<br />Canvas<br />
  6. 6. Canvas - Code<br /><canvas id = “myCanvas” width = “100px” height = “100px” style = “width:200px;height:200px”><br />Canvasnot supported<br /></canvas><br /><script><br />varelem= document.getElementById('myCanvas');<br /></script><br />
  7. 7. Canvas - Code<br />varcontext = elem.getContext('2d');<br />context.fillRect(0, 0, 150, 100);<br />context.moveTo(10, 10); <br />context.lineTo(100, 10); <br />context.stroke();<br />context.closePath();<br />context.drawImage(img_elem, dx, dy, dw, dh);<br />
  8. 8. Canvas - Code<br />context.font = 'italic 30px sans-serif'; <br />context.strokeText('Hello world!', 0, 50);<br />context.fillText ('Hello world!', 0, 0);<br />context.shadowColor = 'rgba(255, 0, 0, 0.5)';<br />context.shadowBlur = 4;<br />context.shadowColor = 'rgba(255, 0, 0, 0.5)';<br />context.fillRect(20, 20, 150, 100);<br />var g= context.createLinearGradient(sx, sy, dx, dy);<br />context.fillStyle = g; <br />
  9. 9. Canvas - Demos<br />http://canvaspaint.org/<br />http://nparashuram.com/seamcarving/index.html<br />http://www.canvasdemos.com/type/games/<br />http://www.benjoffe.com/code/demos/canvascape/<br />http://caniuse.com/#search=canvas<br />
  10. 10. Video<br />Native support to play video in browser<br />Codecs (What data is stored)<br />H.264<br />Theora<br />VP8<br />Containers (How data is stored)<br />MPEG4<br />Flash<br />Ogg<br />WebM<br />Should be Served with correct MIME-TYPE<br />Fallback mechanism<br />
  11. 11. Video - Code<br /><video <br />poster="star.png" autoplay loop preload controls ><br /><sourcesrc="movie.webm" <br /> type='video/webm; codecs="vp8, vorbis"' /><br /> <sourcesrc="movie.mp4" <br /> type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'/><br />Video tag not supported. Use Flash Tags here or<br />Download <a href="movie.webm">here</a>.<br /><video><br />
  12. 12. Video - Code<br />video.play(); video.pause()<br />video.playbackRate = 0.8;<br />video.addTrack(kind, label, language) <br />onPlay, canplaythrough, progress, stalled, loadeddata, loadedmetadata, waiting, <br />
  13. 13. Video - Demos<br />http://html5demos.com/video<br />http://html5demos.com/two-videos<br />http://sublimevideo.net/demo<br />http://caniuse.com/video<br />
  14. 14. Audio<br />Native support for sound<br />Controls, API similar to Video<br />Play audio files, control playback<br />Audio Data API – work in progress<br />
  15. 15. Audio - Code<br /><audiocontrols preload="auto" autobuffer><br />  <sourcesrc="elvis.mp3" /><br /> <sourcesrc="elvis.ogg" /><br /> <!-- now include flash fall back --><br /></audio><br />
  16. 16. Audio - Demos<br />http://www.jplayer.org/latest/demo-01/#<br />http://tinyurl.com/4v8yu42<br />http://apm.ircam.fr/page/audio-tag/<br />
  17. 17. SVG<br />XML Based Scalable Vector Graphics<br />Embed inline in HTML<br />Scalable Images <br />Elements scriptable on DOM<br />SVG in CSS as background images<br />SVG Filters for Video<br />
  18. 18. SVG - Code<br /><svgxmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'><br /> <title> Small SVG example </title><br /><circle cx='120' cy='150' r='60' style='fill: gold;'><br /> <animateattributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /><br /></circle><br /> <polyline points='120 30, 25 150, 290 150' <br /> stroke-width='4’ <br /> stroke='brown' style='fill: none;' /><br /><text x='60' y='250' fill='blue'><br />Hello, World!<br /></text><br /></svg> <br />
  19. 19. SVG - Demo<br />http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html<br />http://slides.html5rocks.com/#inline-svg<br />http://caniuse.com/svg-html5<br />
  20. 20. WebGL<br />3D Graphics API<br />Based on OpenGL ES 2.0<br />On Canvas element<br />Learning WebGL<br />Demos<br />http://www.ambiera.com/coppercube/webgldemos.html<br />http://www.khronos.org/webgl/wiki/Demo_Repository<br />
  21. 21. Demos<br />http://www.craftymind.com/factory/html5video/CanvasVideo.html<br />https://developer.mozilla.org/samples/video/chroma-key/index.xhtml<br />http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml<br />http://media.chikuyonok.ru/ambilight/<br />http://9elements.com/io/projects/html5/canvas/<br />http://www.canvasdemos.com/<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×