20111014 mu me_html5
0 likes354 views
The document discusses HTML5 multimedia capabilities including canvas, video, audio, and local storage. It provides code examples of drawing on a canvas using JavaScript, playing video and audio, and using local storage to create a simple counter. The document recommends resources for learning more about HTML5 and thanks others for their contributions. It promotes HTML5 as a way to add multimedia without plugins like Flash.
20111014 mu me_html5
- 1. Multimedia HTML5 Erik Duval Dept. Computerwetenschappen http://www.cs.kuleuven.ac.be/~erikd/
- 3. wat denken jullie? 3
- 5. “flash assassin” 5
- 8. html5 • work-in-progress • ‘most modern browsers some support’ 8
- 9. 9
- 10. 10
- 11. 11
- 12. <!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
- 13. <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
- 14. <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
- 15. <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
- 16. <!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
- 17. <audio> 17
- 18. <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
- 19. • zonder plug-in (flash) 19
- 21. 21
- 22. <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
- 25. 25
- 26. resources & thx • @kristofvc, @snakeflash • +Steven Roose, +Bram Luyten • http://www.w3schools.com/html5/ • 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 26
- 27. Questions? http://erikduval.wordpress.com/ twitter: @ErikDuval 27