HTML5 APIs - The New Frontier - ConFoo 2011
6 likes24,701 views
The document provides an overview of HTML5 APIs, specifically focusing on the video and canvas elements. It details various methods, properties, and events related to video playback and manipulation of canvas graphics. Additionally, it includes example code snippets demonstrating how to implement these features.
![for (var i=0, il=files.length, file, img; i<il; i++) {
file = files[i];
if (typeof FileReader !== "undefined") {
img = document.createElement("img");
reader = new FileReader();
reader.onload = (function (theImg) {
return function (evt) {
theImg.src = evt.target.result;
};
}(img));
reader.readAsDataURL(file);
}
}](https://image.slidesharecdn.com/html5apis-thenewfrontier-confoo-110309080657-phpapp02/85/HTML5-APIs-The-New-Frontier-ConFoo-2011-72-320.jpg)
HTML5 APIs - The New Frontier - ConFoo 2011
- 1. HTML5 APIs The New Frontier
- 9. Video
- 11. <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Oh, you use IE? Really?</p> </video>
- 17. // Properties video.paused; video.muted; video.autobuffer; video.autoplay; video.buffered; (Unimplemented) video.bufferedBytes; (Unimplemented) video.bufferingRate; (Unimplemented) video.bufferingThrottled; (Unimplemented) video.controls; video.currentSrc; video.currentTime; video.defaultPlaybackRate; video.duration; video.ended; video.error; video.muted; video.networkState; video.paused; video.playbackRate; video.readyState; video.seeking; video.src; video.totalBytes; video.volume;
- 18. // Events video.abort; video.canplay; video.canplaythrough; video.canshowcurrentframe; video.dataunavailable; video.durationchange; video.emptied; video.empty; video.ended; video.error; video.loadedfirstframe; video.loadedmetadata; video.loadstart; video.pause; video.play; video.progress; (lengthComputable, loaded, total) video.ratechange; video.seeked; video.seeking; video.suspend; video.timeupdate; video.volumechange;
- 19. Canvas
- 20. Apple even creates open standards for the web -Steve Jobs
- 21. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 22. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 23. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore();
- 25. context.fillRect(350, 50, 100, 100); context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
- 28. context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 30. context.strokeStyle = "transparent"; context.arc(100, 100, 75, 0, Math.PI*2, false); context.clip(); context.stroke(); context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 32. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 34. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 36. http://craftymind.com/factory/html5video/ CanvasVideo.html
- 37. SVG
- 38. <svg xmlns="http://www.w3.org/2000/svg" width="200" height="110" version="1.1" > <circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" /> </svg>
- 40. <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="110" version="1.1" > <circle cx="100" cy="52" r="50" stroke="#0000ff" stroke-width="1" fill="#ff0000" /> </svg>
- 41. var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); svg.setAttribute("width", "200"); svg.setAttribute("height", "110"); svg.setAttribute("version", "1.1"); circle.setAttribute("cx", "100"); circle.setAttribute("cy", "52"); circle.setAttribute("r", "50"); circle.setAttribute("fill", "#ff0000"); circle.setAttribute("stroke", "#00ffff"); svg.appendChild(circle); document.getElementById("svg-container").appendChild(svg);
- 42. Raphaël JavaScript Library - SVG and VML
- 43. var paper = Raphael(document.getElementById("raphael-demo"), 320, 200), circle = paper.circle(150, 62, 60); circle.attr("fill", "#ff0000"); circle.attr("stroke", "#00ffff");
- 45. Inline only in application/xhtml+xml pages or <embed src="circle.svg" width="200" height="110" type="image/svg+xml"></embed> <iframe src="circle.svg" width="200" height="110" type="image/svg+xml"></iframe> <object data="circle.svg" width="200" height="110" type="image/svg+xml"></object> or Plain JavaScript or Use Raphaël
- 47. Inline in HTML web pages in: Firefox 4 Google Chrome 7 Safari 5.x? Internet Explorer 9 Opera?
- 49. SVG vs. canvas
- 50. Vector vs. bitmap SVG for interaction, shapes etc canvas for speed, animations SVG = “Real” DOM elements Google indexes SVG
- 51. Web Storage
- 56. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing" }; localStorage.setItem("sarah", JSON.stringify(sarahPalin)); console.log(typeof JSON.parse(localStorage.getItem("sarah")));
- 59. if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesn't seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false); } else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline; }
- 60. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 62. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 63. Drag and Drop
- 64. ...I am forced to conclude that the HTML5 drag and drop module is not just a disaster, it’s a fucking disaster. -Peter-Paul Koch
- 66. <p id="drop-area"> Drag and drop files here </p>
- 67. var someImg = document.getElementById("some-image"), dropArea = document.getElementById("drop-area"); someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setData("Text", this.getAttribute("alt")); return false; }; dropArea.ondragenter = function (evt) { return false; “If the drop is to be }; accepted, then this dropArea.ondragover = function (evt) { return false; event (dragover) has }; to be canceled.” dropArea.ondrop = function (evt) { var text = event.dataTransfer.getData("Text"); event.cancelBubble = true; // For IE return false; };
- 68. someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setDragImage(dragIcon, -10, -10); return false; };
- 69. File API
- 70. <!-- The multiple attribute allows for uploading of multiple files --> <input id="files-upload" type="file" multiple>
- 71. var filesUpload = document.getElementById("files-upload"); filesUpload.onchange = function () { // Access to data about all files var files = this.files; for (var i=0, il=files.length; i<il; i++) { file.name; // Get the name of the file file.size; // Get the size of the file, in bytes file.type; // Get the type of the file }; };
- 72. for (var i=0, il=files.length, file, img; i<il; i++) { file = files[i]; if (typeof FileReader !== "undefined") { img = document.createElement("img"); reader = new FileReader(); reader.onload = (function (theImg) { return function (evt) { theImg.src = evt.target.result; }; }(img)); reader.readAsDataURL(file); } }
- 73. // For Firefox, Google Chrome and Safari var xhr = new XMLHttpRequest(); xhr.open("post", "upload/upload.php", true); xhr.onreadystatechange = function() { if (this.readyState === 4) { // File uploaded } }; // Upload file: Firefox, Google Chrome and Safari xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", file.fileName); xhr.setRequestHeader("X-File-Size", file.fileSize); xhr.setRequestHeader("X-File-Type", file.type); xhr.send(file);
- 75. Web Sockets
- 77. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 78. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!"); }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred"); };
- 81. WebGL
- 84. Flight of the Navigator
- 95. Robert Nyman http://robertnyman.com/speaking/ http://robertnyman.com/html5/ Twitter: @robertnyman Pictures: Internet hole: http://cheezburger.com/View/3194058752 Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/ Files: http://www.hannonhill.com/products/index.html Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html Drag me: http://mcus.nu/?cat=25 Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family-History.htm George W Bush fail 1: http://freetraveler.net/pictures/2.09.06/fun/1.jpg Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html George W Bush fail 2: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/g2.jpg AJAX: http://www.aqlanza.com/technologies01.html George W Bush fail 3: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/gb3.jpg Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet-strikes.aspx Flash: http://www.zerofractal.com/assets/error-flash.jpg Canvas: http://www.ioffer.com/c/Drawings-1000407 Ooompa Loompa: http://www.fugly.com/pictures/19609/oompa-loompa-hit-that-forizzle.html Oriental studies: http://www.swollenpickles.com/2007/01/29/phallic-logo-awards/ 3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpg Clip: http://pics33.blogspot.com/2010/08/best-examples-of-creative-edit-images.html Elsewhere: http://www.allisonweiner.com/index.php?/posters/elsewhere/ SVG: http://shauser.umwblogs.org/2007/08/28/learning-a-little-svg-from-pgmj/ Today: http://www.nickcannon.com/2009/09/21/mariah-set-to-perform-on-the-today-show-oct-2/ Web browsers: http://www.zamaanonline.com/category/funny-amazing-stuff/geek-fun Tomorrow: http://www.hulu.com/tales-of-tomorrow Web browser icons: http://paulirish.com/2010/high-res-browser-icons/ Day after tomorrow: http://www.impawards.com/2004/day_after_tomorrow_ver3.html Fallen beaver: http://failsalon.com/?p=183 Fight club: http://www.unique-screenwriting.com/rules-of-fight-club.html Beaver win: http://thefourcornersclassroom.wikispaces.com/Group+30+-+Pre-Project Go where I've never been: http://musicisart.ws/diane-arbus/ Storage fail: http://failfun.com/funny-pictures/gangsta-fail/ Head in ground: http://56minus1.com/2009/02/things-well-done-li-wei/ Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-monster.html Basketball player: http://www.hemmy.net/2008/03/22/the-fail-collection/ You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/ Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of-china/?quick_view=1 Girl taped on wall: http://www.mymodernmet.com/profiles/blogs/a-father-who-creatively
- 96. !=
- 97. We can’t change history, but we can change the future. Be nice to each other.