• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
DoctypeHTML5 (Hyderabad) Presentation on Multimedia
 

DoctypeHTML5 (Hyderabad) Presentation on Multimedia

on

  • 2,454 views

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

Statistics

Views

Total Views
2,454
Views on SlideShare
2,360
Embed Views
94

Actions

Likes
0
Downloads
31
Comments
2

5 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

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • i need presentation which u made in chennai camp
    thanx....
    Are you sure you want to
    Your message goes here
    Processing…
  • can i get in ppt format
    if yes do mail
    yogeshjain91@gmail.com
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    DoctypeHTML5 (Hyderabad) Presentation on Multimedia DoctypeHTML5 (Hyderabad) Presentation on Multimedia Presentation Transcript

    • HTML5 Multimedia
      Canvas, Audio, Video and more..
    • Agenda
      Canvas
      Audio
      Video
      SVG
      WebGL
    • 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
    • Canvas
    • 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
    • Canvas - Code
      <canvas id = “myCanvas” width = “100px” height = “100px” style = “width:200px;height:200px”>
      Canvasnot supported
      </canvas>
      <script>
      varelem= document.getElementById('myCanvas');
      </script>
    • 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);
    • 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;
    • 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
    • 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
    • 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>
    • Video - Code
      video.play(); video.pause()
      video.playbackRate = 0.8;
      video.addTrack(kind, label, language)
      onPlay, canplaythrough, progress, stalled, loadeddata, loadedmetadata, waiting,
    • Video - Demos
      http://html5demos.com/video
      http://html5demos.com/two-videos
      http://sublimevideo.net/demo
      http://caniuse.com/video
    • Audio
      Native support for sound
      Controls, API similar to Video
      Play audio files, control playback
      Audio Data API – work in progress
    • Audio - Code
      <audiocontrols preload="auto" autobuffer>
        <sourcesrc="elvis.mp3" />
      <sourcesrc="elvis.ogg" />
       <!-- now include flash fall back -->
      </audio>
    • Audio - Demos
      http://www.jplayer.org/latest/demo-01/#
      http://tinyurl.com/4v8yu42
      http://apm.ircam.fr/page/audio-tag/
    • 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
    • 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>
    • 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
    • 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
    • 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/