DoctypeHTML5 (Hyderabad) Presentation on Multimedia
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

DoctypeHTML5 (Hyderabad) Presentation on Multimedia

  • 2,639 views
Uploaded on

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

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • i need presentation which u made in chennai camp
    thanx....
    Are you sure you want to
    Your message goes here
  • can i get in ppt format
    if yes do mail
    yogeshjain91@gmail.com
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
2,639
On Slideshare
2,545
From Embeds
94
Number of Embeds
5

Actions

Shares
Downloads
34
Comments
2
Likes
0

Embeds 94

http://blog.nparashuram.com 89
http://www.linkedin.com 2
http://twitter.com 1
http://feeds.feedburner.com 1
http://feeds2.feedburner.com 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. 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/