DoctypeHTML5 (Hyderabad) Presentation on Multimedia

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" />

</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/

http://blog.nparashuram.com	88
http://twitter.com	1
http://feeds.feedburner.com	1
http://feeds2.feedburner.com	1
http://www.linkedin.com	1

DoctypeHTML5 (Hyderabad) Presentation on Multimedia

by Parashuram Narasimhan

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 92

Statistics

DoctypeHTML5 (Hyderabad) Presentation on Multimedia Presentation Transcript