Your SlideShare is downloading. ×
20111014 mu me_html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

20111014 mu me_html5

487
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
487
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Multimedia HTML5 Erik Duval Dept. Computerwetenschappenhttp://www.cs.kuleuven.ac.be/~erikd/
  • 2. http://www.slideshare.net/erik.duval2
  • 3. wat denken jullie? 3
  • 4. http://www.w3.org/TR/html5/ 4
  • 5. “flash assassin” 5
  • 6. http://www.apple.com/html5/ 7
  • 7. html5• work-in-progress• ‘most modern browsers some support’ 8
  • 8. 9
  • 9. 10
  • 10. 11
  • 11. <!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
  • 12. <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
  • 13. <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
  • 14. <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
  • 15. <!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
  • 16. <audio> 17
  • 17. <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
  • 18. • zonder plug-in (flash) 19
  • 19. http://www.youtube.com/html5 20
  • 20. 21
  • 21. <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 thecounter will continue.</p> 22
  • 22. http://onotakehiko.com/webkitclock/ 23
  • 23. http://thewildernessdowntown.com/ 24
  • 24. 25
  • 25. 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
  • 26. Questions?http://erikduval.wordpress.com/ twitter: @ErikDuval 27