HTML5 APIs - The New Frontier 2011
2 likes4,066 views
The document discusses HTML5 APIs for video, canvas, and other areas. It provides details on using the <video> tag to embed video, including setting sources and displaying controls. It also covers common video methods and properties. For canvas, it demonstrates how to access the rendering context and use its methods to draw shapes, images, and apply styles.
![div[draggable] {
-khtml-user-drag: element;
}](https://image.slidesharecdn.com/html5apis-thenewfrontier-knowit-110203080245-phpapp02/85/HTML5-APIs-The-New-Frontier-2011-78-320.jpg)
![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-knowit-110203080245-phpapp02/85/HTML5-APIs-The-New-Frontier-2011-87-320.jpg)
HTML5 APIs - The New Frontier 2011
- 1. HTML5 APIs The New Frontier
- 9. “We stand on the edge of a New Frontier—the frontier of unfulfilled hopes and dreams, a frontier of unknown opportunities and beliefs in peril.” - John F. Kennedy
- 10. Video
- 11. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
- 12. <video controls> <source src="swedish-flag.mp4"> <source src="swedish-flag.ogv"> <p> Sorry, your web browser doesn't support the video element. </p> </video>
- 13. var video = document.getElementById("my-video"); // Play/pause button if (video.paused || video.ended) { video.play(); } else { video.pause(); }
- 14. // Checking codec support if (video.canPlayType('video/ogg; codecs="theora, vorbis"')) { video.play(); } else { alert("Evil browser with only licensed codec support!"); }
- 16. // 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;
- 17. // 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;
- 20. Canvas
- 21. Apple even creates open standards for the web -Steve Jobs
- 22. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
- 23. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
- 24. context.save(); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(50, 50, 100, 100); context.clearRect(40, 40, 20, 20); context.restore(); context.fillRect(350, 50, 100, 100);
- 25. 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();
- 27. context.fillStyle = "#fff"; context.fillRect(0, 0, 200, 200); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.fillRect(100, 100, 100, 100);
- 29. 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);
- 31. 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");
- 33. HTML5 Canvas for Internet Explorer <= 8 - explorercanvas
- 35. 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
- 51. Vector vs. bitmap SVG for interaction, shapes etc canvas for speed, animations SVG = “Real” DOM elements Google indexes SVG
- 52. Geolocation
- 53. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
- 56. Web Storage
- 61. var sarahPalin = { "contest" : "Miss Alaska pageant", "Talent" : "Flute playing" }; localStorage.setItem("sarah", JSON.stringify(sarahPalin)); console.log(typeof JSON.parse(localStorage.getItem("sarah")));
- 63. postMessage
- 64. // Use postMessage on a window to send a message var iframeWin = document.getElementById("da-iframe").contentWindow; iframeWin.postMessage("Love you!", "http://robertnyman.com");
- 65. // Handle message function displayMessage (evt) { var message; if (evt.origin !== "http://robertnyman.com") { message = "You are not worthy"; } else { message = "I got " + evt.data + " from " + evt.origin; } document.getElementById("received-message").innerHTML = message; } // Using onmessage to receive message if (window.addEventListener) { // For standards-compliant web browsers window.addEventListener("message", displayMessage, false); } else { window.attachEvent("onmessage", displayMessage); }
- 66. Web Workers
- 67. var worker = new Worker("worker.js");
- 68. // Main page code var worker = new Worker("worker.js"); // postMessage worker.postMessage(5); // Receive message back from Worker worker.onmessage = function (evt) { document.getElementById("worker-results").innerHTML = evt.data; }; // Error handling worker.onerror = function (evt) { document.getElementById("worker-results").innerHTML = "An error occurred"; };
- 69. // Web Worker code onmessage = function (evt) { for (var i=evt.data, il=1000001; i<il; i++) { postMessage(i); }; };
- 71. 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; }
- 72. // Poll the navigator.onLine property setInterval(function () { console.log(navigator.onLine); }, 1000);
- 74. CACHE MANIFEST # VERSION 10 CACHE: offline.html base.css FALLBACK: online.css offline.css NETWORK: /live-updates
- 75. Drag and Drop
- 76. ...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
- 78. div[draggable] { -khtml-user-drag: element; }
- 79. <p id="drop-area"> Drag and drop files here </p>
- 80. 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; }; dropArea.ondragover = function (evt) { return false; }; dropArea.ondrop = function (evt) { var text = event.dataTransfer.getData("Text"); event.cancelBubble = true; // For IE return false; };
- 81. 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; };
- 82. someImg.ondragstart = function (evt) { var event = evt || window.event; event.dataTransfer.setDragImage(dragIcon, -10, -10); return false; };
- 83. File API
- 84. <!-- The multiple attribute allows for uploading of multiple files --> <input id="files-upload" type="file" multiple>
- 85. 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 }; };
- 87. 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); } }
- 88. // 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);
- 90. Web Sockets
- 94. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 95. 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"); };
- 97. WebGL
- 102. Flight of the Navigator
- 103. Web browser support
- 108. Robert Nyman http://robertnyman.com/speaking/ http://robertnyman.com/html5/ Twitter: @robertnyman Pictures: New Frontier: http://www.teradatamagazine.com/v09n04/Features/A-new-frontier/ Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-monster.html Ninja Turtle: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume- You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/ restoration/ Postman (Costner): http://nationallampoon.com/articles/the-list-top-20-movies-about-the-end-of-the- Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html world Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html Web Workers: http://miscellanea.wellingtongrey.net/2007/06/03/this-modern-life/ Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html Dude offline: http://blogs.phoenixnewtimes.com/uponsun/2008/06/ What is HTML5: http://www.thedvshow.com/mini-guide-html-5-for-video-producers/ you_asked_for_it_dude_offline.php Semantics: http://www.cs.cmu.edu/~tom7/csnotes/fall02/semantics.gif Files: http://www.hannonhill.com/products/index.html APIs: http://lonewolflibrarian.wordpress.com/2009/09/01/library-apis-09-01-09/ Drag me: http://mcus.nu/?cat=25 Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/ History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family- Video: http://www.roirevolution.com/blog/2009/05/ History.htm make_sure_your_excluded_placements_are_actually_be.html Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html Waiting in line: http://www.roirevolution.com/blog/2009/05/ AJAX: http://www.aqlanza.com/technologies01.html make_sure_your_excluded_placements_are_actually_be.html Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet- Canvas: http://www.brianbatson.com/ablankcanvas/giftlist.html strikes.aspx SVG: http://shauser.umwblogs.org/2007/08/28/learning-a-little-svg-from-pgmj/ Flash: http://www.zerofractal.com/assets/error-flash.jpg Today: http://www.nickcannon.com/2009/09/21/mariah-set-to-perform-on-the-today-show-oct-2/ 3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpg Tomorrow: http://www.hulu.com/tales-of-tomorrow Web browsers: http://www.zamaanonline.com/category/funny-amazing-stuff/geek-fun 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 Friends: http://william.tvplaneten.se/tag/friends/ Web browser icons: http://paulirish.com/2010/high-res-browser-icons/ Geolocation: http://www.datadial.net/blog/index.php/2008/09/22/the-definitive-guide-to-website-geo- location/ Hearts: http://www.funonthenet.in/content/view/395/31/ Storage fail: http://failfun.com/funny-pictures/gangsta-fail/