DoctypeHTML5 (Hyderabad) Presentation on Multimedia
Download as PPTX, PDF1 like1,128 views
The document discusses various HTML5 multimedia features including the canvas for 2D drawing, video, and audio functionalities, as well as SVG and WebGL for graphics. It provides code snippets and demo links for implementing these features in web development, emphasizing aspects like codec support, playback controls, and graphical capabilities. The author, Parashuram, shares his background and contributions to browser technology and standards.
DoctypeHTML5 (Hyderabad) Presentation on Multimedia
- 1. HTML5 MultimediaCanvas, Audio, Video and more..
- 3. whoami /rParashuramWork for a company that makes browsersWeb Enthusiast – spends time writing codeWorked on IndexedDB standards and demoshttp://nparashuram.comhttp://blog.nparashuram.com@nparashuram
- 4. Canvas
- 5. Pixel based drawing surface2d contextThe drawing APILines and CurvesFille and GradientsImage data, security contextGPU accelerated, possible trace-JITed JS codeWorks well with Videos, WebWorkersCanvas
- 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 - Codevarcontext = 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 - Codecontext.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;
- 10. VideoNative support to play video in browserCodecs (What data is stored)H.264TheoraVP8Containers (How data is stored)MPEG4FlashOggWebMShould be Served with correct MIME-TYPEFallback 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 orDownload <a href="movie.webm">here</a>.<video>
- 12. Video - Codevideo.play(); video.pause()video.playbackRate = 0.8;video.addTrack(kind, label, language) onPlay, canplaythrough, progress, stalled, loadeddata, loadedmetadata, waiting,
- 14. AudioNative support for soundControls, API similar to VideoPlay audio files, control playbackAudio Data API – work in progress
- 15. Audio - Code<audiocontrols preload="auto" autobuffer> <sourcesrc="elvis.mp3" /> <sourcesrc="elvis.ogg" /> <!-- now include flash fall back --></audio>
- 17. SVGXML Based Scalable Vector GraphicsEmbed inline in HTMLScalable Images Elements scriptable on DOMSVG in CSS as background imagesSVG 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>
- 20. WebGL3D Graphics APIBased on OpenGL ES 2.0On Canvas elementLearning WebGLDemoshttp://www.ambiera.com/coppercube/webgldemos.htmlhttp://www.khronos.org/webgl/wiki/Demo_Repository