CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 8 Canvas, Video & WebsocketsFeb 17, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Thursday, February 17, 2011References2Dive into HTML5, Mark Pilgrim, http://diveintohtml5.org/HTML5 & CSS3 Develop with Tomorrow's Standards Today, Hogan, Pragmatic ProgrammersVarious Web pages as indicated on individual slidesThursday, February 17, 2011Video Codec3Software or hardware algorithm that compresses/decompresses videoBrowserOgg Theora (VP3)H.264VP8 (WebM)IENoin IE 9Future Google pluginFireFoxYesNoin FireFox 4ChromeYesYes/NoYesSafariNoYesFuture Google pluginOperaYesNoYesHTML 5 Video Codec SupportThursday, February 17, 2011Source http://en.wikipedia.org/wiki/HTML5_videoContainers4Supports multiple codec/formatsQuickTime playerOggThursday, February 17, 2011HTML 5 Video & Audio support5Native Browser support for playing & controlling video & audioNo need for FlashThursday, February 17, 2011What is Wrong with Flash?6What some people claimBuggySlowFlash & MobileMany Flash sites use hoveriOS does not supprt flashThursday, February 17, 2011HTML5 Video Support7Playing Class Video in SafariThursday, February 17, 2011Source8<head><meta charset="UTF-8" /><title>Video</title></head><body><video id="player" controls><source src="http://www-rohan.sdsu.edu/~whitney/audio/courses/spring11/cs696/cs696_01_25_11.mov"></source></video><br/><button onclick="document.getElementById('player').play()">Play</button><button onclick="document.getElementById('player').pause()">Pause</button><button onclick="document.getElementById('player').volume+=0.1">Volume up</button><button onclick="document.getElementById('player').volume-=0.1">Volume down</button> </body></html>Thursday, February 17, 2011Advantages9Works on iOSCan control video from JavascriptDon't need to interact with Flash PlayerThursday, February 17, 2011Disadvantages10Chrome & Firefox will not support H.264Currently on Opera & Chrome support WebMThursday, February 17, 2011Workaround 111<video id="player" controls><source src="http://www-rohan.sdsu.edu/~whitney/audio/courses/spring11/cs696/cs696_01_25_11.mov"></source><source src="http://www-rohan.sdsu.edu/~whitney/audio/courses/spring11/cs696/cs696_01_25_11.ogg"></source></video>Record video in multiple formatsLet browser select correct formatThursday, February 17, 2011Workaround 212Use flashThursday, February 17, 2011Adobe liked Google's decision to drop H.264 support in ChromeHTML5 Audio13FormatIE 8Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0Ogg VorbisNoYesYesYesNoMP3NoNoNoYesYesWavNoYesYesNoYesNative support for streaming audioThursday, February 17, 2011Table from http://www.w3schools.com/html5/html5_audio.aspAudio Example14<article class="sample"> <header><h2>Drums</h2></header> <audio id="drums" controls><source src="sounds/ogg/drums.ogg" type="audio/ogg"> <source src="sounds/mp3/drums.mp3" type="audio/mpeg"> <a href="sounds/mp3/drums.mp3">Download drums.mp3</a></audio> </article>Thursday, February 17, 2011Audio Example - Streeme15http://code.google.com/p/streeme/Streams your music from your computer Client - any browser that supports HTML5 audioThursday, February 17, 201116CanvasThursday, February 17, 2011Canvas17Native 2D graphic in browserSupported inIE 7.0+ (needs plugin)FireFox 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+iPhone 1.0+Android 1.0+Thursday, February 17, 2011source http://diveintohtml5.org/canvas.html#divingin18Exampleshttp://www.devlounge.net/code/10-awesome-html5-canvas-examplesThursday, February 17, 201119Canvas<!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <script type="text/javascript"> function drawExample() { var canvas = document.getElementById('draw'); if (!canvas.getContext){ return false; } var context = canvas.getContext('2d'); context.fillStyle = "rgb(200,0,0)"; context.fillRect (10, 10, 100, 100); } </script></head><body onload="drawExample()"><canvas id="draw" width="150" height="150" style="border:1px dotted">Fallback content here</canvas></body></html>Thursday, February 17, 2011Drawing Lines20 function drawExample() { var canvas = document.getElementById('draw'); if (!canvas.getContext){ alert("No canvas"); return false; } var context = canvas.getContext('2d'); context.fillStyle = "rgb(200,0,0)"; context.fillRect (10, 10, 100, 100); context.lineWidth = 2; context.beginPath(); context.moveTo(10, 110); context.lineTo(60,160); context.lineTo(110, 110 ); context.stroke(); context.closePath(); } </script><canvas id="draw" width="150" height="150" style="border:1px dotted">Fallback content here</canvas>Thursday, February 17, 2011Canvas method21http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.htmlList of all Canvas methodsLow level drawing methodsGood tutorialhttp://diveintohtml5.org/canvas.html#divinginThursday, February 17, 2011RGraph22JavaScript Library for graphs usingcanvashttp://www.rgraph.net/Provide data for graphConfigure graph settingsThursday, February 17, 2011Example23 window.onload = function () { var data = [10,4,17,50,25,19,20,25,30,29,30,29]; var line = new RGraph.Line("chart", data); line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)'); line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)'); line.Set('chart.background.grid.color', 'rgba(238,238,238,1)'); line.Set('chart.colors', ['rgba(255,0,0,1)']); line.Set('chart.linewidth', 2); line.Set('chart.filled', true); line.Set('chart.hmargin', 5); line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); line.Set('chart.gutter', 40); line.Set('chart.zoom.mode', 'thumbnail'); line.Draw(); }Thursday, February 17, 2011Example from RGraphs examples in RGraph downloadOther Tools24Processing.jshttp://processingjs.org/JavaScript implementation of ProcessingLanguage for creating images, animations, and interactionsMooTools Canvas Libraryhttp://forvar.de/js/mcl/SupportsLayersThreadsItemsAnimationsThursday, February 17, 201125WebSocketsThursday, February 17, 201126The ProblemHow can browser get data from serverwithout reloading a pageThursday, February 17, 2011AJAX - Asynchronous JavaScript and XML271998 -
View Full Document
Unlocking...