Mume HTML5 Intro
1 like535 views
This document discusses HTML5 multimedia capabilities including canvas, audio, video, local storage and web applications. It provides code examples for drawing shapes and images on canvas, embedding audio and video, and using local storage. It also lists additional resources for learning HTML5 and thanks those who have helped with learning HTML5. The document appears to be from a presentation on HTML5 multimedia given by Erik Duval of KU Leuven.
Mume HTML5 Intro
- 1. Multimedia HTML5 Erik Duval Dept. Computerwetenschappen http://www.cs.kuleuven.ac.be/~erikd/
- 3. wat denken jullie? 3
- 6. “flash assassin” 5
- 9. html5 • work-in-progress • ‘most modern browsers some support’ 8
- 10. 9
- 11. 10
- 12. 11
- 13. <!DOCTYPE html><html><body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script></body></html> 12
- 14. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> 13
- 15. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> 13
- 16. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> 14
- 17. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> 14
- 18. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="img_flwr.png"; cxt.drawImage(img,0,0); </script> 15
- 19. <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image(); img.src="img_flwr.png"; cxt.drawImage(img,0,0); </script> 15
- 20. <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html> 16
- 21. <audio> 17
- 22. <video> <!DOCTYPE html><html><body> <video controls="controls" autoplay="autoplay"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> </body></html> 18
- 23. • zonder plug-in (flash) 19
- 25. 21
- 26. <script type="text/javascript"> if (localStorage.n) { localStorage.n=Number(localStorage.n) +1; } else { localStorage.n=1; } document.write("Visits: " + localStorage.n + " time(s)."); </script> <p>Refresh the page to see the counter increase.</p> <p>Close the browser window, and try again, and the counter will continue.</p> 22
- 29. 25
- 30. 26
- 31. resources & thx • @kristofvc, @snakeflash • +Steven Roose, +Bram Luyten • http://www.w3schools.com/html5/ • Text http://www.designzzz.com/getting-to-know-html5/ • http://www.mobilehtml5.com/post/371921120/tutorial-your-first-mobile-html5-app-the-basics • http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 • http://html5doctor.com/ • http://www.html5rocks.com/en/ • http://mrdoob.com/92/Google_Gravity 27
- 32. Questions? http://erikduval.wordpress.com/ twitter: @ErikDuval 28