20111014 mu me_html5
TRANSCRIPT
![Page 1: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/1.jpg)
Multimedia
HTML5
Erik DuvalDept. Computerwetenschappen
http://www.cs.kuleuven.ac.be/~erikd/
![Page 2: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/2.jpg)
2
http://www.slideshare.net/erik.duval
![Page 3: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/3.jpg)
wat denken jullie?
3
![Page 5: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/5.jpg)
“flash assassin”
5
![Page 6: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/6.jpg)
![Page 8: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/8.jpg)
html5
• work-in-progress
• ‘most modern browsers some support’
8
![Page 9: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/9.jpg)
9
![Page 10: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/10.jpg)
10
![Page 11: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/11.jpg)
11
![Page 12: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/12.jpg)
<!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
![Page 13: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/13.jpg)
<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
![Page 14: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/14.jpg)
<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
![Page 15: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/15.jpg)
<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
![Page 16: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/16.jpg)
<!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
![Page 17: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/17.jpg)
<audio>
17
![Page 18: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/18.jpg)
<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
![Page 19: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/19.jpg)
• zonder plug-in (flash)
19
![Page 21: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/21.jpg)
21
![Page 22: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/22.jpg)
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>
![Page 23: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/23.jpg)
23
http://onotakehiko.com/webkitclock/
![Page 24: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/24.jpg)
24
http://thewildernessdowntown.com/
![Page 25: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/25.jpg)
25
![Page 26: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/26.jpg)
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
![Page 27: 20111014 mu me_html5](https://reader033.vdocuments.site/reader033/viewer/2022052622/5592f4591a28abaf708b45e7/html5/thumbnails/27.jpg)
27
Questions?
http://erikduval.wordpress.com/twitter: @ErikDuval